diff --git a/data/config.yaml b/data/config.yaml
index 6e1c75cc2..106eeb8b7 100644
--- a/data/config.yaml
+++ b/data/config.yaml
@@ -11,6 +11,7 @@ enableFooter: true
 enableContextualBacklinks: true
 enableRecentNotes: false
 enableGitHubEdit: true
+enableMermaid: true
 GitHubLink: https://github.com/jackyzha0/quartz/tree/hugo/content
 search:
   enableSemanticSearch: false
diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html
new file mode 100644
index 000000000..59641551c
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock-mermaid.html
@@ -0,0 +1,4 @@
+<div class="mermaid">
+  {{- .Inner | safeHTML }}
+</div>
+{{ .Page.Store.Set "hasMermaid" true }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index ba18b4ccf..4a05adc05 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -50,6 +50,8 @@
   <script src="{{$s.Permalink}}"></script>
   {{end}}
   {{partial "katex.html" .}}
+
+  {{partial "mermaid.html" .}}
     
   <script src="https://unpkg.com/@floating-ui/core@0.7.3"></script>
   <script src="https://unpkg.com/@floating-ui/dom@0.5.4"></script>
diff --git a/layouts/partials/mermaid.html b/layouts/partials/mermaid.html
new file mode 100644
index 000000000..09d348b52
--- /dev/null
+++ b/layouts/partials/mermaid.html
@@ -0,0 +1,8 @@
+{{if $.Site.Data.config.enableMermaid}}
+  {{ if .Page.Store.Get "hasMermaid" }}
+    <script type="module">
+      import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+      mermaid.initialize({ startOnLoad: true });
+    </script>
+  {{ end }}
+{{ end }}