vue3使用mermaid插件

1.下载mermaid插件

2.使用

<template>
  <div>
    <h2>流程图设计</h2>
    <div class="mermaid" ref="mermaidref"></div>
  </div>
</template>

<script lang="ts" setup>
import mermaid from 'mermaid' //引用mermaid
mermaid.mermaidAPI.initialize({ startOnLoad: false, securityLevel: 'loose' }) //初始化 Mermaid 库的设置和配置

const template = ref(
  'flowchart TD\n    A[智能心电仪] --> B[可调式操作面]\n    A --> C[研发]\n    B --> D[用户界面]\n    B --> E[功能调整]\n    C --> F[技术开发]\n    C --> G[测试验证]\n    A --> |基于| B\n    A --> |进行| C'
)
//将template数据以mermaid格式渲染出来
onMounted(() => {
  handleMermaid()
})
const mermaidref = ref(null)
const handleMermaid = () => {
  const mermaidElement = mermaidref.value
  const insertSvg = (svgCode) => {
    mermaidElement.innerHTML = svgCode
    const nodes = mermaidElement.querySelectorAll('.mermaid .node')
    // 为节点添加点击事件
    nodes.forEach((node) => {
     node.addEventListener('click', (event) => {
      handleNodeClick(event, node)
      })
    })
  }
  mermaid.mermaidAPI.render('mermaid', template.value, insertSvg)
}
 // 点击流程节点触发的事件
 const   handleNodeClick=(event,node)=>{
        console.log('Node Clicked',node)
    },
</script>

3.生成样式