Add minimal mermaid support

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>

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",

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)
   })

public/vendor/mermaid.min.js

@@ -0,0 +1 @@
+../../node_modules/mermaid/dist/mermaid.min.js