vue中如何使用mermaid

mermaid安装

我安装的是mermaid@9.4.0版本

npm install mermaid
#yarn add mermaid

完整案例

<template>
  <div>
    <h2>流程图设计</h2>
    <div class="mermaid" ref="mermaid"></div>
  </div>
</template>
<script>
import mermaid from "mermaid"; //引用mermaid
mermaid.mermaidAPI.initialize({startOnLoad: false,securityLevel: "loose"}); //初始化 Mermaid 库的设置和配置
//startOnLoad：是否在加载页面时自动渲染所有包含Mermaid代码的div元素。默认值为 false。如果设置为 true，则会在页面加载时自动调用 mermaid.init() 方法，从而自动渲染所有的Mermaid图表
//securityLevel：Mermaid库的安全级别，有三个选项可供选择：strict，loose 和 antiscript。默认值为 strict。该选项用于控制Mermaid代码的解析和执行安全性。在 loose 模式下，Mermaid会解析一些常见的HTML标签，并在渲染Mermaid图表时允许一些不安全的操作，比如在文本标签中使用HTML标签。在 strict 模式下，Mermaid不允许任何不安全的操作，可以提高安全性。在 antiscript 模式下，Mermaid不允许任何与脚本相关的操作，甚至不允许调用 window 对象。
mounted(){
let template = `flowchart LR;1:::finish-->2;2:::finish-->3;3:::finish-->4;4:::finish-->5:::current;4-->6:::current;4-->7:::error;
classDef finish fill:#FFFFFF,stroke:#67C23A,color:#67C23A
classDef current fill:#FFFFFF,stroke:#409EFF,color:#409EFF
classDef error fill:#FFFFFF,stroke:#F56C6C,color:#F56C6C`
    ]
    //将template数据以mermaid格式渲染出来
   this.handleMermaid(template)
}
methods:{
 handleMermaid(val) {
      const mermaidElement = this.$refs.mermaid;
      const insertSvg = (svgCode) => {
        mermaidElement.innerHTML = svgCode;
        const nodes = mermaidElement.querySelectorAll('.mermaid .node');
        //为节点添加点击事件
        nodes.forEach(node => {
            node.addEventListener('click',event => {
                this.handleNodeClick(event,node)
            })
        })
      };
      mermaid.mermaidAPI.render("mermaid", val, insertSvg);
    },
    // 点击流程节点触发的事件
    handleNodeClick(event,node){
        console.log('Node Clicked',node)
    },
}
</script>

关于mermaid节点点击问题说明

刚开始我尝试的是通过v-html的方式渲染mermaid数据,例如

<template>
  <div v-html="mermaidCode"></div>
</template>

<script>
import mermaid from "mermaid";
export default {
  created(){
    mermaid.initialize({
        startOnLoad: true,
        securityLevel:"loose"
    })
  },
  computed: {
    mermaidCode() {
      return `
        <div class="mermaid" id="mermaidChart">
          flowchart LR;
          A-->B;
          B-->C;
          C-->D;
          click A call callback(1)
        </div>
      `;
    }
  }
}
</script>

并在vue的index.html中定义了callback函数，此时点击A节点，是可以正常触发callback函数

function callback(val){
        console.log(val,'我们追随着日月与星辰，溪流与海洋，与云间的飞鸟同看花开花落，云卷云舒') 
      }

但是当我将mermaid类提前定义好，直接mermaid在mermaid标签中渲染数据，也就是最上面使用的方式，如果直接在template中写好click 1 call callback()，点击节点是无效的，查找得知是因为mermaid.mermaidAPI.render() 函数渲染Mermaid图表时，Mermaid库会生成一个包含SVG代码的字符串，并将其插入到指定的元素中。但是，在这个过程中，与SVG代码相关的所有事件处理程序都不会被绑定到元素上，导致在页面中无法响应 click 事件