Mermaid 流程图

#主笔记

{
  "maxDepth": 3,
  "minDepth": 1,
  "redirect": true,
  "ordered": true,
  "title": "Table of Contents",
  "style": {
    "width": "100%",
    "maxHeight": "500px",
    "backgroundColor": "var(--background-secondary)",
    "borderRadius": "8px",
    "padding": "12px 16px",
    "border": "1px solid var(--background-modifier-border)",
    "fontSize": "0.9em"
  },
  "layout": {
    "type": "default",
    "columnMinWidth": "250px",
    "columnGap": "2em",
    "columnRule": "1px solid var(--background-modifier-border)",
    "breakpoint": "600px"
  }
}

关键字和方向

关键字和方向，是最基本的。你得告诉 Mermaid，你要画的是个什么图，图的走向是什么？
- 使用关键字，声明图的类型
- 使用方向，声明图的方向(走向)

关键字

关键字有两种

graph
flowchart
- flowchart支持一些额外的效果，两者渲染后的样式，存在些微差异

Tip

注意关键字的所有字母，必须全部小写！任何一个字母大写都会导致报错！

方向

方向有四种 (五种写法)：

TB
- top to bottom 自上而下
TD
- top-down 自上而下
BT
- bottom to top 自下而上
LR
- left to right 从左往右
RL
- right to left 从右往左

Tip

注意方向的字母必须全部大写！否则会报错！

语法和示例

语法：

关键字与方向写在首行
先写关键字，用一个空格隔开，再写方向
书写后续代码时，推荐用一个制表符 tab 缩进后书写
- 只是推荐，不缩进也不会报错
语句的结束方式:
- 在结尾加分号 ;
- 换行
- 也可以两个都用，换行 + 分号
  示范：

```mermaid
graph TD
	开始-->结束
		自上而下
```

flowchart LR
	开始-->结束
		%%从左往右%%



```mermaid
flowchart LR
	开始-->结束
		%%从左往右%%
```

````
```mermaid
graph LR
	a-->b; c-->d
```
````

```mermaid
graph LR
	a-->b; c-->d
```

## 流程图组成
- 流程图的组成包含**两**个主部分
	- **节点 + 连线**
- 主部分又各自包括 **3+5** 个子部分
	1. 节点
	    1. 容器 (名)
	    2. 节点形状
	    3. 节点文本
	2. 连线
	    1. 线条
	    2. 箭头
	    3. 连线文本
	    4. 连线形式
	    5. 线条长度

```mermaid
graph TD
	Mermaid-->节点;
	节点-->id1["容器(名)"]; 
 AB之间，以一条实线连接
```
````

```mermaid
graph LR
	A---B; 
 AB之间，以一条虚线连接
```
````

```mermaid
graph LR
	A-.-B; 
 AB之间，以一条粗实线连接
```
````

```mermaid
graph LR
	A===B; 
 AB之间，以一条箭头实线连接
```
````

```mermaid
graph LR
	A-->B; 
 AB之间，以一条箭头虚线连接
```
````

```mermaid
graph LR
	A-.->B; 
 AB之间，以一条箭头粗实线连接
```
````

```mermaid
graph LR
	A==>B; 
 这是一条从B到A的反向实线箭头
```
````

```mermaid
graph RL
	B-->A; 
 使用flowchart关键字
	A --o B;  
	%% 实线o
	C --x D;  
	%% 实线x
	E -.-o F; 
	%% 虚线o
	G -.-x H; 
	%% 虚线x
	I ==o J;  
	%% 粗实线o
	K ==x L;  
	%% 粗实线x
```
````

