Mermaid 可以画很多类型的图, 详细可以查看官方说明书

1. 调出 Mermaid 绘制界面

在 Notion 页面中输入/code 插入代码块. 左上角代码类型选择 Mermaid, 右边的 Split 表示代码和思维导图同时表示, 类似于 Markdown 编辑器一边编辑一边预览.

Untitled

2. Mermaid 代码编辑

部分的绘图开始申明, 需要写在第一行 → {图的类型} {图形的方向}

graph LR
图的类型-->flowchart_流程图
图的类型-->graph_简单思维导图

graph LR
图的类型-->flowchart_流程图
图的类型-->graph_简单思维导图

graph TB
图形方向-->LR_从左向右
图形方向-->RL_从右向左
图形方向-->TB_从上向下
图形方向-->BT_从下向上

graph TB
图形方向-->LR_从左向右
图形方向-->RL_从右向左
图形方向-->TB_从上向下
图形方向-->BT_从下向上

字体类型和语法

flowchart LR
 a["`第一行
     第二行`"]
 aa["`**粗体**`"]
 b["`_斜体_`"]
 c([节点形状1])
 d(节点形状2)
 e[[节点形状3]]
 f[(数据库形状)]
 g((圆形))
 h{菱形}
 i[使用&]
 j[b]
 k[c]
 l[d]
a-->aa~~~b
c==>d---e--text---f--text-->g-.->h
i-->j & k-->l

flowchart LR
 a["`第一行
     第二行`"]
 aa["`**粗体**`"]
 b["`_斜体_`"]
 c([节点形状1])
 d(节点形状2)
 e[[节点形状3]]
 f[(数据库形状)]
 g((圆形))
 h{菱形}
 i[使用&]
 j[b]
 k[c]
 l[d]
a-->aa~~~b
c==>d---e--text---f--text-->g-.->h
i-->j & k-->l

Mindmaps 思维导图

root定格写; 一级内容前加一个空格; 二级内容前加两个空格
```
mindmap
root((root))
 AAAA
  BBBB
 CCCC
```
```
mindmap
root((root))
 AAAA
  BBBB
 CCCC
```

Pie chart diagrams 饼图

pie title test title
 "class 1": 50
 "class 2": 50

pie title test title
 "class 1": 50
 "class 2": 50

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]

XY chart XY 图表

数据前 line 表示折线; bar 表示条形图

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

Untitled

1. 调出 Mermaid 绘制界面#

2. Mermaid 代码编辑#

1. 调出 Mermaid 绘制界面

2. Mermaid 代码编辑