layouts: render ```mermaid code blocks as diagrams

Adds a Hugo codeblock render hook that turns ```mermaid fences into
<pre class="mermaid"> containers, plus a lazily-loaded mermaid bundle
that only ships on pages that actually contain a diagram. Mirrors the
existing YouTube embed pattern (Store flag + conditional script tag in
baseof) so the main scripts.js bundle stays unchanged.

assets/js/mermaid.js

@@ -0,0 +1,19 @@
+import mermaid from 'mermaid'
+
+const isDark = () => document.documentElement.classList.contains('dark')
+
+mermaid.initialize({
+  startOnLoad: false,
+  securityLevel: 'strict',
+  theme: isDark() ? 'dark' : 'default',
+})
+
+const render = () => {
+  mermaid.run({ querySelector: 'pre.mermaid' })
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', render)
+} else {
+  render()
+}

layouts/_markup/render-codeblock-mermaid.html

@@ -0,0 +1,5 @@
+{{- .Page.Store.Set "mermaid" true -}}
+<pre
+  class="mermaid not-prose my-4 flex justify-center bg-transparent"
+  data-pagefind-ignore
+>{{- .Inner -}}</pre>

layouts/_partials/mermaid-script.html

@@ -0,0 +1,4 @@
+{{ $mermaid := resources.Get "js/mermaid.js"
+  | js.Build (dict "minify" true "targetPath" "mermaid.js")
+}}
+<script defer src="{{ $mermaid.Permalink }}"></script>

layouts/baseof.html

@@ -95,5 +95,9 @@
     {{ with .Store.Get "youtube" }}
       {{ partialCached "youtube-script.html" "-" "-" }}
     {{ end }}
+    {{/* Load mermaid if the page contains a mermaid code block */}}
+    {{ with .Store.Get "mermaid" }}
+      {{ partialCached "mermaid-script.html" "-" "-" }}
+    {{ end }}
   </body>
 </html>

package.json

@@ -25,6 +25,7 @@
     "heroicons": "2.2.0",
     "highlight.js": "11.11.1",
     "marked": "17.0.4",
+    "mermaid": "11.15.0",
     "tailwindcss": "4.2.1"
   },
   "devDependencies": {