Mermaid 快速参考指南

2024-06-19经验1575 字

Mermaid是一门为绘制流程图设计的语言，只需输入简洁的代码，通过渲染就能生成流程图。相较于draw.io等绘图软件，在制作复杂流程图时更为高效，可以从各种错综复杂的节点和连线中解放出来。在实际的工作场景中，我发现Mermaid特别适合在熟悉工程作业上使用，在我接手他人工作，尤其大数据作业梳理数据流、表关系上下游时，用Mermaid做笔记可以更快掌握整个流程。

这篇文章对Mermaid主要语法进行归纳总结，这里只记录满足日常工作需要的流程图(即flowchart)的写法，没有包括其它像实体图等的写法，其它图类型写法可以参考Mermaid官方文档。

快速上手

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52


%% Part 0 - 注释
%% 注释的内容以 %% 开始


%% Part 1 - 声明图像
%% 最开始的声明方向可以是 TB/TD BT RL LR
flowchart LR


%% Part 2 - 节点的声明
%% 建议所有使用的节点进行单独声明，节点变量名和节点展示名分开
node1[节点1]
%% 只能双引号引用文本，单引号不可以
node2["节点2"] 
node3(圆角矩形)
node4((圆形))
%% 节点声明的样式，文字样本可以参考后面部分


%% Part 3 - 节点连接
%% 需要连打横杠
node1 --> node2

%% 支持连续声明节点连接
node10 --> node11 --> node12
%% 上面表达式 = node10 --> node11  +  node11 --> node12

%% 使用 `&` 多个节点并列
node21 & node22 --> node23
node31 --> node32 --> node33 & node34

%% 甚至可以“笛卡尔积”式的进行连接
node41 & node42 --> node43 & node44

%% 连接线上加入问字, 以下三个都一致
node51 --some infomation--> node52
node53 -- some infomation --> node54
node55 --"some infomation"--> node56


%% Part 4 - 子图
%% subgraph
subgraph sg1[显示文字第1子图]
    node101 --> node102
end

subgraph sg2[显示文字第2子图]
    node201 --> node202
end

%% subgraph也可以作为一个整体连接
sg1 --> sg2

快速上手1

快速上手2

快速上手3

更多设置项

节点图案与显示文字格式

node 节点支持多种显示样式，包括形状、显示文字样式、颜色等，这里只列举前两者的设置，颜色的修改留在 style 部分

常用节点样式写法如下：

1
2
3
4
5
6
7


flowchart LR

node_0[矩形] ~~~ node_1(圆角矩形) ~~~ node_2([环形边矩形])

node_3((圆形)) ~~~ node_4{菱形} ~~~ node_5{{多边形}}

node_6[/平行四边形/] ~~~ node_7[\平行四边形\] ~~~ node_8[/梯形\] ~~~ node_9[\倒梯形/]

Mermaid常用节点样式

节点内显示文字，支持通过markdown语法进行显示样式修改，一个简单的样例如下

1

node["`**加粗字体**`"]

节点内文字支持markdown语法

连线样式

两个node之间连线的样式也同样支持修改，包括连线粗细，实线虚线，箭头样式等。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


flowchart LR

node1[A] --> node2[B]
node3[A] -- 实线连接 --> node4[B]

node5[A] -.-> node6[B]
node7[A] -. 虚线连接 .-> node8[B]

node9[A] ==> node10[B]
node11[A] == 加粗线连接 ==> node12[B]

Mermaid常用连线样式

另外，连线的长短也可以进行设置，以调整节点具体分布，详情可以参考https://mermaid.js.org/syntax/flowchart.html#minimum-length-of-a-link

子图

子图的连接方向也是支持设置的，具体设置方法如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


flowchart LR
    subgraph subgraph1
        direction TB
        top1[top] --> bottom1[bottom]
    end
    subgraph subgraph2
        direction TB
        top2[top] --> bottom2[bottom]
    end

    subgraph1 --> subgraph2

子图方向的设置

在subgraph里层声明direction命令即可。

另外需要注意的是，如果有外部node连接到子图内部的node，direction的设置不会生效，会继承外部node的direction设置，例如将下图对比上图：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


flowchart LR
    subgraph subgraph1
        direction TB
        top1[top] --> bottom1[bottom]
    end
    subgraph subgraph2
        direction TB
        top2[top] --> bottom2[bottom]
    end
    subgraph1 --> subgraph2
    outside --> top1

子图的方向会因为外部节点的连接导致改变

style

Mermaid 还支持自定义css样式：具体设置如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


flowchart LR
    %% 利用 style 命令来指定样式
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

    %% 利用 class 来指定样式
    A:::orangeClass --> B
    classDef orangeClass fill:#f96;
    classDef bigFontClass1,bigFontClass2 font-size:24pt;
    class B bigFontClass1;

Mermaid style样式声明

经过测试，声明的样式应该放置于节点图生成的命令后，否则可能样式不会生效。

效率