通过代码优雅地编写图表——Mermaid语法
使用代码，在你的Typora中优雅地编写图表！
先看一个示例：
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2023-01-10
section A section
Completed task :done, des1, 2023-01-06,2023-01-08
Active task :active, des2, 2023-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
简介
mermaid 是一种编写图表的语法，可以让你以代码的形式编写流程图、饼图、甘特图等，并在支持该语法的编辑器（如 Typora）中渲染为对应图表。
其调用方法与代码块一致：
mermaid 语法的基本结构为：关键字 + 节点 + 关系
例如我们绘制一张简单的流程图，其语法为：
---
title: flowchart 1
---
flowchart LR
A-->B
A-->C
B-->D
C-->D
---
title: flowchart 1
---
flowchart LR
A-->B
A-->C
B-->D
C-->D
流程图绘制
流程图的类型关键字为 graph XX 或 flowchart XX
其中，XX 用于指定流程图的方向，包括：
| 关键字 | 含义 | 对应方向 |
|---|---|---|
| TB / TD | Top to Bottom / Top to Down | 从上到下 |
| BT | Bottom to Top | 从下到上 |
| RL | Right to Left | 从右到左 |
| LR | Left to Right | 从左到右 |
节点
流程图的节点由三部分组成：
key[value]
其中：
key用于调用该节点，每一节点的key是唯一的；value为该节点显示在图表中显示的值，不设置value时，将key作为默认的value显示；[]表示该节点的形状，不设置时默认为矩形；
flowchart TB
key-A
key-B[value-B]
key-C(value-C)
节点的 key - value
节点的 key 是唯一的，对某一 key 的 value 进行定义后，后续可以直接调用，而不用重复定义 value：
flowchart TB
key1[value1]
key2[value2]
key1 --- key2[value2]
当一张图表中出现两次对于同一 key 的定义时，后面的定义将覆盖前面的定义：
flowchart TB
key[v1]
key[v2]
节点形状
节点的形状共有 13 种，其关键字分别为：
| 关键字 | 形状 | 关键字 | 形状 |
|---|---|---|---|
[] | 矩形 | >] | 标签形 |
() | 圆角矩形 | {} | 菱形 |
[[]] | 双层侧边矩形 | {{}} | 六边形 |
[()] | 圆柱形 | [//] | 右平行四边形 |
([]) | 椭圆形 | [\\] | 左平行四边形 |
(()) | 圆形 | [/\] | 梯形 |
((())) | 双层圆形 | [\/] | 倒梯形 |
flowchart TB
A[A]
B(B)
C[[C]]
D[(D)]
E([E])
F((F))
G(((G)))
flowchart TB
A[A]
B(B)
C[[C]]
D[(D)]
E([E])
F((F))
G(((G)))
flowchart TB
A>A]
B{B}
C{{C}}
D[/D/]
E[\E\]
F[/F\]
G[\G/]
关系
节点间的关系共有 8 种，其关键字分别为：
| 关键字 | 形状 | 关键字 | 形状 |
|---|---|---|---|
- | 标准实线 | o | 圆头 |
> < | 箭头 | x | 叉头 |
. | 虚线 | ` | text |
= | 加粗实线 | ~ | 不可见实线 |
这些关键字以组合的形式呈现，不同的组合在线型、端点、长短等方面呈现出不同的效果：
flowchart TB
A1 --- B1
A2 --> B2
A3 ---|text| B3
A4 -->|text| B4
A5 -.-> B5
A6 -.->|text| B6
flowchart TB
A7 ==> B7
A8 ==>|text| B8
A9 ~~~ B9
A10 ~~~|text| B10
A11 --o B11
A12 --x B12
flowchart TB
A7 ==> B7
A8 ==>|text| B8
A9 ~~~ B9
A10 ~~~|text| B10
A11 --o B11
A12 --x B12
flowchart TB
A13 o--o B13
A14 x--x B14
A15 x---x B15
A16 ----> B16
A17 -...- B17
A18 ====> B18
冲突的特殊字符
我们注意到，在语法中 [] () 等字符被赋予了特殊的意义，如果我们想在 value 中正确显示这些字符，则需要使用 "" 包裹 value：
flowchart TB
key-right["[正确显示]"]
key-wrong[[错误显示]]
示例
flowchart LR
A([Start]) --> B{一会儿没课?}
B -->|Yes| C[睡觉]
C --> D[吃东西]
D --> B
B --->|No| E[去上课]
E --> F([End])
子图的绘制
可以在流程图中使用关键字 subgraph title ... end 定义子图：
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
其他类型图表示例
可以访问 Mermaid 官方的文档查看更多的图表类型及它们的语法，这里给出部分示例：
Sequence diagram
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
Gantt diagram
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
Git graph
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
Entity Relationship Diagram - ❗ experimental
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
User Journey Diagram
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
Quadrant Chart
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
这个为啥渲染不出来呢
Pie chart diagrams
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
Mindmap
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
这个居然也没渲染出来
Timeline
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : Youtube
2006 : Twitter
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : Youtube
2006 : Twitter
SanKey
---
config:
sankey:
showValues: false
---
sankey-beta
Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
Bio-conversion,Losses,26.862
Bio-conversion,Solid,280.322
Bio-conversion,Gas,81.144
Biofuel imports,Liquid,35
Biomass imports,Solid,35
Coal imports,Coal,11.606
Coal reserves,Coal,63.965
Coal,Solid,75.571
District heating,Industry,10.639
District heating,Heating and cooling - commercial,22.505
District heating,Heating and cooling - homes,46.184
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14
Electricity grid,Industry,342.165
Electricity grid,Road transport,37.797
Electricity grid,Agriculture,4.412
Electricity grid,Heating and cooling - commercial,40.858
Electricity grid,Losses,56.691
Electricity grid,Rail transport,7.863
Electricity grid,Lighting & appliances - commercial,90.008
Electricity grid,Lighting & appliances - homes,93.494
Gas imports,Ngas,40.719
Gas reserves,Ngas,82.233
Gas,Heating and cooling - commercial,0.129
Gas,Losses,1.401
Gas,Thermal generation,151.891
Gas,Agriculture,2.096
Gas,Industry,48.58
Geothermal,Electricity grid,7.013
H2 conversion,H2,20.897
H2 conversion,Losses,6.242
H2,Road transport,20.897
Hydro,Electricity grid,6.995
Liquid,Industry,121.066
Liquid,International shipping,128.69
Liquid,Road transport,135.835
Liquid,Domestic aviation,14.458
Liquid,International aviation,206.267
Liquid,Agriculture,3.64
Liquid,National navigation,33.218
Liquid,Rail transport,4.413
Marine algae,Bio-conversion,4.375
Ngas,Gas,122.952
Nuclear,Thermal generation,839.978
Oil imports,Oil,504.287
Oil reserves,Oil,107.703
Oil,Liquid,611.99
Other waste,Solid,56.587
Other waste,Bio-conversion,77.81
Pumped heat,Heating and cooling - homes,193.026
Pumped heat,Heating and cooling - commercial,70.672
Solar PV,Electricity grid,59.901
Solar Thermal,Heating and cooling - homes,19.263
Solar,Solar Thermal,19.263
Solar,Solar PV,59.901
Solid,Agriculture,0.882
Solid,Thermal generation,400.12
Solid,Industry,46.477
Thermal generation,Electricity grid,525.531
Thermal generation,Losses,787.129
Thermal generation,District heating,79.329
Tidal,Electricity grid,9.452
UK land based bioenergy,Bio-conversion,182.01
Wave,Electricity grid,19.013
Wind,Electricity grid,289.366
---
config:
sankey:
showValues: false
---
sankey-beta
Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
Bio-conversion,Losses,26.862
Bio-conversion,Solid,280.322
Bio-conversion,Gas,81.144
Biofuel imports,Liquid,35
Biomass imports,Solid,35
Coal imports,Coal,11.606
Coal reserves,Coal,63.965
Coal,Solid,75.571
District heating,Industry,10.639
District heating,Heating and cooling - commercial,22.505
District heating,Heating and cooling - homes,46.184
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14
Electricity grid,Industry,342.165
Electricity grid,Road transport,37.797
Electricity grid,Agriculture,4.412
Electricity grid,Heating and cooling - commercial,40.858
Electricity grid,Losses,56.691
Electricity grid,Rail transport,7.863
Electricity grid,Lighting & appliances - commercial,90.008
Electricity grid,Lighting & appliances - homes,93.494
Gas imports,Ngas,40.719
Gas reserves,Ngas,82.233
Gas,Heating and cooling - commercial,0.129
Gas,Losses,1.401
Gas,Thermal generation,151.891
Gas,Agriculture,2.096
Gas,Industry,48.58
Geothermal,Electricity grid,7.013
H2 conversion,H2,20.897
H2 conversion,Losses,6.242
H2,Road transport,20.897
Hydro,Electricity grid,6.995
Liquid,Industry,121.066
Liquid,International shipping,128.69
Liquid,Road transport,135.835
Liquid,Domestic aviation,14.458
Liquid,International aviation,206.267
Liquid,Agriculture,3.64
Liquid,National navigation,33.218
Liquid,Rail transport,4.413
Marine algae,Bio-conversion,4.375
Ngas,Gas,122.952
Nuclear,Thermal generation,839.978
Oil imports,Oil,504.287
Oil reserves,Oil,107.703
Oil,Liquid,611.99
Other waste,Solid,56.587
Other waste,Bio-conversion,77.81
Pumped heat,Heating and cooling - homes,193.026
Pumped heat,Heating and cooling - commercial,70.672
Solar PV,Electricity grid,59.901
Solar Thermal,Heating and cooling - homes,19.263
Solar,Solar Thermal,19.263
Solar,Solar PV,59.901
Solid,Agriculture,0.882
Solid,Thermal generation,400.12
Solid,Industry,46.477
Thermal generation,Electricity grid,525.531
Thermal generation,Losses,787.129
Thermal generation,District heating,79.329
Tidal,Electricity grid,9.452
UK land based bioenergy,Bio-conversion,182.01
Wave,Electricity grid,19.013
Wind,Electricity grid,289.366
