From e19c52150450a092ca71a102ea0132429d79d18f Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 17 Jul 2026 08:40:48 +0000
Subject: [PATCH] docs: dynamically render Mermaid diagrams on GitHub Pages

Configure Kramdown as the markdown parser and add a custom script in `docs/_includes/head-custom.html`. This script dynamically injects the Mermaid.js library via CDN to parse and render standard `.language-mermaid` fenced code blocks directly on the client side, bypassing Jekyll plugin limitations on GitHub Pages.

Co-authored-by: lostcontrol <983305+lostcontrol@users.noreply.github.com>
---
 docs/_config.yml                |  1 +
 docs/_includes/head-custom.html | 17 +++++++++++++++++
 2 files changed, 18 insertions(+)
 create mode 100644 docs/_includes/head-custom.html

diff --git a/docs/_config.yml b/docs/_config.yml
index 5197212..41e14e7 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -1 +1,2 @@
 theme: jekyll-theme-leap-day
+markdown: kramdown
diff --git a/docs/_includes/head-custom.html b/docs/_includes/head-custom.html
new file mode 100644
index 0000000..b6fdac7
--- /dev/null
+++ b/docs/_includes/head-custom.html
@@ -0,0 +1,17 @@
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+  mermaid.initialize({ startOnLoad: false });
+  document.addEventListener("DOMContentLoaded", async function() {
+    const elements = document.querySelectorAll('.language-mermaid');
+    elements.forEach(el => {
+      const codeBlock = el.querySelector('code');
+      if (codeBlock) {
+        el.textContent = codeBlock.textContent;
+        el.classList.add('mermaid');
+      }
+    });
+    await mermaid.run({
+      querySelector: '.mermaid'
+    });
+  });
+</script>