通过代码优雅地编写图表——Mermaid语法-摩杜云开发者社区

通过代码优雅地编写图表——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

2023-01-07 2023-01-09 2023-01-11 2023-01-13 2023-01-15 2023-01-17 2023-01-19 2023-01-21 2023-01-23 Completed task Active task Future task Future task2 A section Adding GANTT diagram to mermaid

简介

mermaid 是一种编写图表的语法，可以让你以代码的形式编写流程图、饼图、甘特图等，并在支持该语法的编辑器（如 Typora）中渲染为对应图表。

其调用方法与代码块一致：

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

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

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-A

value-A

节点的 `key` - `value`

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

flowchart TB
	key1[value1]
	key2[value2]
	key1 --- key2[value2]

value1

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

text

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

A13

B13

A14

B14

A15

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])

Yes

Start

一会儿没课?

睡觉

吃东西

去上课

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

TOP

其他类型图表示例

可以访问 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!

Alice Bob John Hello John, how are you? Fight against hypochondria loop [Healthcheck] Rational thoughts prevail! Great! How about you? Jolly good! Alice Bob John

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

2014-01-07 2014-01-09 2014-01-11 2014-01-13 2014-01-15 2014-01-17 2014-01-19 2014-01-21 2014-01-23 Completed task Active task Future task Future task2 A section Adding GANTT diagram to mermaid

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

CUSTOMER ORDER LINE-ITEM DELIVERY-ADDRESS places contains 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

Cat Me

Go to work

Go to work Me

Make tea

Make tea Me

Go upstairs

Go upstairs MeCat

Do work

Go home

Go home Me

Go downstairs

Go downstairs Me

Sit down

Sit down My working day

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

79% 17% 3% Pets adopted by volunteers Dogs Cats Rats

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