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

一、Mermaid的安装

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

npm install mermaid

        完事之后这样引用

import mermaid from 'mermaid'

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

二、承载Mermaid的容器

        Mermaid不同于其他的流程图组件，这玩意用<pre>标签来承载数据，所以我们在vue文件中这样创建

<template>
    <div>
        <pre class='mermaid'>{{message}}</pre>
    </div>
</template>

*类名不能错，类名是用于Mermaid使用querySelectAll选择<pre>用的

三、创建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

<template>
    <div>
        <pre class='mermaid' v-if="now_state==1">{{message}}</pre>
        <pre class='mermaid' v-if="now_state==2">{{message}}</pre>
    </div>
</template>

         然后加入动态生成方法

const add_data=async(newMessage)=>{
    mermaid_data.message.push(newMessage);
    now_state.value=2
    message=create_mermaid_data()
    await nextTick()
    mermaid.init()
}

        这样你就可以动态创建message了。