mermaid
使用Mermaid在博客中添加流程图
什么是Mermaid？
Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
流程图
在mermaid中可以使用graph和flowchart来绘制流程图,但使用flowchart绘制流程图时候性能更高,详情Flowcharts Syntax | Mermaid:
所有的流程图都由节点、几何形状和边、箭头或线组成。mermaid定义了这些节点和边的生成和交互方式。
它还可以容纳不同的箭头类型、多方向箭头以及与子图
一个基本的结点如下
code:
graph LR
id
(id表示在结点box中显示的内容)
也可以设置与id不同的文本,格式为id[text],此时结点的内容为text的内容而不是id
graph LR
id1[text]
1. 流程图的方向
mermaid可以通过方向参数规定流程图的方向,给出五个参数来声明流程图的方向
| 声明 | 说明 |
|---|---|
| TB | 从上到下 |
| TD | 自上而下 |
| BT | 从下到上 |
| RL | 从右到左 |
| LR | 从左到右 |
eg:
graph TB
Start-->Stop
graph TD
Start-->Stop
graph BT
Start-->Stop
graph RL
Start-->Stop
graph LR
Start-->Stop
2. 结点的形状
结点的定义为id[text]，在mermaid中,结点的形状也是可以修改的,提供以下格式
| 形式 | 说明 |
|---|---|
| id[text] | 矩形结点 |
| id(text) | 圆角矩形结点 |
| id([text]) | 椭圆结点 |
| id[[text]] | 子程序结点 |
| id[(text)] | 数据库结点 |
| id((text)) | 圆形结点 |
| id>text] | 不对称结点 |
| id{text} | 菱形结点 |
| id{{text}} | 六边形结点 |
| id[/text/] | 平行四边形结点 |
| id[\text\] | 平行四边形结点(反方向) |
| id[\text/] | 梯形结点 |
| id[/text\] | 梯形结点(反方向) |
| id(((text))) | 双圆结点(8.14版本不支持该形状) |
eg:
graph TD
id1[一般结点]
id2(圆角矩形结点)
id3([椭圆节点])
id4[[子程序结点]]
id5[(数据库结点)]
graph TD
id6((圆形结点))
id7>不对称结点]
id8{菱形结点}
id9{{六边形结点}}
id10[/平行四边形结点/]
graph TD
id11[\平行四边形结点\]
id12[\梯形结点/]
id13[/梯形结点\]
3. 结点之间的链接
节点可以用链路/边连接。在mermaid中,可以使用不同类型的线链接结点,也可以在线上附加文字说明。
线的类型
| 声明 | 说明 |
|---|---|
| –> | 实线箭头 |
| — | 实线 |
| – text — or -->|text| | 附带文本的线 |
| -.- | 虚线 |
| -.-> | 虚线箭头 |
| -. text .-> | 附带文本的虚线箭头 |
| ==> | 粗实线箭头 |
| == text ==> | 附带文本的粗实线箭头 |
| ~ ~ ~ | 隐藏线 |
eg:
实线箭头：
graph LR
A --> B
实线：
graph LR
A --- B
附带文本的线:
graph LR
A-->|说明|B
C--说明-->D
虚线和带文本虚线：
graph LR
A -.- B
C-.-|说明|D
虚线箭头和带文本的虚线箭头：
graph LR
A -.-> B
C -.->|说明|D
粗实线箭头和带文本的粗实线箭头:
graph LR
A ==> B
C ==>|说明|D
多个结点的连接
多个结点的连接如果是单向的,则直接将连接符放在节点后即可，如
graph LR
A --> B --> C
D -->|说明1| E -->|说明2| F
当需要连接的节点为多个时,可以使用&符号将结点连接，使用&符时,需要在符号和元素之间添加空格
graph LR
A-->B & C
D-->D & E-->F
其中,A-->B & C等价于A-->B A-->C
graph TB
A & B --> C & D
//等价于
//A --> C
//A --> D
//B --> C
//B --> D
新的线的类型
提供了新的线类型如下，新的线类型只有表的声明为flowchart时正常显示
| 形式 | 说明 |
|---|---|
| –o | 右端圆点线 |
| –x | 右端x线 |
| o–o | 双向圆点线 |
| x–x | 双向x线 |
| <–> | 双箭头 |
flowchart LR
A --o B
C --x D
E o--o F
G x--x H
I <--> J
线的长度
一般情况下,线的长度是根据流程图排列方向自动调整的，在mermaid中可以通过增加-号来使线更长
graph TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
| 长度 | 1 | 2 | 3 |
|---|---|---|---|
| 默认线 | --- |
---- |
----- |
| 默认箭头 | --> |
---> |
----> |
| 粗实线 | === |
==== |
===== |
| 带箭头粗实线 | ==> |
===> |
====> |
| 虚线 | -.- |
-..- |
-...- |
| 带箭头虚线 | -.-> |
-..-> |
-...-> |
4. 特殊符号
如果想在结点中显示更复杂的内容,可以使用双引号把字符串包裹起来
graph LR
id1["This is the (text) in the box"]
如果想在结点中显示特殊字符,可以使用#字符对符号进行转义输出
graph LR
A["额外的引号:#quot;"] --> B["一个爱心:#9829;"]
5. 子图
在mermaid中,可以使用subgraph关键字为流程图添加子图，子图从subgraph开始,从end结束
子图的定义
使用flowchart时会流程图会自动调整子图的大小
graph TD
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
flowchart TD
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
子图的ID和连接
子图和结点一样,也可以添加id
graph TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
同样的，图和图之间也可以连接
图的连接只有使用 flowchart 关键字时才可用
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
子图的方向
子图的方向也是可以控制的，使用direction语句来控制子图的方向
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
6. 样式和类样式
在mermaid中可以为结点添加样式
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
也可以和HTML一样为结点添加类,并定义类样式
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
7.对fontawesome的基本支持
mermaid增加了一些fontawesome的图标,可以使用fa声明使用,需要注意的是,在结点中使用特殊符号需要把文本用双引号包裹
flowchart TD
B["fab:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner)
B-->E(A fa:fa-camera-retro perhaps?)