diff --git a/posts/simp-made-simple.md b/posts/simp-made-simple.md
index 667a5082a7..50e1e1fe19 100644
--- a/posts/simp-made-simple.md
+++ b/posts/simp-made-simple.md
@@ -67,19 +67,18 @@ Roughly speaking, when traversing an expression `e`, `simp` does the following i
 
 We call this the *simplification loop*.
 
-```mermaid
+<div class="mermaid">
 graph TD
     e["e"]
     e1["e₁"]
     e2["e₂"]
-    
+
     e -->|pre| e1
     e -->|pre| e2
-    
+
     e1 -->|post| e
     e2 -->|post| e
-```
-
+</div>
 In the figure above, the simplification loop does the following: 
 
 1. Preprocedures on `e`
diff --git a/themes/lean_theme/templates/base.tmpl b/themes/lean_theme/templates/base.tmpl
index 110792dfb7..33fca0fd27 100644
--- a/themes/lean_theme/templates/base.tmpl
+++ b/themes/lean_theme/templates/base.tmpl
@@ -37,6 +37,13 @@
     </div>
     {{ base.late_load_js() }}
     {% block extra_js %}{% endblock %}
+
+    <!-- Mermaid JS for diagram rendering -->
+    <script type="module">
+        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+        mermaid.initialize({ startOnLoad: true });
+    </script>
+
     {{ body_end }}
     {{ template_hooks['body_end']() }}
 </body>