当前位置: 首页 > 工具软件 > mermaid > 使用案例 >

vue中如何使用mermaid

谭文林
2023-12-01

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 事件

 类似资料: