feat: mermaid support for markdown

client/components/editor/editor-markdown.vue

@@ -222,6 +222,9 @@ import twemoji from 'twemoji'
 // Prism (Syntax Highlighting)
 import Prism from 'prismjs'
 
+// Mermaid
+import mermaid from 'mermaid'
+
 // Helpers
 import katexHelper from './common/katex'
 
@@ -331,6 +334,8 @@ md.renderer.rules.emoji = (token, idx) => {
 // Vue Component
 // ========================================
 
+let mermaidId = 0
+
 export default {
   components: {
     markdownHelp
@@ -367,6 +372,7 @@ export default {
     previewShown (newValue, oldValue) {
       if (newValue && !oldValue) {
         this.$nextTick(() => {
+          this.renderMermaidDiagrams()
           Prism.highlightAllUnder(this.$refs.editorPreview)
           Array.from(this.$refs.editorPreview.querySelectorAll('pre.line-numbers')).forEach(pre => pre.classList.add('prismjs'))
         })
@@ -387,6 +393,7 @@ export default {
       this.$store.set('editor/content', newContent)
       this.previewHTML = md.render(newContent)
       this.$nextTick(() => {
+        this.renderMermaidDiagrams()
         Prism.highlightAllUnder(this.$refs.editorPreview)
         Array.from(this.$refs.editorPreview.querySelectorAll('pre.line-numbers')).forEach(pre => pre.classList.add('prismjs'))
         this.scrollSync(this.cm)
@@ -528,6 +535,15 @@ export default {
       this.$nextTick(() => {
         this.cm.refresh()
       })
+    },
+    renderMermaidDiagrams () {
+      document.querySelectorAll('.editor-markdown-preview pre.line-numbers > code.language-mermaid').forEach(elm => {
+        mermaidId++
+        const mermaidDef = elm.innerText
+        const mmElm = document.createElement('div')
+        mmElm.innerHTML = `<div id="mermaid-id-${mermaidId}">${mermaid.render(`mermaid-id-${mermaidId}`, mermaidDef)}</div>`
+        elm.parentElement.replaceWith(mmElm)
+      })
     }
   },
   mounted() {
@@ -537,6 +553,12 @@ export default {
       this.$store.set('editor/content', '# Header\nYour content here')
     }
 
+    // Initialize Mermaid API
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: this.$vuetify.theme.dark ? `dark` : `default`
+    })
+
     // Initialize CodeMirror
 
     this.cm = CodeMirror.fromTextArea(this.$refs.cm, {

client/themes/default/components/page.vue

@@ -249,6 +249,7 @@
 <script>
 import { StatusIndicator } from 'vue-status-indicator'
 import Prism from 'prismjs'
+import mermaid from 'mermaid'
 import { get } from 'vuex-pathify'
 import _ from 'lodash'
 import ClipboardJS from 'clipboard'
@@ -432,6 +433,12 @@ export default {
     // -> Highlight Code Blocks
     Prism.highlightAllUnder(this.$refs.container)
 
+    // -> Render Mermaid diagrams
+    mermaid.mermaidAPI.initialize({
+      startOnLoad: true,
+      theme: this.$vuetify.theme.dark ? `dark` : `default`
+    })
+
     // -> Handle anchor scrolling
     this.$nextTick(() => {
       if (window.location.hash && window.location.hash.length > 1) {

package.json

@@ -248,6 +248,7 @@
     "ignore-loader": "0.1.2",
     "jest": "25.1.0",
     "js-cookie": "2.2.1",
+    "mermaid": "8.4.8",
     "mini-css-extract-plugin": "0.9.0",
     "moment-duration-format": "2.3.2",
     "offline-plugin": "5.0.7",

server/modules/rendering/html-mermaid/renderer.js

@@ -1,5 +1,8 @@
 module.exports = {
   init($, config) {
-
+    $('pre.prismjs > code.language-mermaid').each((i, elm) => {
+      const mermaidContent = $(elm).html()
+      $(elm).parent().replaceWith(`<div class="mermaid">${mermaidContent}</div>`)
+    })
   }
 }