From ba9a5caa16685cc477fa2b8b9039c466ea4a8306 Mon Sep 17 00:00:00 2001
From: "Mikael F. Aldebrand" <44557053+miklz@users.noreply.github.com>
Date: Mon, 22 Dec 2025 09:40:33 -0300
Subject: [PATCH] feat: add support for Mermaid diagrams in Markdown content
 (#1186)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add support for Mermaid diagrams in markdown content

This commit introduces native Mermaid diagram rendering to the theme.

Following Hugo’s official documentation, a new custom code block renderer
(`render-codeblock-mermaid.html`) was added under `layouts/_default/` to
detect Mermaid code blocks and inject the necessary script flag into the
page context.

Additionally, the `baseof.html` template now conditionally includes the
Mermaid JS module from the CDN when a page contains a Mermaid diagram:

  {{ if .Store.Get "hasMermaid" }}
    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
      mermaid.initialize({ startOnLoad: true, theme: 'neutral' });
    </script>
  {{ end }}

This enables rendering of fenced code blocks using the `mermaid` language
in markdown files without requiring any external preprocessing.

* Create article/components/mermaid and fix script version

---------

Co-authored-by: Jimmy <jimmy@cai.im>
---
 layouts/_default/_markup/render-codeblock-mermaid.html | 4 ++++
 layouts/_default/single.html                           | 1 +
 layouts/partials/article/components/mermaid.html       | 9 +++++++++
 3 files changed, 14 insertions(+)
 create mode 100644 layouts/_default/_markup/render-codeblock-mermaid.html
 create mode 100644 layouts/partials/article/components/mermaid.html

diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html
new file mode 100644
index 0000000..42e8abf
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock-mermaid.html
@@ -0,0 +1,4 @@
+<pre class="mermaid">
+  {{ .Inner | htmlEscape | safeHTML }}
+</pre>
+{{ .Page.Store.Set "hasMermaid" true }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 5f300bf..0e8d980 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -39,6 +39,7 @@
     {{ partialCached "footer/footer" . }}
 
     {{ partialCached "article/components/photoswipe" . }}
+    {{ partialCached "article/components/mermaid" . }}
 {{ end }}
 
 {{ define "right-sidebar" }}
diff --git a/layouts/partials/article/components/mermaid.html b/layouts/partials/article/components/mermaid.html
new file mode 100644
index 0000000..826e2f0
--- /dev/null
+++ b/layouts/partials/article/components/mermaid.html
@@ -0,0 +1,9 @@
+{{ if .Store.Get "hasMermaid" }}
+<script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11.12.2/+esm';
+    mermaid.initialize({
+        startOnLoad: true,
+        theme: 'neutral',
+    });
+</script>
+{{ end }}
\ No newline at end of file