diff --git a/docs/_includes/head-custom.html b/docs/_includes/head-custom.html
new file mode 100644
index 0000000..412267e
--- /dev/null
+++ b/docs/_includes/head-custom.html
@@ -0,0 +1,24 @@
+{%- comment -%}
+Render Mermaid diagrams in docs pages.
+
+Markdown ```mermaid fenced blocks are emitted by Kramdown as
+<pre><code class="language-mermaid">…</code></pre>, but Mermaid only
+auto-renders elements with class="mermaid". This snippet rewrites the
+pre/code nodes into div.mermaid before initialising the library.
+
+Loaded as an ES module from the jsDelivr CDN so we don't have to vendor
+the library into the repo. Pinned to a major version for cache stability.
+{%- endcomment -%}
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+
+  document.querySelectorAll('pre > code.language-mermaid').forEach((code) => {
+    const div = document.createElement('div');
+    div.className = 'mermaid';
+    div.textContent = code.textContent;
+    code.parentElement.replaceWith(div);
+  });
+
+  mermaid.initialize({ startOnLoad: false, securityLevel: 'strict' });
+  mermaid.run();
+</script>