Mermaid能绘制的内容

关键字图类型关键字图类型
pie饼状图graph图
flow流程图gantt甘特图
classDiagram类图stateDiagram状态图
journey用户旅程图

类图（classDiagram）

引用站外地址
【个人博客】使用Mermaid在Markdown中绘制类图
6Young

甘特图（gantt）

引用站外地址
【个人博客】使用Mermaid在Markdown中绘制甘特图
6Young

其他类型图（pie、stateDiagram、journey）

引用站外地址
【个人博客】使用Mermaid在Markdown中绘制其他类型图
6Young

Mermaid图(Graph)

相关参数

图方向

  • graph或graph TB或graph TD：从上往下
  • graph BT：从下往上
  • graph LR：从左往右
  • graph RL：从右往左

图形状

1
2
3
4
5
6
7
graph
	id1[方形]
    id2(圆边矩形)
    id3([体育场形])
    id4[[子程序形]]
    id5[(圆柱形)]
    id6((圆形))

图线型

1
2
3
4
5
6
7
8
9
```mermaid
graph LR
    a---b
    b--文本1!---c
    c---|文本2|d
    d===e
    e==文本3===f
    f-.-g
    g-.文本.-h
1
2
3
4
5
6
```mermaid
flowchart LR
    A o--o B
    B <--> C
    C x--x D
## 其他线性需要用flowchart

子图

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

图示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
```mermaid
graph LR
    you((你))-.子.->长子-.子.->grandson((孙子))
    you-.子.->次子-.女.->granddaught((孙女))

    father((爸)) --子-->弟
    father --子-->you
    father --女-->姐

    妈 --子-->弟
    妈 --子-->you
    妈 --女-->姐

    姐--子-->外甥

Flow流程图

1
2
3
4
5
6
7
8
9
10
11
12
13
```flow
  st=>start: Start
  op=>operation: Your Operation
  op1=>operation: Your Operation1
  op2=>operation: Your Operation2
  cond=>condition: Yes or No?
  cond2=>condition: Yes or No?
  e=>end
  st->op->cond
  cond(yes)->op1->e
  cond(no)->op2->cond2
  cond2(yes)->e
  cond2(no)->e

image-20230809145913838