Mermaid markdown + vue预览

1.安装mermaid

yarn add mermaid

2.按需引入

import Mermaid from 'mermaid'

3.渲染

initMermaid() {
      let mermaidNodes = document.getElementsByClassName('mermaid')
      for (
        let i = 0, mermaidNodesLen = mermaidNodes.length;
        i < mermaidNodesLen;
        i++
      ) {
        this.initMermaidItem(mermaidNodes[i], mermaidNodes[i].textContent, i)
      }
    },
    initMermaidItem(node, html, i) {
      var insertSvg = function (svgCode, bindFunctions) {
        node.innerHTML = svgCode
      }
      var graph = Mermaid.mermaidAPI.render('mermaid' + i, html, insertSvg)
    },
    getMarkDown(res) {
        this.htmlUrl = res.data
        this.$nextTick(() => {
          this.initMermaid()
        })
    },