抱歉，您的浏览器无法访问本站
本页面需要浏览器支持（启用）JavaScript
了解详情 >

通过代码优雅地编写图表——Mermaid语法

发布于：2023年9月25日

使用代码，在你的Typora中优雅地编写图表！

1
2
3
4
5
6
7
8
9
10
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
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
通过代码块调用 mermaid
通过 markdown 语法调用 mermaid
通过 markdown 语法调用 mermaid

mermaid 语法的基本结构为：关键字 + 节点 + 关系

例如我们绘制一张简单的流程图，其语法为：

1
2
3
4
5
6
7
8
---
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 从左到右

节点

流程图的节点由三部分组成：

1
key[value]

其中：

  • key 用于调用该节点，每一节点的 key 是唯一的；
  • value 为该节点显示在图表中显示的值，不设置 value 时，将 key 作为默认的 value 显示；
  • [] 表示该节点的形状，不设置时默认为矩形；
1
2
3
4
flowchart TB
    key-A
    key-B[value-B]
    key-C(value-C)
flowchart TB
    key-A
    key-B[value-A]
    key-C(value-A)

节点的 key - value

节点的 key 是唯一的，对某一 key 的 value 进行定义后，后续可以直接调用，而不用重复定义 value：

1
2
3
4
flowchart TB
	key1[value1]
	key2[value2]
	key1 --- key2[value2]
flowchart TB
	key1[value1]
	key2[value2]
	key1 --- key2[value2]

当一张图表中出现两次对于同一 key 的定义时，后面的定义将覆盖前面的定义：

1
2
3
flowchart TB
	key[v1]
	key[v2]
flowchart TB
	key[v1]
	key[v2]

节点形状

节点的形状共有 13 种，其关键字分别为：

关键字 形状 关键字 形状
[] 矩形 >] 标签形
() 圆角矩形 {} 菱形
[[]] 双层侧边矩形 {{}} 六边形
[()] 圆柱形 [//] 右平行四边形
([]) 椭圆形 [\\] 左平行四边形
(()) 圆形 [/\] 梯形
((())) 双层圆形 [\/] 倒梯形 
1
2
3
4
5
6
7
8
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)))
1
2
3
4
5
6
7
8
flowchart TB
	A>A]
	B{B}
	C{{C}}
	D[/D/]
	E[\E\]
	F[/F\]
	G[\G/]
flowchart TB
	A>A]
	B{B}
	C
	D[/D/]
	E[\E\]
	F[/F\]
	G[\G/]

关系

节点间的关系共有 8 种，其关键字分别为：

关键字 形状 关键字 形状
- 标准实线 o 圆头
> < 箭头 x 叉头
. 虚线 ` text
= 加粗实线 ~ 不可见实线

这些关键字以组合的形式呈现，不同的组合在线型、端点、长短等方面呈现出不同的效果：

1
2
3
4
5
6
7
flowchart TB
	A1 --- B1
	A2 --> B2
	A3 ---|text| B3
	A4 -->|text| B4
	A5 -.-> B5
	A6 -.->|text| B6
flowchart TB
	A1 --- B1
	A2 --> B2
	A3 ---|text| B3
	A4 -->|text| B4
	A5 -.-> B5
	A6 -.->|text| B6
1
2
3
4
5
6
7
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
1
2
3
4
5
6
7
flowchart TB
	A13 o--o B13
	A14 x--x B14
	A15 x---x B15
	A16 ----> B16
	A17 -...- B17
	A18 ====> B18
flowchart TB
	A13 o--o B13
	A14 x--x B14
	A15 x---x B15
	A16 ----> B16
	A17 -...- B17
	A18 ====> B18

冲突的特殊字符

我们注意到，在语法中 [] () 等字符被赋予了特殊的意义，如果我们想在 value 中正确显示这些字符，则需要使用 "" 包裹 value：

1
2
3
flowchart TB
	key-right["[正确显示]"]
	key-wrong[[错误显示]]
flowchart TB
	key-right["[正确显示]"]
	key-wrong[[错误显示]]

示例

1
2
3
4
5
6
7
flowchart LR
    A([Start]) --> B{一会儿没课?}
    B -->|Yes| C[睡觉]
    C --> D[吃东西]
    D --> B
    B --->|No| E[去上课]
    E --> F([End])
flowchart LR
    A([Start]) --> B{一会儿没课?}
    B -->|Yes| C[睡觉]
    C --> D[吃东西]
    D --> B
    B --->|No| E[去上课]
    E --> F([End])

子图的绘制

可以在流程图中使用关键字 subgraph title ... end 定义子图：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
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

1
2
3
4
5
6
7
8
9
10
11
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!
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 
prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Gantt diagram

1
2
3
4
5
6
7
8
9
10
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
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

1
2
3
4
5
6
7
8
9
10
gitGraph
       commit
       commit
       branch develop
       commit
       commit
       commit
       checkout main
       commit
       commit
gitGraph
       commit
       commit
       branch develop
       commit
       commit
       commit
       checkout main
       commit
       commit

Entity Relationship Diagram - ❗ experimental

1
2
3
4
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

User Journey Diagram

1
2
3
4
5
6
7
8
9
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
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

1
2
3
4
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

Mindmap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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
and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

Timeline

1
2
3
4
5
6
7
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
---
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

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：http://example.com/blogs/mermaid/

更新于：2023年9月29日

markdown

评论