高效工作流：用Mermaid绘制你的专属流程图；如何在Vue3中导入mermaid绘制流程图

高效工作流：用Mermaid绘制你的专属流程图

一、流程图的使用场景

1.1、流程图flowChart

1.2、使用场景

二、如何使用mermaid画出优雅的流程图

2.1、流程图添加图名

2.2、定义图类型与方向

2.3、节点形状定义

2.3.1、规定语法

2.3.2、不同节点案例

2.4、节点连线

2.5、子图与多流程图互操作

2.5.1、多流程图且相互影响

2.5.2、子图的方向

2.6、定义节点类

三、Vue3中如何导入mermaid

3.1、下载并安装mermaid组件

3.2、导入并初始化mermaid流程图

四、mermaid绘制流程图的优缺点

五、总结

如果您希望直接访问Vue3导入mermaid的代码，可以直接访问：三、Vue3中如何引入mermaid

高效工作流：用Mermaid绘制你的专属流程图

一、流程图的使用场景

1.1、流程图flowChart

流程图是对某一个问题的定义、分析或解法的图形表示，图中用各种符号来表示操作、数据、流向以及装置等。使用图形表示算法的思路是一种极好的方法，因为千言万语不如一张图。通常用于计算机科学、业务流程设计、工程等领域。

电灯修理思路流程图

1.2、使用场景

流程图使用场景非常广泛，如软件开发、项目管理、工作流程、科学研究、制造和生产等。

二、如何使用mermaid画出优雅的流程图

2.1、流程图添加图名

在最上方添加如下内容：

---
title: Your flow chart title
---

例：

---
title: test model
---
flowchart LR
A[input] --> B[peocess]
B --> C[output1]
B --> D[output2]

2.2、定义图类型与方向

flowchart代表定义为流程图，流程图的方向定义在flowchart旁边，支持四种方向，分别是top、bottom、left和right的缩写，比如LR就是从左到右。还有TB（TD：top to down）、BT（DT不行）、LR、RL。

例：

---
title: test model
---
flowchart TB
%% flowchart BT
%% flowchart LR
%% flowchart RL
A[input] --> B[peocess]
B --> C[output1]
B --> D[output2]

2.3、节点形状定义

2.3.1、规定语法

mermaid中定义节点形状用的是不同类型的括号，每一种括号都对应着一种节点形状。这个特性让mermaid成为目前最简单易用的流程图之一，也同样限制了mermaid的灵活度和上限。

圆角矩形节点：(节点名)
两端是半圆的矩形节点：([节点名])
矩形套矩形（子程序形状）节点：[[节点名]]
圆柱形（数据库形状）节点：[(节点名)]
圆形节点：((节点名))
旗帜形节点：>节点名]
菱形节点：{节点名}
六边形节点：{{节点名}}
平行四边形：[/节点名/]
反向平行四边形：[\节点名\]
梯形：[/节点名\]
倒梯形：[\节点名/]
双环圆：(((节点名)))

2.3.2、不同节点案例

---
title: test model
---
flowchart TB
A(节点名1)
B([节点名2])
C[[节点名3]]
D[(节点名4)]
E((节点名5))
F>节点名6]
A --> H{节点名7}
B -->I{{节点名8}}
C -->J[/节点名9/]
D -->K[\节点名10\]
E -->L[/节点名11\]
F -->M[\节点名12/]
F -->N(((节点名13)))

2.4、节点连线

mermaid中定义节点连线用的是预定义的符号组合，每一种都对应着一种连线形状。这个特性让mermaid成为目前最简单易用的流程图之一，也同样限制了mermaid的灵活度和上限。

需要注意的是，mermaid所使用的连接线是贝塞尔曲线，你可以修改连线的样式、首段、末端，但是却不能直接改变线的走向，哪怕只是从曲线变成折线。

带箭头的连线：A-->B
不带箭头连线：A --- B
带文本的连线：A--文本内容---B/A---|文本内容|B（如果要箭头就将最后一个-变成>，两种表示方法一样）
虚线：A-.->B
虚线带文本：A-. 文本内容 .-> B
粗线：A ==> B
粗线带文本：A == 文本内容 ==> B
隐藏连线（可以用来控制节点位置）：A ~~~ B
其他箭头：A --o B（末端为圆形）、A --x B（末端为星形）
双箭头：A<-->B、A o--o B、A x--x B

2.5、子图与多流程图互操作

2.5.1、多流程图且相互影响

在父图中定义子图之间的联系，通过subgraph定义子图及子图中的内容。

flowchart TBc1-->a2subgraph onea1-->a2endsubgraph twob1-->b2endsubgraph threec1-->c2end

2.5.2、子图的方向

在子图中，通过direction定义方向，其他的不变。

flowchart LRsubgraph TOPdirection TBsubgraph B1direction RLi1 -->f1endsubgraph B2direction BTi2 -->f2endendA --> TOP --> BB1 --> B2

2.6、定义节点类

这是三种节点的类定义：

classDef inputData fill:#fff8f8,stroke:#000,stroke-width:2px;

classDef outputData fill:#b9e6d3,stroke:#000,stroke-width:2px;

classDef process fill:#07689f,stroke:#000,stroke-width:2px;

classDef用来声明，第二个是类名，fill是设置填充的颜色，stroke是边框颜色，stroke-width是边框宽度。使用的话用三个连续的英文冒号即可，如：A[1]:::inputData --> B[2]:::process

graph TD
%% 定义节点样式classDef inputData fill:#fff8f8,stroke:#000,stroke-width:2px;classDef outputData fill:#b9e6d3,stroke:#000,stroke-width:2px;classDef process fill:#07689f,stroke:#000,stroke-width:2px,color:#fff;%% 节点定义A1[数据1]:::inputData --> B1[/过程1/]:::processA2[数据2]:::inputData --> B1B1 --> C1[数据3]:::outputDataB1 --> C2[数据4]:::outputDataB1 --> C3[数据5]:::outputDataC1 --> D1[数据3]:::inputDataC2 --> D2[数据4]:::inputDataF1[数据6]:::inputData --> E1D1 --> E1[/过程2/]:::processD2 --> E1E1 --> G1[数据7]:::outputDataE1 --> G2[数据8]:::outputDataG1 --> H1[数据7]:::inputDataH1 --> I1[/过程3/]:::processI1 --> J1[数据9]:::outputDataI1 --> J2[数据10]:::outputDataI1 --> J3[数据11]:::outputDataI1 --> J4[数据12]:::outputDataI1 --> J5[数据13]:::outputData

效果如下：

三、Vue3中如何导入mermaid

3.1、下载并安装mermaid组件

npm install mermaid

3.2、导入并初始化mermaid流程图

<template><div class="container"><pre class="mermaid">{{ mermaidCode }}</pre></div>
</template><script setup>
import mermaid from "mermaid"; //引用mermaid
import { onMounted, ref } from "vue";const mermaidCode = ref(`
graph TD;A-->B;A-->C;B-->D;C-->D;
`);onMounted(() => {mermaid.initialize({ startOnLoad: true });mermaid.init();
});
</script>