From 2ba2d3ad1547f7b3e30b94cc070f64f2940a66ca Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Mon, 9 Feb 2026 21:17:44 +0100
Subject: Mermaid support

---
 assets/css/main.css                                |  7 +++++
 .../_default/_markup/render-codeblock-mermaid.html |  4 +++
 layouts/partials/head/index.html                   | 30 ++++++++++++++++++++++
 3 files changed, 41 insertions(+)
 create mode 100644 layouts/_default/_markup/render-codeblock-mermaid.html

diff --git a/assets/css/main.css b/assets/css/main.css
index 029324f..8c8b0b8 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -127,6 +127,13 @@ pre code {
   padding: 0;
 }
 
+pre.mermaid {
+  background: transparent;
+  border: none;
+  padding: 0;
+  text-align: center;
+}
+
 figure {
   margin-bottom: 1.25rem;
 }
diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html
new file mode 100644
index 0000000..d22d89e
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock-mermaid.html
@@ -0,0 +1,4 @@
+{{- .Page.Store.Set "hasMermaid" true -}}
+<pre class="mermaid">
+  {{- .Inner | safeHTML -}}
+</pre>
diff --git a/layouts/partials/head/index.html b/layouts/partials/head/index.html
index d2b3826..85f73eb 100644
--- a/layouts/partials/head/index.html
+++ b/layouts/partials/head/index.html
@@ -4,3 +4,33 @@
 {{- if or (.HasShortcode "chart") (.HasShortcode "perf-chart") -}}
 <script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>
 {{- end -}}
+
+{{- if .Page.Store.Get "hasMermaid" -}}
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+
+  function getMermaidTheme() {
+    return localStorage.getItem('theme') === 'dark' ? 'dark' : 'default';
+  }
+
+  // Save original sources before mermaid replaces them with SVG
+  document.querySelectorAll('pre.mermaid').forEach(el => {
+    el.setAttribute('data-mermaid-src', el.textContent);
+  });
+
+  mermaid.initialize({ startOnLoad: true, theme: getMermaidTheme() });
+
+  // Re-render on theme toggle (detected via class change on <html>)
+  new MutationObserver(() => {
+    document.querySelectorAll('pre.mermaid').forEach(el => {
+      const src = el.getAttribute('data-mermaid-src');
+      if (src) {
+        el.removeAttribute('data-processed');
+        el.textContent = src;
+      }
+    });
+    mermaid.initialize({ startOnLoad: false, theme: getMermaidTheme() });
+    mermaid.run();
+  }).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+</script>
+{{- end -}}
-- 
cgit v1.3