all: render mermaid diagrams client-side

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

layouts/_default/_markup/render-codeblock-mermaid.html

@@ -0,0 +1,4 @@
+<pre class="mermaid">
+	{{- .Inner | safeHTML }}
+</pre>
+{{ .Page.Store.Set "hasMermaid" true }}

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) -}}