在vue3中使用Mermaid创建可动态生成的时序图

有手就行的：用Mermaid创建自己的时序图

一、Mermaid的安装

        在vue3中使用Mermaid时，需要npm一下

npm install mermaid

        完事之后这样引用

import mermaid from 'mermaid'

        引用之后就可以开始整活了

二、承载Mermaid的容器

        Mermaid不同于其他的流程图组件，这玩意用

标签来承载数据，所以我们在vue文件中这样创建
 
  
 
  
*类名不能错，类名是用于Mermaid使用querySelectAll选择
用的
 
  
三、创建Mermaid所用到的变量
 
  
        Mermaid其实只需要一个字符串就可以生成SVG图片，但是我们为了后期的动态生成时序图的箭头，所以我们创建一个响应式对象，persona是时序图中不同的角色，message是角色间的对话。
 
  
const mermaid_data=reactive({
    persona:['Alice','John'],
    message:[]
})
const message=ref('')
 
  
        这里拿官网case做示意图
 
  
 
  
四、onMounted钩子函数中初始化Mermaid
 
  
        在初始化之前，需要定义一个生成数据的方法
 
  
function create_mermaid_data(){
    let mermaid_message='sequenceDiagram\n'
    mermaid_data.persona.map((p)=>{mermaid_message+='participant ${p}\n}')
    mermaid_data.message.map((m)=>{mermaid_message+='${m}\n}')
    return mermaid_message
}
 
  
 *注意：Mermaid需要的字符串除了空格之外都有对应的含义，所以格式一定不能错（重中之重）
 
  
onMounted(() => {
    mermaid.initialize({ startOnLoad: false});
    message.value=create_mermaid_data()
    nextTick(()=>{
      mermaid.init();
    })
});
 
  
mermaid.initialize({startOnLoad: false}) 将阻止 mermaid.run 在加载后被自动调用。
 
  
*注意：mermaid.init();马上就要被弃用了，后续将改为使用mermaid.run()
 
  
五、实现动态生成时序图
 
  
        本以为直接向mermaid_data中的message里push数据就好了，没想到push数据之后时序图不见了，变成了pre标签，经过查阅资料得知，mermaid渲染的dom的class名需要唯一。。。
 
  
        所以解决思路就是给pre标签加上v-if条件渲染，每次渲染新的pre来生成SVG
 
  
        先创建变量
 
  
const now_state=ref(1)
 
  
         然后在pre标签中使用v-if
 
  
 
  
         然后加入动态生成方法
 
  
const add_data=async(newMessage)=>{
    mermaid_data.message.push(newMessage);
    now_state.value=2
    message=create_mermaid_data()
    await nextTick()
    mermaid.init()
}
 
  
        这样你就可以动态创建message了。