博客园支持 mermaid
Mermaid 简介
Mermaid是一种基于Javascript的绘图工具，使用类似于Markdown的语法，使用户可以方便快捷地通过代码创建图表
平时写博客时可以使用Markdown编写，嵌入Mermaid能让阅读体验更佳
在 Markdown 中使用 Mermaid
```mermaid
绘图类型
Mermaid语句
```
支持绘图类型
- 流程图：使用
graph关键字 - 序列图：使用
sequenceDiagram关键字 - 类图：使用
classDiagram关键字 - 状态图：使用
stateDiagram关键字 - 实体关系图：使用
erDiagram关键字 - 用户旅程图：使用
journey关键字 - 甘特图：使用
gantt关键字 - 饼状图：使用
pie关键字 - 需求图：使用
requirementDiagram关键字
注意：使用中文可能会出现异常
实例展示：
```mermaid
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```
erDiagram CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ INVOICE : "liable for" DELIVERY-ADDRESS ||--o{ ORDER : receives INVOICE ||--|{ ORDER : covers ORDER ||--|{ ORDER-ITEM : includes PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT ||--o{ ORDER-ITEM : "ordered in"
类图
classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label
流程图 简视
流程图是使用 flowchart LR
- 设置节点
flowchart LR
节点名称[节点内容]
如果没有设置[节点内容]，默认为节点名称
例子：
```mermaid
flowchart LR
id
```
flowchart LR id
```mermaid
flowchart LR
id[This is the text in the box]
```
flowchart LR id[This is the text in the box]
-
流程控制
不同的流程控制会有不同的效果
- TD - 自上而下/与TB相同
- TB - 从上到下
- BT - 从下而上
- RL - 从右到左
- LR - 从左到右
flowchart 流程控制
节点名称[节点内容] --> 节点名称[节点内容]
例子：
```mermaid
flowchart TD
Start --> Stop
```
flowchart TD Start --> Stop
```mermaid
flowchart LR
id1[box1] --> id2[box2]
```
flowchart LR id1[box1] --> id2[box2]
- 节点形状
```mermaid
flowchart LR
id1(This is the text in the box)
```
flowchart LR id1(This is the text in the box)
```mermaid
flowchart LR
id1((This is the text in the circle))
```
flowchart LR id1((This is the text in the circle))
对于括号可以使用() [] {} / \进行组合，/ \ 只能内层不可单独使用
比如：[/文本\]
```mermaid
flowchart LR
id[/文本\]
```
flowchart LR id[/文本\]
总之Mermaid的内容很多在此不在继续介绍
拒绝伸手党，下面自助
建议自行探索mermaid官网资料