【Mermaid 语法详细教程 01】 流程图（Flowchart / graph）
说明
mermaid是一种解决文字图形转换的方案，用于在markdown标记语言中利用文本绘图，本文内容保证适合mermaid 8.8.3的内容，向上更新的内容不论。
本篇作为mermaid教程系列的第一篇，先介绍流程图（flowchart or graph）
流程图是mermaid最基础的应用内容，flowchart和graph在整体上类似，有区别的地方会单独提及。
文本框边缘形状 edges shape
流程图中，一个节点(nodes)的大概组成是
节点名称[节点展示文本]
节点展示文本的边缘形状取决于包括符号的类型，例子如下：
flowchart LR
在不做任何声明的情况下默认是矩形框
flowchart LR
A[矩形框] --> B(小圆角框) --> C{判断框} --> D([大圆角框]) --> E[[双线框]]--> F[(圆柱框)] --> G((圆框))
flowchart LR
H>标签框] --> I{{六角框}} -->J[/平行四边形框/] --> K[\平行四边形框\] --> L[/梯形框\] --> M[\倒梯形框/]
说明: LR为mermaid的图像朝向，关于图像朝向的内容可关注下面内容
注释 comments
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
箭头 arrow
flowchart的箭头连接相比graph在某些编辑器中要更加平滑一点，有些编辑器对graph的支持也较差（比如CSDN自己的，graph的箭头就无法分辨，只能用flowchart）
箭头类型
实线
实线的基本单元是— 和 --> 分别是不带箭头的和带箭头的，基本形式如下：
flowchart LR
A --- B
B --> C
在中间添加文本的方法
-- + 文本 + 基本单元基本单元 + |文本|
中间添加文本的方法
flowchart LR
A -- TEXT --- B
D -- TEXT --> E
B ---|TEXT|C
C -->|TEXT|D
虚线
基本单元： -.- -.->
flowchart LR
A -.- B
B -.-> C
添加文本的方法
flowchart LR
A -.TEXT.- B
粗线
基本单元：=== ==>
添加文本的方法（基本等同于实线）：
flowchart LR
A == TEXT ===B
B == TEXT ==>C
C ===|TEXT|D
D ==>|TEXT|E
其他线形
此部分内容仅有flowchart支持，graph不支持
flowchart LR
A --x B
B -- TEXT --x C
C --o D
D -- TEXT --o E
调整长度
可以通过调整破折号的数量调整长度
flowchart LR
A --> B
A ---> C
A ----> D
其他线形的长度调整方法如下
For dotted or thick links, the characters to add are equals signs or dots, as summed up in the following table:
| Length | 1 | 2 | 3 |
|---|---|---|---|
| Normal 实线 | --- |
---- |
----- |
| Normal with arrow 实线（带箭头） | --> |
---> |
----> |
| Thick 粗线 | === |
==== |
===== |
| Thick with arrow 粗线（带箭头） | ==> |
===> |
====> |
| Dotted 虚线 | -.- |
-..- |
-...- |
| Dotted with arrow 虚线（带箭头） | -.-> |
-..-> |
-...-> |
流程图方向 Flowchart Orientation
标志了流程图的朝向，可能的朝向代号如下(朝向代号严格区分大小写)
Possible FlowChart orientations are:
- TB - top to bottom（从上到下）
- TD - top-down/ same as top to bottom（从上到下）
- BT - bottom to top（从下到上）
- RL - right to left（从右到左）
- LR - left to right（从左到右）
举例RL（从左到右）
flowchart RL
A --> B
节点合并
几个节点可以通过与运算符&来合并指向，例如
flowchart LR
起床 --> 刷牙 & 看手机 --> 上厕所
以上也可以不使用与运算符来完成，例如：
flowchart LR
起床 --> 刷牙
起床 --> 看手机
刷牙 --> 上厕所
看手机 --> 上厕所
可以看出与运算符在这里的使用旨在简化
子图 subgraph
通过subgraph 和 end 来标记一块子图，举例如下
flowchart LR
水井 -- 水 --> 给人喝 & 饮料厂
subgraph 做饮料
其他原料 --> 饮料厂
饮料厂 --> 饮料
end
也可以将子表的名称和显示名称分开，另外，子表本身也可以作为一个单位被指向或者指向别的单位
flowchart LR
a --> b
a --> d
d --> subgraph1
subgraph1 --> subgraph2
subgraph subgraph2[two]
d --> f
end
subgraph subgraph1[one]
b --> c
end
子图的方向可以单独规定，此为后续版本更新，8.8.3不适用
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
理论应为如下形状
样式 styling
节点样式 styling for nodes
可以这样单独定义节点样式
flowchart LR
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
也可以预先定义节点样式
flowchart TD
A(样式1):::class_one --> B ==> c(也是样式1):::class_one
%% 样式单独定义
classDef class_one fill:#f96, stroke:111, stroke-width:3px
相关连接
其他教程链接：
【Mermaid 语法详细教程 02】时序图 SequenceDiagram_NoEatMe的博客-CSDN博客
主要参考资料：
About Mermaid | Mermaid