diff --git a/hugo/layouts/_markuprender-codeblock-mermaid.html b/hugo/layouts/_markuprender-codeblock-mermaid.html
new file mode 100644
index 00000000..42e8abfd
--- /dev/null
+++ b/hugo/layouts/_markuprender-codeblock-mermaid.html
@@ -0,0 +1,4 @@
+<pre class="mermaid">
+  {{ .Inner | htmlEscape | safeHTML }}
+</pre>
+{{ .Page.Store.Set "hasMermaid" true }}
diff --git a/hugo/layouts/baseof.html b/hugo/layouts/baseof.html
new file mode 100644
index 00000000..5faa6bfc
--- /dev/null
+++ b/hugo/layouts/baseof.html
@@ -0,0 +1,6 @@
+{{ 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 });
+  </script>
+{{ end }}