diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 1c3add0..13171ea 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -46,6 +46,12 @@
 <script defer src="{{ $c_js.Permalink }}" {{ printf "integrity=%q" $c_js.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous"></script>
 {{- end }}
 {{- partial "mathjax.html" . -}}
+{{ if .Page.Store.Get "hasMermaid" }}
+    <script defer type="module">
+      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
+      mermaid.initialize({ startOnLoad: true,theme: 'dark' });
+    </script>
+{{ end }}
 {{- if templates.Exists "partials/extra-foot.html" -}}{{- partial "extra-foot.html" . -}}{{- end }}
 </body>
 
diff --git a/layouts/_default/markup/render-codeblock-mermaid.html b/layouts/_default/markup/render-codeblock-mermaid.html
new file mode 100644
index 0000000..94ea0ca
--- /dev/null
+++ b/layouts/_default/markup/render-codeblock-mermaid.html
@@ -0,0 +1,4 @@
+<pre class="mermaid">
+  {{- .Inner | safeHTML }}
+</pre>
+{{ .Page.Store.Set "hasMermaid" true }}