diff --git a/content/notes/config.md b/content/notes/config.md
index d6321b39..f0e63e4d 100644
--- a/content/notes/config.md
+++ b/content/notes/config.md
@@ -57,6 +57,9 @@ enableRecentNotes: false
 enableGitHubEdit: true
 GitHubLink: https://github.com/jackyzha0/quartz/tree/hugo/content
 
+# whether to render mermaid diagrams
+enableMermaid: true
+
 # whether to use Operand to power semantic search
 # IMPORTANT: replace this API key with your own if you plan on using
 # Operand search!
diff --git a/data/config.yaml b/data/config.yaml
index 6e1c75cc..106eeb8b 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 00000000..59641551
--- /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 ba18b4cc..b5b01549 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>
@@ -145,6 +147,19 @@
 
         }
       {{end}}
+
+      {{if $data.enableMermaid | default $.Site.Data.config.enableMermaid}}
+        var els = document.getElementsByClassName("mermaid");
+        if (els.length > 0) {
+          import('https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs').then(
+            (obj) => {
+              // init forces mermaid to render mermaid markdown without waiting
+              // for DOMContentLoaded event
+              obj.default.init();
+            }
+          )
+        }
+      {{end}}
     }
 
     const init = (doc = document) => {
diff --git a/layouts/partials/mermaid.html b/layouts/partials/mermaid.html
new file mode 100644
index 00000000..09d348b5
--- /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 }}