增加 mermaid 图形支持

README.md

@@ -56,6 +56,7 @@
 + 嵌入 Plantuml 图形：需要安装 Java，graphviz ，示例见 FEATURE.md
 + 嵌入 drawio 图形：文档支持内嵌 drawio 图形，示例见 FEATURE.md
 + 嵌入 ECharts 图形：在文档中嵌入 Echarts 图形，示例见 FEATURE.md
++ 嵌入 Mermaid 图形：在文档中嵌入 Mermaid 图形，示例见 FEATURE.md
 + 元素属性书写：可自定义元素的任意属性，示例见 FEATURE.md
 + 表格解析增强：表格支持表格标题多行文本，列表等特性，示例见 FEATURE.md
 

frontend/package.json

@@ -21,6 +21,7 @@
     "markdown-it-katex": "^2.0.3",
     "markdown-it-multimd-table": "^3.1.3",
     "markdown-it-task-lists": "^2.1.1",
+    "mermaid": "^8.2.6",
     "mime-types": "^2.1.24",
     "monaco-editor": "^0.17.1",
     "normalize.css": "^8.0.1",

frontend/src/components/Preview.vue

@@ -57,6 +57,7 @@ import SourceLinePlugin from '../plugins/SourceLinePlugin'
 import LinkTargetPlugin from '../plugins/LinkTargetPlugin'
 import DrawioPlugin from '../plugins/DrawioPlugin'
 import PlantumlPlugin from '../plugins/PlantumlPlugin'
+import MermaidPlugin from '../plugins/MermaidPlugin'
 import file from '@/lib/file'
 import env from '@/lib/env'
 
@@ -91,6 +92,7 @@ const markdown = Markdown({
   .use(MultimdTable, { enableMultilineRows: true })
   .use(MarkdownItToc)
   .use(MarkdownItECharts)
+  .use(MermaidPlugin)
 
 export default {
   name: 'xview',
@@ -120,12 +122,13 @@ export default {
         ? this.currentContent
         : '```' + file.extname(this.fileName || '').replace(/^\./, '') + '\n' + this.currentContent + '```'
       this.$refs.view.innerHTML = markdown.render(this.replaceRelativeLink(content))
-      MarkdownItECharts.update()
       this.runAppletScriptDebounce()
       this.initDrawio()
       this.updateOutline()
       this.updateTodoCount()
       this.updatePlantumlDebounce()
+      MarkdownItECharts.update()
+      MermaidPlugin.update()
 
       for (let ele of document.querySelectorAll('code[class^="language-"]')) {
         HighlightLineNumber.lineNumbersBlock(ele)
@@ -419,6 +422,7 @@ export default {
     background: #303133;
   }
 
+  .markdown-body /deep/ div.mermaid,
   .markdown-body /deep/ div.drawio-wrapper,
   .markdown-body /deep/ input,
   .markdown-body /deep/ img
@@ -427,6 +431,7 @@ export default {
     filter: brightness(70%);
   }
 
+  .markdown-body /deep/ div.mermaid:hover,
   .markdown-body /deep/ div.drawio-wrapper:hover,
   .markdown-body /deep/ img:hover
   {
@@ -686,4 +691,8 @@ button:hover {
 .view .hljs-ln td.hljs-ln-code {
   padding-left: 10px;
 }
+
+.view .mermaid {
+  background: #fff;
+}
 </style>

frontend/src/plugins/MermaidPlugin.js

@@ -0,0 +1,56 @@
+import mermaid from 'mermaid'
+
+const mermaidChart = (code) => {
+  try {
+    mermaid.parse(code)
+    return `<div class="mermaid">${code}</div>`
+  } catch ({ str, hash }) {
+    return `<pre>${str}</pre>`
+  }
+}
+
+const MermaidPlugin = (md) => {
+  md.mermaid = mermaid
+  mermaid.loadPreferences = (preferenceStore) => {
+    let mermaidTheme = preferenceStore.get('mermaid-theme')
+    if (mermaidTheme === undefined) {
+      mermaidTheme = 'default'
+    }
+    let ganttAxisFormat = preferenceStore.get('gantt-axis-format')
+    if (ganttAxisFormat === undefined) {
+      ganttAxisFormat = '%Y-%m-%d'
+    }
+    mermaid.initialize({
+      theme: mermaidTheme,
+      gantt: { axisFormatter: [
+        [ganttAxisFormat, (d) => {
+          return d.getDay() === 1
+        }]
+      ] }
+    })
+    return {
+      'mermaid-theme': mermaidTheme,
+      'gantt-axis-format': ganttAxisFormat
+    }
+  }
+
+  const temp = md.renderer.rules.fence.bind(md.renderer.rules)
+  md.renderer.rules.fence = (tokens, idx, options, env, slf) => {
+    const token = tokens[idx]
+    const code = token.content.trim()
+    if (token.info === 'mermaid') {
+      return mermaidChart(code)
+    }
+    const firstLine = code.split(/\n/)[0].trim()
+    if (firstLine === 'gantt' || firstLine === 'sequenceDiagram' || firstLine.match(/^graph (?:TB|BT|RL|LR|TD);?$/)) {
+      return mermaidChart(code)
+    }
+    return temp(tokens, idx, options, env, slf)
+  }
+}
+
+MermaidPlugin.update = () => {
+  mermaid.init()
+}
+
+export default MermaidPlugin

help/FEATURES.md

@@ -32,6 +32,21 @@ Yank-Note 很多功能可以直接使用的快捷键操作
 2. 加密和解密过程均在前端完成
 3. 请务必保管好文档密码，密码一旦丢失就只能自己暴力破解了。
 
+## Mermaid 图形解析
+```mermaid
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```
+
 ## Plantuml 图形解析
 系统需要有 Java 环境，并安装有 graphviz
 示例如下