diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue
index 6fa32288..20e52890 100644
--- a/client/components/editor/editor-markdown.vue
+++ b/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 = `${mermaid.render(`mermaid-id-${mermaidId}`, mermaidDef)}
`
+ 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, {
diff --git a/client/themes/default/components/page.vue b/client/themes/default/components/page.vue
index 0d6288ef..ea1f97b0 100644
--- a/client/themes/default/components/page.vue
+++ b/client/themes/default/components/page.vue
@@ -249,6 +249,7 @@