Mermaid使用技巧【快速上手】

# Mermaid
Mermaid是在MD中使用的，专门用来绘制流程图。
- 项目地址: https://github.com/mermaid-js/mermaid
- 在线编辑: https://mermaidjs.github.io/mermaid-live-editor/
- 官方文档: https://mermaid-js.github.io/mermaid/#/flowchart

## 流程图定义和节点名称
```
flowchart LR
	A[Start] --> B
```
> Note: 使用时，一定要将该部分内容包含到代码块中，如mrdoc中，我们使用 \`\`\`mermaid

效果图：
```mermaid
flowchart LR
	A[Start] --> B
```

## 流程图的方向
一般是从左到右，从上到下
> LEFT  RIGHT TOP  BOTTOM
```mindmap
# 布局方向
+ TD/TB(TOP TO BOTTOM) 从上到下
+ BT 从下到上
+ LR 从左到右
+ RL 从右到左
```
示例：
```
flowchart RL
	B([Start]) --> A{End}
```
效果图：
```mermaid
graph RL
	B([Start]) --> A{End}
```

## 节点形状
默认的节点形状是长方形，可以设置其他。
> 形状关键词

```mindmap
- 节点形状
    + [矩形]
        - [[暂不支持]]
        - [(圆柱)]
        - [{暂不支持}]
        - [/平行四边形/]
        - [\平行四边形\]
        - [/梯形\]
        - [\梯形/]
    + (圆角矩形)
        - ((圆形))
        - ([体育场])
        - ({暂不支持})
    + {菱形}
        - {{六边形}}
        - {[暂不支持]}
        - {(暂不支持)}
    + >不对称矩形]
```

```mermaid
graph LR
	A[节点形状] --- B["[矩形]"] --- B1["[[暂不支持]]"] & B2[("[(圆柱)]")] & B3["[{暂不支持}]"] & B4[/"[/平行四边形/]"/] & B5[\"[\平行四边形\]"\] & B6[/"[/梯形\]"\] & B7[\"[\梯形/]"/] 
	A --- C("(圆角矩形)") --- C1(("((圆形))")) & C2(["([体育场])"]) & C3("({暂不支持})")
	A --- D{"{菱形}"} --- D1{{"{{六边形}}"}} & D2{"{[暂不支持]}"} & D3{"{(暂不支持)}"} & D4>">不对称矩形]"]
```
> **核心**: 最外层代表主形状,内层辅助修饰.

示例：
```
graph LR
	A(圆形矩形) -.- B([椭圆形]) -..-> C((圆形))
	E[[subroutine]] === F>非对称形状] -....-> G{菱形} ---x H{{六角形}}
	AA[(圆柱形)]
```
效果图：
```mermaid
graph LR
	A(圆形矩形) -.- B([椭圆形]) -..-> C((圆形))
	E[[subroutine]] === F>非对称形状] -....-> G{菱形} ---x H{{六角形}}
	AA[(圆柱形)]
```

## 节点的连接线

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

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

**当需要在连接线上写文字时，可以先写好连接线类型，两个标识符，再写文字，再将连接线类型写完整，如 --你好哇-->,-.王二小.->**
示例：

```
graph LR
	A1 --设计--> B1 -->|文本2| C1 --> D1
	A2 ==加粗==> B1 ==> C2
	A3 --无箭头直线--- B2 ---|无箭头| C3 -.虚线箭头.-> D1
```

效果图：
```mermaid
graph LR
	A1 --设计--> B1 -->|文本2| C1 --> D1
	A2 ==加粗==> B1 ==> C2
	A3 --无箭头直线--- B2 ---|无箭头| C3 -.虚线箭头.-> D1
```

## 多节点链接
### 一对多
（常规版）示例：
```
graph LR
	A --> B
	A --> C
	
	B --> D
	C --> D
```
效果：
```mermaid
graph LR
	A --> B
	A --> C
	
	B --> D
	C --> D
```
（简化版）示例：

```
graph TD
	A --> B & C --> D
```
效果：
```mermaid
graph TD
	A --> B & C --> D
```

### 多对多
简化版示例：
```mermaid
graph LR
	A & B ====> C & D
```

## 其他类型箭头
| 类型 | 表示方法 |
| --- | --- |
| 箭头 | --> |
| 圆点 | --o |
| 黑x | --x |

示例：
```
flowchart LR
	A --> A
	B --o A
	D --x A
```

效果：
```mermaid
flowchart LR
	A --> A
	B --o A
	D --x A
```
> wNote: 箭头可以双向的

示例：
```
flowchart LR
	AA <--> AB
	B o===o AC
	D x-...-x A
```

效果：
```mermaid
flowchart LR
	AA <--> AB
	B o===o AC
	D x-...-x A
```

## 特殊字符
- 三种括号，单独使用需要转义，通过双引号括起来
- 引号表示，使用HTML中的引号标识符#quot;
- 美元符号，使用#36;
- 其他类似，使用标识符。

示例：
```
flowchart LR
	A["[Test]"] <--> B
```

效果：
```mermaid
flowchart LR
	A["[Test]"] <--> B
	C["来个引号#quot;"] --> D
	F["美元符号#36;"] --> G["(呵呵)"]
	笑脸["#128512;"]
```