在Markdown中使用Mermaid来绘制流程图

1.流程图定义与节点名称

定义代码：

flowchart LR
    A[Start] --> B

注意：在使用的时候一定要将该部分的内容包含到代码块中

演示效果：

Start

Go

---

2.流程图的方向

所以一般是从左到右，从上到下

TOP BOTTOM LEFT RIGHT

分为4种

• TD /TB (TOP TO BOTTOM)
• BT
• LR
• RL

演示TB，代码如下：

flowchart TB
    A --> B

效果如下：

A

B

其他方向的流程图类同

---

3.节点形状

默认的节点形状是长方形，也可以设置为其他形状

演示代码：

flowchart LR

    A(圆角矩形) -.-B([椭圆形]) -.- C((圆形))
    
    E[[subroutine]] -.- F>非对称形状] -.- G{菱形} -.- H{{六角形}}
    
    I[/平行四边形/] -.- J[\平行四边形\] -.- K[\上梯形/] -.- L[/下梯形\]

演示效果：

圆角矩形

椭圆形

圆形

subroutine

非对称形状

菱形

六角形

平行四边形

平行四边形

上梯形

下梯形

---

4.节点连接线

连接线类型	表示符号	加长表示
箭头	–>	—>
直线	—	----
虚线	-.-	-…-
加粗箭头	==>	===>
加粗直线	===	===
虚线箭头	-.->	-…->

注意： 节点连接线的标识符最起码是三个以上，1个解析不出来的，2个解析器认为是文字，3个-表示的是箭头直线，当-的个数越多，连接线的长度就会越长！

当要在箭头上写文字的时候，可以先要连接线类型写好，两个标识符，再写你想要的文字，再将连接线的类型写完整，如同--你好哇-->,-.王摇摆.->

演示代码：

flowchart LR
A1 --箭头和文本-->  B1 -->|箭头和文本| C1 --> D1

A2 ==加粗直线箭头==> B2 ==> C2

A3 --无箭头直线--- B3 ---|无箭头直线| C3 ==无箭头的粗直线=== D3 

A4 -.虚线.-B4 -.- C4 --> D4 

演示效果：

箭头和文本

箭头和文本

加粗直线箭头

无箭头直线

无箭头直线

无箭头的粗直线

虚线

虚线箭头

A1

B1

C1

D1

A2

B2

C2

A3

B3

C3

D3

A4

B4

C4

D4

---

5.多节点连接

5.1 一对多

演示代码：(常规版本)

flowchart LR
    A --> B
    A --> C
    
    B --> D
    C --> D

演示代码：(简化版本)

flowchart LR
    A --> B & C --> D

演示效果：

A

B

C

D

5.2 多对多

演示代码：(简化版本)

flowchart TD
    A & B ==> C & D 

演示效果：

A

B

C

D

基于以上知识基本上流程图就完全可以用代码来实现了

一个简单的实例：

假的

是

开始

是真的吗?

结束

C

再考虑一下

代码：

flowchart TD

    A[开始] --> B[是真的吗?]
    B --假的--> E[结束]
    B --是--> C 
    C --> D[再考虑一下]
    D --> B

---

6.其他类型的箭头

类型	表示方法
箭头	–>
黑圆	–o
黑×	–x

演示代码：

flowchart LR
    A --> B
    
    B --x C
    
    C --o D

演示效果：

A

B

C

D

注意，箭头是可以双向的，不过要注意，箭头还是3个标识符起步，少了是不行的

效果如下：

A

B

C

D

A1

B1

---

7.特殊字符

7.1 如何表示三种括号？

因为在mermaid中大小中三种括号用于表示流程图的形状了
要单独使用他们的话，要进行转义使用
使用方法：正常编写，然后使用双引号""括起来即可

演示代码：

flowchart LR
    A["[Test]"] --> B

演示效果：

[Test]

B

7.2 如何表示引号？

使用HTML中的引号标识符即可#quot;

演示代码：

flowchart LR
    A["来个引号#quot;"] --> B

演示效果：

flowchart LR
    A["来个引号#quot;"] --> B

7.3 表示美元符号

演示代码：

flowchart LR
    A["美元符号#36;"] --> B

演示效果：

美元符号$

B

---

ENDING

演示代码：

flowchart LR
    A["#128512;"] 

演示效果：

---

在学会了Markdown之后再使用mermaid，简直是起飞，把画图的过程可以当做写代码一样，很舒服，这种感觉很好，继续学习吧。
2022年07月07日10:25:02