diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html
new file mode 100644
index 000000000..42e8abfd8
--- /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 83fdaa325..e5d4dbd0a 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -23,6 +23,15 @@
                 {{- block "main" . }}{{- end }}
             </main>
         </div>
+        {{ 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,
+              theme: 'neutral',
+            });
+          </script>
+        {{ end }}
         {{ partial "footer/include.html" . }}
     </body>
 </html>