From 421d988bfcc0b15726421f3c5fb4ea661ddb7ccb Mon Sep 17 00:00:00 2001
From: Joseph Liu <jo3.l.dev@outlook.com>
Date: Thu, 15 Aug 2024 19:47:16 -0700
Subject: [PATCH] all: render mermaid diagrams client-side

---
 content/docs/reference/custom-interactions.md        |  4 ++--
 layouts/_default/_markup/render-codeblock-kroki.html |  7 -------
 .../_default/_markup/render-codeblock-mermaid.html   |  4 ++++
 layouts/partials/footer/script-footer-custom.html    |  8 ++++++++
 resources/_gen/getresource/15350315646381278250      | 12 ------------
 resources/_gen/getresource/1544453209307383551       | 12 ------------
 6 files changed, 14 insertions(+), 33 deletions(-)
 delete mode 100644 layouts/_default/_markup/render-codeblock-kroki.html
 create mode 100644 layouts/_default/_markup/render-codeblock-mermaid.html
 delete mode 100644 resources/_gen/getresource/15350315646381278250
 delete mode 100644 resources/_gen/getresource/1544453209307383551

diff --git a/content/docs/reference/custom-interactions.md b/content/docs/reference/custom-interactions.md
index 9aa5aff..52062c2 100644
--- a/content/docs/reference/custom-interactions.md
+++ b/content/docs/reference/custom-interactions.md
@@ -35,7 +35,7 @@ An interaction's lifetime starts with the initial _interaction_ with an _interac
    interaction.
 4. _(optional)_ Continue to send followup responses for up to 15 minutes until the interaction token expires.
 
-```kroki {type=mermaid}
+```mermaid
 graph LR;
 A[Button pressed] --> B{CC Triggered}
 C[Menu used] --> B
@@ -421,7 +421,7 @@ A `row` must also be a slice. It either contains 1-5 buttons, _or_ a single sele
 
 Below is an example of a `components` structure.
 
-```kroki {type=mermaid}
+```mermaid
 graph TB
 subgraph Components
 subgraph Row 1
diff --git a/layouts/_default/_markup/render-codeblock-kroki.html b/layouts/_default/_markup/render-codeblock-kroki.html
deleted file mode 100644
index 0594826..0000000
--- a/layouts/_default/_markup/render-codeblock-kroki.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{{- /*
-	HOTFIX: override kroki rendering to unblock CI
-	TODO(jo3-l): fix this properly
-*/ -}}
-<div class="highlight">
-	<pre><code class="language-txt">{{ .Inner }}</code></pre>
-</div>
diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html
new file mode 100644
index 0000000..1380dd8
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock-mermaid.html
@@ -0,0 +1,4 @@
+<pre class="mermaid">
+	{{- .Inner | safeHTML }}
+</pre>
+{{ .Page.Store.Set "hasMermaid" true }}
diff --git a/layouts/partials/footer/script-footer-custom.html b/layouts/partials/footer/script-footer-custom.html
index 7501eec..58aa330 100644
--- a/layouts/partials/footer/script-footer-custom.html
+++ b/layouts/partials/footer/script-footer-custom.html
@@ -12,6 +12,14 @@
 {{ end -}}
 */}}
 
+{{/* Mermaid diagrams */}}
+{{ if .Page.Store.Get "hasMermaid" }}
+  <script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
+    mermaid.initialize({ startOnLoad: true });
+  </script>
+{{ end }}
+
 {{/* Algolia DocSearch */}}
 {{ if site.Params.add_ons.docSearch -}}
   {{ partial "footer/esbuild" (dict "src" "js/docsearch.js" "load" "async" "transpile" false) -}}
