diff --git a/static/js/markdown_client.js b/static/js/markdown_client.js
index ff600e4..5d622d2 100644
--- a/static/js/markdown_client.js
+++ b/static/js/markdown_client.js
@@ -32,9 +32,15 @@ document.addEventListener('DOMContentLoaded', function() {
       }
     }
 
+    const renderMermaid = async () => {
+      await window.mermaid.run({
+          querySelector: '.language-mermaid',
+      });
+    };
 
     syntaxHighlight();
     renderMath();
+    renderMermaid();
     var previewWindow = document.getElementById('markdown-preview');
     var webSocketUrl = 'ws://' + window.location.host;
 
@@ -45,6 +51,7 @@ document.addEventListener('DOMContentLoaded', function() {
         document.getElementById('markdown-preview').innerHTML = event.data;
         syntaxHighlight();
         renderMath();
+        renderMermaid();
     }
 
     socket.onclose = function(event) {
diff --git a/templates/markdown_view.html b/templates/markdown_view.html
index 54ade4b..56d85bf 100644
--- a/templates/markdown_view.html
+++ b/templates/markdown_view.html
@@ -30,6 +30,11 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/contrib/auto-render.min.js"></script>
     <script src="/__/js/markdown_client.js"></script>
+    <script type="module">
+      import mermaid from "https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.1/mermaid.esm.mjs";
+      mermaid.initialize({startOnLoad: false});
+      window.mermaid = mermaid;
+    </script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css">
   </body>
 </html>