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/baseof.html b/layouts/_default/baseof.html
index a6c4c07..87fc09e 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -81,3 +81,9 @@
 {{ define "toc" }}
   {{ partial "docs/toc" . }}
 {{ end }}
+{{ if .Store.Get "hasMermaid" }}
+  <script type="module">
+    import mermaid from 'mermaid.min.js';
+    mermaid.initialize({ startOnLoad: true });
+  </script>
+{{ end }}