[rulkc] [PATCH v2 12/16] mermaid: Add mermaid workaround

Dmitry Rokosov rockosov at rulkc.org
Fri Jul 17 20:17:09 MSK 2026


From: Nikita Shubin <nikita.shubin at maquefel.me>

For upstream hugo the only possiblity for mermaid rendering is using
external js script.

Signed-off-by: Nikita Shubin <nikita.shubin at maquefel.me>
Signed-off-by: Dmitry Rokosov <rockosov at rulkc.org>
---
 layouts/partials/head-additions.html | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 layouts/partials/head-additions.html

diff --git a/layouts/partials/head-additions.html b/layouts/partials/head-additions.html
new file mode 100644
index 000000000000..0aa1935d77c3
--- /dev/null
+++ b/layouts/partials/head-additions.html
@@ -0,0 +1,26 @@
+<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    // Look for mermaid code blocks
+    const mermaidBlocks = document.querySelectorAll('pre code.language-mermaid');
+    if (mermaidBlocks.length > 0) {
+      mermaid.initialize({
+        startOnLoad: false,
+        theme: 'default',
+        flowchart: {
+          useMaxWidth: true
+        }
+      });
+
+      mermaidBlocks.forEach((block, index) => {
+        const graphDefinition = block.textContent;
+        const div = document.createElement('div');
+        div.className = 'mermaid';
+        div.innerHTML = graphDefinition;
+        block.parentNode.parentNode.replaceChild(div, block.parentNode);
+      });
+
+      mermaid.init();
+    }
+  });
+</script>
-- 
2.48.1




More information about the rulkc mailing list