```mermaid
flowchart LR 
%% 使用flowchart关键字
	A --o B;  
	%% 实线o
	C --x D;  
	%% 实线x
	E -.-o F; 
	%% 虚线o
	G -.-x H; 
	%% 虚线x
	I ==o J;  
	%% 粗实线o
	K ==x L;  
	 实线
	A o--o B; 
	%% 多向实线o
	C <--> D; 
	%% 多向实线箭头
	E x--x F; 
	%% 多向实线x

	%% 虚线
	G o-.-o H; 
	%% 多向虚线o
	I <-.-> J; 
	%% 多向虚线箭头
	K x-.-x L; 
	%% 多向虚线x

	%% 粗实线
	M o==o N; 
	%% 多向粗实线o
	O <==> P; 
	%% 多向粗实线箭头
	R x==x S; 
	 实线
	A o--o B; 
	%% 多向实线o
	C <--> D; 
	%% 多向实线箭头
	E x--x F; 
	%% 多向实线x

	%% 虚线
	G o-.-o H; 
	%% 多向虚线o
	I <-.-> J; 
	%% 多向虚线箭头
	K x-.-x L; 
	%% 多向虚线x

	%% 粗实线
	M o==o N; 
	%% 多向粗实线o
	O <==> P; 
	%% 多向粗实线箭头
	R x==x S; 
	 AB之间以实线连接，且有一段连线文本
```
````

```mermaid
graph LR
	A--实线间的文本-->B; 
	 AB之间以虚线连接，且有一段连线文本
```
````

```mermaid
graph LR
	A-.虚线间的文本.->B; 
	 AB之间以粗实线连接，且有一段连线文本
```
````

```mermaid
graph LR
	A==粗实线间的文本==>B; 
	 实线
	a1---a2----a3-----a4;
	%% 虚线
	b1-.-b2-..-b3-...-b4;
	%% 粗实线
	c1===c2====c3=====c4;
	%% 箭头实线
	d1-->d2--->d3---->d4;
	%% 箭头虚线 
	e1-.->e2-..->e3-...->e4;
	 实线
	a1---a2----a3-----a4;

	 粗实线
	c1===c2====c3=====c4;

	 箭头虚线 
	e1-.->e2-..->e3-...->e4;

	 实线
	a1 o--o a2 o---o a3 o----o a4; 
	 多向实线箭头
	c1 x--x c2 x---x c3 x----x c4; 
	 虚线
	d1 o-.-o d2 o-..-o d3 o-...-o d4; 
	 多向虚线箭头
	f1 x-.-x f2  x-..-x f3 x-...-x f4; 
	 粗实线
	g1 o==o g2 o===o g3 o====o g4; 
	 多向粗实线
	i1 x==x i2 x===x i3 x====x i4; 
	 这里的B覆盖了前面的A
```
````

```mermaid
graph LR
	id1[A];
	id1[B]; 
	 使用双引号包裹，都不会报错
	id1["苹果(apple)爱上了桃子"]; 
	id2("苹果[apple]爱上了桃子");
	id3("苹果{apple}爱上了桃子");
	id4["⻖"];
```
````

```mermaid
graph LR
	 记得外面加功能性双引号
```
````

```mermaid
graph LR
	id1["这里会显示&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8个空格"]; 
	 s=start  f=fork  n=normal  c=convergence  e=end

s1[开始节点1]-->f1[分支节点1];

s2[开始节点2]-->n1[普通节点1];
s2-->n2[普通节点2];

f1-->n3[普通节点3];
f1-->n4[普通节点4];

n2-->c_重点(("聚合节点(重点!)"));
 s=start  f=fork  n=normal  c=convergence  e=end

s1[开始节点1]-->f1[分支节点1];

s2[开始节点2]-->n1[普通节点1];
s2-->n2[普通节点2];

f1-->n3[普通节点3];
f1-->n4[普通节点4];

n2-->c_重点(("聚合节点(重点!)"));
 s=start  e=end  f= fork n=normal 
	
	s[朱百六]-.->|子|n1[朱四九]-.->|子|n2[朱五四]-.->|子|f1_帝((朱八八))
	
	%% 分支点 朱八八
	f1_帝-->|长子|f2[朱标]
	f1_帝-->|次子|n3[朱樉]
	f1_帝-->|三子|n4[朱棢]
	f1_帝-->|四子|n5_帝((朱棣))
	
	%% 分支点 朱标
	f2-->|长子|e1[朱雄英]
	f2-->|次子|e2_帝((朱允炆))
	
	 s=start  e=end  f= fork n=normal 
	
	s[朱百六]-.->|子|n1[朱四九]-.->|子|n2[朱五四]-.->|子|f1_帝((朱八八))
	
	%% 分支点 朱八八
	f1_帝-->|长子|f2[朱标]
	f1_帝-->|次子|n3[朱樉]
	f1_帝-->|三子|n4[朱棢]
	f1_帝-->|四子|n5_帝((朱棣))
	
	%% 分支点 朱标
	f2-->|长子|e1[朱雄英]
	f2-->|次子|e2_帝((朱允炆))
	
	 s=start  e=end  f=fork  n=normal
	
	s([开始])-->f1{{if条件}};

	%% 分支点1 
	f1--true-->n1[if语句块]-->e([结束]);
	f1--false-->f2{{else if条件}};

	%% 分支点2 
	f2--true-->n2[else if语句块]-->e;
	f2--false-->n3[else语句块]-->e;
```
````

