diff --git a/index.html b/index.html
index 66310f1..949e4c9 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,16 @@
   <script src="/vendor/zepto.min.js"></script>
   <script src="/socket.io/socket.io.js"></script>
   <script src="/vendor/highlight.min.js"></script>
+  <script src="/vendor/mermaid.min.js"></script>
+  <script>
+    mermaid.mermaidAPI.initialize({
+      startOnLoad: false,
+      flowChart: {
+        useMaxWidth: false,
+        htmlLabels: true,
+      },
+    });
+  </script>
   <script src="/client.js"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
index ff247ee..9860e90 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "markdown-it-emoji": "^1.4.0",
     "markdown-it-github-headings": "^1.0.1",
     "markdown-it-task-checkbox": "^1.0.4",
+    "mermaid": "^8.0.0-rc.8",
     "minimist": "^1.1.0",
     "opn": "^5.1.0",
     "request": "^2.48.0",
diff --git a/public/client.js b/public/client.js
index 56b90b2..3215446 100644
--- a/public/client.js
+++ b/public/client.js
@@ -9,6 +9,9 @@ socket.on('content', function (data) {
   $('code').each(function (_, block) {
     $(this).parent().addClass($(this).attr('class'))
   })
+  $('code.language-mermaid').each(function (_, block) {
+    $(this).parent().html(mermaid.mermaidAPI.render('mermaid-' + _, block.innerText))
+  })
   $('pre').each(function (_, block) {
     hljs.highlightBlock(block)
   })
diff --git a/public/vendor/mermaid.min.js b/public/vendor/mermaid.min.js
new file mode 120000
index 0000000..883bbf8
--- /dev/null
+++ b/public/vendor/mermaid.min.js
@@ -0,0 +1 @@
+../../node_modules/mermaid/dist/mermaid.min.js
\ No newline at end of file