diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html
index 924a441..c96fea5 100644
--- a/layouts/_default/_markup/render-codeblock-mermaid.html
+++ b/layouts/_default/_markup/render-codeblock-mermaid.html
@@ -1,4 +1,12 @@
+{{- $page := .Page -}}
 <pre class="mermaid">
 {{- .Inner | safeHTML -}}
 </pre>
-{{ .Page.Store.Set "hasMermaid" true }}
+{{- if not ($page.Store.Get "mermaidScriptAdded") -}}
+<script type="module">
+  import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
+  const theme = document.documentElement.dataset.theme === "dark" ? "dark" : "default";
+  mermaid.initialize({ startOnLoad: true, theme });
+</script>
+{{- $page.Store.Set "mermaidScriptAdded" true -}}
+{{- end -}}