```mermaid
graph TB
	%% s=start  e=end  f=fork  n=normal
	
	s([开始])-->f1{{if条件}};

	%% 分支点1 
	f1--true-->n1[if语句块]-->e([结束]);
	f1--false-->f2{{else if条件}};

	语法 中文+数字命名
    id3{a1}-->id2;
    end;
	
    subgraph subgraph2
	%% 英文+数字命名
    id4([b1])-->id5{{b2}};
    end;
	
    subgraph subgraph 3
	%% 有空格
    id1-->id6[c2];
    end;
```
````

```mermaid
flowchart TB
    id1(c1)-->id2((a2))
	
    subgraph 子图1
	%% 中文+数字命名
    id3{a1}-->id2;
    end;
	
    subgraph subgraph2
	%% 英文+数字命名
    id4([b1])-->id5{{b2}};
    end;
	
    subgraph subgraph 3
	 节点与节点的连接
	c1-->a2;
	
	%% 子图与子图的连接
    one-->two;
    three-->two;
	
	%% 子图与节点的连接
    two-->c2;
```
````

```mermaid
flowchart TB
    subgraph one
    a1-->a2;
    end;
	
    subgraph two
    b1-->b2;
    end;
	
    subgraph three
    c1-->c2;
    end;
	
	%% 节点与节点的连接
	c1-->a2;
	
	%% 子图与子图的连接
    one-->two;
    three-->two;
	
	 节点与节点的连接
	c1-->a2;
	
	%% 子图与子图的连接
    sub1-->sub2;
    sub3-->sub2;
	
	%% 子图与节点的连接
    sub2-->c2;
```
````

```mermaid
flowchart TB
    subgraph sub1[one 子图1]
    a1-->a2;
    end;
	
    subgraph sub2[two 子图2]
    b1-->b2;
    end;
	
    subgraph sub3[three 子图3]
    c1-->c2;
    end;
	
	%% 节点与节点的连接
	c1-->a2;
	
	%% 子图与子图的连接
    sub1-->sub2;
    sub3-->sub2;
	
	 声明子图
	direction TB  %% 子图方向
		subgraph 子图1
        direction RL %% 子图1方向
        i1-->f1
		end
		
    	subgraph 子图2
        direction BT %% 子图2方向
        i2-->f2
		end
	end
  
  %% 主图
  A-->子图-->B
  子图1-->子图2
```
````

```mermaid
flowchart LR
	subgraph 子图
	%% 声明子图
	direction TB  %% 子图方向
		subgraph 子图1
        direction RL %% 子图1方向
        i1-->f1
		end
		
    	subgraph 子图2
        direction BT %% 子图2方向
        i2-->f2
		end
	end
  
   s=start  n=normal  f=fork  c=convergence
	
	 上面增加了主图线条长度

	 子图1
	subgraph 规律字根
	f1-->n4[音托类]-->n5[大部分属于此类,偏旁或成字的读音键:]---n6{{"j钅 e⻖ s纟"}};
	f1-->n7[象形类]-->n8[少部分属于此类或无规律类,象形定键:]---n9{{"X㐅 E彐 O日"}};
	end
	
	 聚合点
	n6-->c([孰大优先取]);
	n9-->c
	n12-->c
	n15-->c
	n18-->c
	
	%% 折返点
	c-.->|无则取笔画|n1
```