Mermaid

❇️点此文章参考 Mermaid 官方文档

⭐什么是 Mermaid?

先别着急，我们通过一组图片展示 Mermaid 的魅力

第一次接触时我还在感叹，画图工具的精度也比不上 Mermaid

1. 流程图

2. 时序图

3. 甘特图

4. 类图

咱学 Java的不陌生吧🐱UML图

5. Git 图（实验功能）

依赖英文，暂时还不支持中文（或许是我没发现啊）

6. 实体关系图（实验功能）

依赖英文，暂时还不支持中文（或许是我没发现啊）

7. 个人旅行图

Mermaid无所不能，实时渲染让我们的操作更为方便

⭐基础语法-流程图 (graph/flowchart)

首先我们先来了解流程图基础语法和布局结构

TB - 从上到下
TD - 从上到下
BT - 从下到上
RL - 从右到左
LR - 从左到右

构建流程图的基础语法：

```mermaid
graph TD
	A[这是一个从上至下的流程图] --> B(现在咱就是演示一下)
```

明白了基础语法的构建，我们就可以开始选择形状了

1. 结点形状

1.1 圆角矩形结点

graph LR
    id1(这个是圆角矩形)

注意：这里的 graph 也可以替换为 flowchart，但是考虑到图形的兼容性，我更推荐使用 graph

1.2 跑道形结点

graph LR
    id1([这个也是特殊的圆角矩形])

1.3 子程序形结点

graph LR
    id1[[这个是子程序结点]]

1.4 圆柱形结点

graph LR
    id1[(数据库)]

1.5 圆形结点

graph LR
    id1((这个是圆形结点))

1.6 旗帜结点

graph LR
    id1>This is the text in the box]

1.7 菱形结点

graph LR
    id1{这个是菱形结点}

1.8 六边形结点

graph LR
    id1{{六边形结点}}

1.9 平行四边形和梯形

graph LR
	id1[/平行四边形右倾斜/]
	id2[\平行四边形左倾斜\]
	id3[/上底梯形\]
	id4[\下底梯形/]

2. 连接线

graph TD
	A --> B
	C --- D
	a --文本--- b
	c ---|也可以这样|d
	E-->|也可以这样|F
	H-.->I;
	e-.文本.->f
	J ==> K
	j ==文本==> k

graph TD
    A -- text --> B -- text2 --> C
    a --> b & c--> d
    e & f--> h & i
    也可以
    e --> h
    e --> i
    f --> h
    f --> i

由于 graph 不兼容此语法，故使用 flowchart

flowchart TD
	A --o B
	B --x C
	
	D o--o E
    E <--> F
    F x--x G

---

至此，我们就完成了最基础的 Mermaid 语法学习

让我们尝试画画程序框图吧

flowchart TD
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    C --> D[Rethink];
    D --> B;
    B -- No ----> E[End];

总结：

长度	1	2	3
默认（不带方向箭头）	---	----	-----
默认（带方向箭头）	-->	--->	---->
加粗无向实线	===	====	=====
加粗有向实线	==>	===>	====>
无向虚线	-.-	-..-	-...-
有向虚线	-.->	-..->	-...->

下一篇文章将会提到破坏 Mermaid语法强行显示转义字符、显示流程图的子图、在结点中嵌入链接、使用css语法修改结点样式