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

作者：watermelo37

涉及领域：Vue、SpingBoot、Docker、LLM、python等

---------------------------------------------------------------------

温柔地对待温柔的人，包容的三观就是最大的温柔。

---------------------------------------------------------------------

如果您希望直接访问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 TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

2.5.2、子图的方向

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

flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> 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/]:::process
  A2[数据2]:::inputData --> B1

  B1 --> C1[数据3]:::outputData
  B1 --> C2[数据4]:::outputData
  B1 --> C3[数据5]:::outputData

  C1 --> D1[数据3]:::inputData
  C2 --> D2[数据4]:::inputData

  F1[数据6]:::inputData --> E1
  D1 --> E1[/过程2/]:::process
  D2 --> E1

  E1 --> G1[数据7]:::outputData
  E1 --> G2[数据8]:::outputData

  G1 --> H1[数据7]:::inputData
  H1 --> I1[/过程3/]:::process

  I1 --> J1[数据9]:::outputData
  I1 --> J2[数据10]:::outputData
  I1 --> J3[数据11]:::outputData
  I1 --> J4[数据12]:::outputData
  I1 --> 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>