diff --git a/resources/_gen/getresource/15350315646381278250 b/resources/_gen/getresource/15350315646381278250
deleted file mode 100644
index 428a21e..0000000
--- a/resources/_gen/getresource/15350315646381278250
+++ /dev/null
@@ -1,12 +0,0 @@
-HTTP/1.1 200 OK
-Content-Length: 13527
-Cache-Control: public, max-age=432000
-Content-Type: image/svg+xml
-Date: Sun, 04 Aug 2024 23:10:30 GMT
-Etag: 10.9.0dtZChM2IlX7beIVpuwq4zm00
-Expires: Fri, 09 Aug 2024 23:10:30 GMT
-Last-Modified: Sun, 31 Mar 2024 10:20:25 GMT
-X-Etags-1: 10.9.0dtZChM2IlX7beIVpuwq4zm00
-X-Etags-2: 10.9.0dtZChM2IlX7beIVpuwq4zm00
-
-<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="-7.5 -8 542.3125 796.234375" height="796.234375" xmlns="http://www.w3.org/2000/svg" width="542.3125" id="container"><style>#container{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#container .error-icon{fill:#552222;}#container .error-text{fill:#552222;stroke:#552222;}#container .edge-thickness-normal{stroke-width:2px;}#container .edge-thickness-thick{stroke-width:3.5px;}#container .edge-pattern-solid{stroke-dasharray:0;}#container .edge-pattern-dashed{stroke-dasharray:3;}#container .edge-pattern-dotted{stroke-dasharray:2;}#container .marker{fill:#333333;stroke:#333333;}#container .marker.cross{stroke:#333333;}#container svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#container .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#container .cluster-label text{fill:#333;}#container .cluster-label span,#container p{color:#333;}#container .label text,#container span,#container p{fill:#333;color:#333;}#container .node rect,#container .node circle,#container .node ellipse,#container .node polygon,#container .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#container .flowchart-label text{text-anchor:middle;}#container .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#container .node .label{text-align:center;}#container .node.clickable{cursor:pointer;}#container .arrowheadPath{fill:#333333;}#container .edgePath .path{stroke:#333333;stroke-width:2.0px;}#container .flowchart-link{stroke:#333333;fill:none;}#container .edgeLabel{background-color:#e8e8e8;text-align:center;}#container .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#container .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#container .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#container .cluster text{fill:#333;}#container .cluster span,#container p{color:#333;}#container div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#container .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#container :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="6" viewBox="0 0 10 10" class="marker flowchart" id="container_flowchart-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"></path></marker><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="4.5" viewBox="0 0 10 10" class="marker flowchart" id="container_flowchart-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart" id="container_flowchart-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart" id="container_flowchart-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart" id="container_flowchart-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart" id="container_flowchart-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g transform="translate(-7.5, -8)" class="root"><g class="clusters"><g id="Components" class="cluster default flowchart-label"><rect height="780.234375" width="526.3125" y="8" x="8" ry="0" rx="0" style=""></rect><g transform="translate(225.5234375, 8)" class="cluster-label"><foreignObject height="19" width="91.265625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Components</span></div></foreignObject></g></g></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g transform="translate(25.5, 35)" class="root"><g class="clusters"><g id="subGraph0" class="cluster default flowchart-label"><rect height="114.078125" width="476.3125" y="8" x="8" ry="0" rx="0" style=""></rect><g transform="translate(225.4375, 8)" class="cluster-label"><foreignObject height="19" width="41.4375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Row 1</span></div></foreignObject></g></g></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g transform="translate(75.0390625, 65.0390625)" data-id="b1" data-node="true" id="flowchart-b1-0" class="node default default flowchart-label"><circle height="34" width="64.078125" r="32.0390625" ry="0" rx="0" style=""></circle><g transform="translate(-24.5390625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="49.078125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Button</span></div></foreignObject></g></g><g transform="translate(189.1171875, 65.0390625)" data-id="b2" data-node="true" id="flowchart-b2-1" class="node default default flowchart-label"><circle height="34" width="64.078125" r="32.0390625" ry="0" rx="0" style=""></circle><g transform="translate(-24.5390625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="49.078125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Button</span></div></foreignObject></g></g><g transform="translate(303.1953125, 65.0390625)" data-id="b3" data-node="true" id="flowchart-b3-2" class="node default default flowchart-label"><circle height="34" width="64.078125" r="32.0390625" ry="0" rx="0" style=""></circle><g transform="translate(-24.5390625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="49.078125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Button</span></div></foreignObject></g></g><g transform="translate(417.2734375, 65.0390625)" data-id="b4" data-node="true" id="flowchart-b4-3" class="node default default flowchart-label"><circle height="34" width="64.078125" r="32.0390625" ry="0" rx="0" style=""></circle><g transform="translate(-24.5390625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="49.078125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Button</span></div></foreignObject></g></g></g></g><g transform="translate(139.578125, 199.078125)" class="root"><g class="clusters"><g id="subGraph1" class="cluster default flowchart-label"><rect height="114.078125" width="248.15625" y="8" x="8" ry="0" rx="0" style=""></rect><g transform="translate(110.8671875, 8)" class="cluster-label"><foreignObject height="19" width="42.421875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Row 2</span></div></foreignObject></g></g></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g transform="translate(75.0390625, 65.0390625)" data-id="b5" data-node="true" id="flowchart-b5-4" class="node default default flowchart-label"><circle height="34" width="64.078125" r="32.0390625" ry="0" rx="0" style=""></circle><g transform="translate(-24.5390625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="49.078125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Button</span></div></foreignObject></g></g><g transform="translate(189.1171875, 65.0390625)" data-id="b6" data-node="true" id="flowchart-b6-5" class="node default default flowchart-label"><circle height="34" width="64.078125" r="32.0390625" ry="0" rx="0" style=""></circle><g transform="translate(-24.5390625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="49.078125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Button</span></div></foreignObject></g></g></g></g><g transform="translate(177.0078125, 363.15625)" class="root"><g class="clusters"><g id="subGraph2" class="cluster default flowchart-label"><rect height="84" width="173.296875" y="8" x="8" ry="0" rx="0" style=""></rect><g transform="translate(73.40625, 8)" class="cluster-label"><foreignObject height="19" width="42.484375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Row 3</span></div></foreignObject></g></g></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g transform="translate(94.6484375, 50)" data-id="m1" data-node="true" id="flowchart-m1-6" class="node default default flowchart-label"><rect height="34" width="103.296875" y="-17" x="-51.6484375" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-44.1484375, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="88.296875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Select Menu</span></div></foreignObject></g></g></g></g><g transform="translate(82.5390625, 497.15625)" class="root"><g class="clusters"><g id="subGraph3" class="cluster default flowchart-label"><rect height="114.078125" width="362.234375" y="8" x="8" ry="0" rx="0" style=""></rect><g transform="translate(167.609375, 8)" class="cluster-label"><foreignObject height="19" width="43.015625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Row 4</span></div></foreignObject></g></g></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g transform="translate(75.0390625, 65.0390625)" data-id="b7" data-node="true" id="flowchart-b7-7" class="node default default flowchart-label"><circle height="34" width="64.078125" r="32.0390625" ry="0" rx="0" style=""></circle><g transform="translate(-24.5390625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="49.078125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Button</span></div></foreignObject></g></g><g transform="translate(189.1171875, 65.0390625)" data-id="b8" data-node="true" id="flowchart-b8-8" class="node default default flowchart-label"><circle height="34" width="64.078125" r="32.0390625" ry="0" rx="0" style=""></circle><g transform="translate(-24.5390625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="49.078125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Button</span></div></foreignObject></g></g><g transform="translate(303.1953125, 65.0390625)" data-id="b9" data-node="true" id="flowchart-b9-9" class="node default default flowchart-label"><circle height="34" width="64.078125" r="32.0390625" ry="0" rx="0" style=""></circle><g transform="translate(-24.5390625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="49.078125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Button</span></div></foreignObject></g></g></g></g><g transform="translate(177.0078125, 661.234375)" class="root"><g class="clusters"><g id="subGraph4" class="cluster default flowchart-label"><rect height="84" width="173.296875" y="8" x="8" ry="0" rx="0" style=""></rect><g transform="translate(73.390625, 8)" class="cluster-label"><foreignObject height="19" width="42.515625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Row 5</span></div></foreignObject></g></g></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g transform="translate(94.6484375, 50)" data-id="m2" data-node="true" id="flowchart-m2-10" class="node default default flowchart-label"><rect height="34" width="103.296875" y="-17" x="-51.6484375" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-44.1484375, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="88.296875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Select Menu</span></div></foreignObject></g></g></g></g></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/resources/_gen/getresource/1544453209307383551 b/resources/_gen/getresource/1544453209307383551
deleted file mode 100644
index 58b1ab9..0000000
--- a/resources/_gen/getresource/1544453209307383551
+++ /dev/null
@@ -1,12 +0,0 @@
-HTTP/1.1 200 OK
-Content-Length: 13908
-Cache-Control: public, max-age=432000
-Content-Type: image/svg+xml
-Date: Sun, 04 Aug 2024 23:10:30 GMT
-Etag: 10.9.0evPHt6e4YlidQAb1lOEdZW00
-Expires: Fri, 09 Aug 2024 23:10:30 GMT
-Last-Modified: Sun, 31 Mar 2024 10:20:25 GMT
-X-Etags-1: 10.9.0evPHt6e4YlidQAb1lOEdZW00
-X-Etags-2: 10.9.0evPHt6e4YlidQAb1lOEdZW00
-
-<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="-8 -8 828.140625 218" height="218" xmlns="http://www.w3.org/2000/svg" width="828.140625" id="container"><style>#container{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#container .error-icon{fill:#552222;}#container .error-text{fill:#552222;stroke:#552222;}#container .edge-thickness-normal{stroke-width:2px;}#container .edge-thickness-thick{stroke-width:3.5px;}#container .edge-pattern-solid{stroke-dasharray:0;}#container .edge-pattern-dashed{stroke-dasharray:3;}#container .edge-pattern-dotted{stroke-dasharray:2;}#container .marker{fill:#333333;stroke:#333333;}#container .marker.cross{stroke:#333333;}#container svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#container .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#container .cluster-label text{fill:#333;}#container .cluster-label span,#container p{color:#333;}#container .label text,#container span,#container p{fill:#333;color:#333;}#container .node rect,#container .node circle,#container .node ellipse,#container .node polygon,#container .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#container .flowchart-label text{text-anchor:middle;}#container .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#container .node .label{text-align:center;}#container .node.clickable{cursor:pointer;}#container .arrowheadPath{fill:#333333;}#container .edgePath .path{stroke:#333333;stroke-width:2.0px;}#container .flowchart-link{stroke:#333333;fill:none;}#container .edgeLabel{background-color:#e8e8e8;text-align:center;}#container .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#container .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#container .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#container .cluster text{fill:#333;}#container .cluster span,#container p{color:#333;}#container div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#container .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#container :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="6" viewBox="0 0 10 10" class="marker flowchart" id="container_flowchart-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"></path></marker><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="4.5" viewBox="0 0 10 10" class="marker flowchart" id="container_flowchart-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart" id="container_flowchart-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart" id="container_flowchart-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart" id="container_flowchart-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart" id="container_flowchart-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path marker-end="url(#container_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-A LE-B" id="L-A-B-0" d="M131.633,17L136.853,17C142.073,17,152.513,17,166.761,25.058C181.009,33.116,199.066,49.232,208.094,57.29L217.122,65.348"></path><path marker-end="url(#container_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-C LE-B" id="L-C-B-0" d="M116.063,101L123.878,101C131.693,101,147.323,101,158.505,101.066C169.687,101.132,176.42,101.264,179.787,101.33L183.154,101.396"></path><path marker-end="url(#container_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-D LE-B" id="L-D-B-0" d="M137.953,185L142.12,185C146.286,185,154.62,185,167.809,177.102C180.998,169.205,199.043,153.409,208.065,145.511L217.088,137.614"></path><path marker-end="url(#container_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-B LE-E" id="L-B-E-0" d="M294.252,68.877L303.773,60.231C313.293,51.585,332.334,34.292,345.138,25.646C357.942,17,364.508,17,367.792,17L371.075,17"></path><path marker-end="url(#container_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-B LE-G" id="L-B-G-0" d="M326.875,101.5L330.958,101.417C335.042,101.333,343.208,101.167,351.953,101.083C360.697,101,370.019,101,374.68,101L379.341,101"></path><path marker-end="url(#container_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-B LE-H" id="L-B-H-0" d="M294.252,134.123L303.773,142.602C313.293,151.082,332.334,168.041,349.667,176.52C366.999,185,382.623,185,390.435,185L398.247,185"></path><path marker-end="url(#container_flowchart-pointEnd)" style="fill:none;stroke-width:2px;stroke-dasharray:3;" class="edge-thickness-normal edge-pattern-dotted flowchart-link LS-E LE-F" id="L-E-F-0" d="M600.25,17L604.417,17C608.583,17,616.917,17,634.475,27.618C652.034,38.236,678.817,59.471,692.209,70.089L705.601,80.707"></path><path marker-end="url(#container_flowchart-pointEnd)" style="fill:none;stroke-width:2px;stroke-dasharray:3;" class="edge-thickness-normal edge-pattern-dotted flowchart-link LS-G LE-F" id="L-G-F-0" d="M591.984,101L597.529,101C603.073,101,614.161,101,622.989,101C631.817,101,638.383,101,641.667,101L644.95,101"></path><path marker-end="url(#container_flowchart-pointEnd)" style="fill:none;stroke-width:2px;stroke-dasharray:3;" class="edge-thickness-normal edge-pattern-dotted flowchart-link LS-H LE-F" id="L-H-F-0" d="M573.078,185L581.773,185C590.469,185,607.859,185,629.947,174.382C652.034,163.764,678.817,142.529,692.209,131.911L705.601,121.293"></path></g><g class="edgeLabels"><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(68.9765625, 17)" data-id="A" data-node="true" id="flowchart-A-0" class="node default default flowchart-label"><rect height="34" width="125.3125" y="-17" x="-62.65625" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-55.15625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="110.3125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Button pressed</span></div></foreignObject></g></g><g transform="translate(257.1640625, 101)" data-id="B" data-node="true" id="flowchart-B-1" class="node default default flowchart-label"><polygon style="" transform="translate(-69.2109375,69.2109375)" class="label-container" points="69.2109375,0 138.421875,-69.2109375 69.2109375,-138.421875 0,-69.2109375"></polygon><g transform="translate(-44.7109375, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="89.421875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">CC Triggered</span></div></foreignObject></g></g><g transform="translate(68.9765625, 101)" data-id="C" data-node="true" id="flowchart-C-2" class="node default default flowchart-label"><rect height="34" width="94.171875" y="-17" x="-47.0859375" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-39.5859375, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="79.171875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Menu used</span></div></foreignObject></g></g><g transform="translate(68.9765625, 185)" data-id="D" data-node="true" id="flowchart-D-4" class="node default default flowchart-label"><rect height="34" width="137.953125" y="-17" x="-68.9765625" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-61.4765625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="122.953125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Modal submitted</span></div></foreignObject></g></g><g transform="translate(488.3125, 17)" data-id="E" data-node="true" id="flowchart-E-7" class="node default default flowchart-label"><rect height="34" width="223.875" y="-17" x="-111.9375" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-104.4375, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="208.875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Bot sends message response</span></div></foreignObject></g></g><g transform="translate(488.3125, 101)" data-id="G" data-node="true" id="flowchart-G-9" class="node default default flowchart-label"><rect height="34" width="207.34375" y="-17" x="-103.671875" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-96.171875, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="192.34375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Bot sends modal response</span></div></foreignObject></g></g><g transform="translate(488.3125, 185)" data-id="H" data-node="true" id="flowchart-H-11" class="node default default flowchart-label"><rect height="34" width="169.53125" y="-17" x="-84.765625" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-77.265625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="154.53125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Bot updates message</span></div></foreignObject></g></g><g transform="translate(731.1953125, 101)" data-id="F" data-node="true" id="flowchart-F-13" class="node default default flowchart-label"><rect height="34" width="161.890625" y="-17" x="-80.9453125" ry="5" rx="5" style="" class="basic label-container"></rect><g transform="translate(-73.4453125, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="146.890625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Bot sends followups</span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file