mermaid学习

发表于 更新于 阅读次数： 本文字数： 2.5k 阅读时长 ≈ 2 分钟

Mermaid是一个用于画流程图、状态图、时序图、甘特图的库，广泛用于Markdown编辑中。

流程图(flowchart)

方向

代码 字符
TB 从上到下
TD 从上到下
BT 从下到上
RL 从右向左
LR 从左向右

节点形状

默认节点

1
2
flowchart LR
ID
1
2
flowchart LR
ID

带文本的节点

1
2
flowchart LR
ID[This is the text]
1
2
flowchart LR
ID[This is the text]

圆角节点

1
2
flowchart LR
ID(This is the text)
1
2
flowchart LR
ID(This is the text)

子程序形状的节点

1
2
flowchart LR
ID[[This is the text]]
1
2
flowchart LR
ID[[This is the text]]

圆柱形状的节点

1
2
flowchart LR
ID[(This is the text)]
1
2
flowchart LR
ID[(This is the text)]

圆形节点

1
2
flowchart LR
ID((This is the text))
1
2
flowchart LR
ID((This is the text))

不对称形状的节点

1
2
flowchart LR
ID>This is the text]
1
2
flowchart LR
ID>This is the text]

菱形节点

1
2
flowchart LR
ID{This is the text}
1
2
flowchart LR
ID{This is the text}

六边形

1
2
flowchart LR
ID{{This is the text}}
1
2
flowchart LR
ID{{This is the text}}

平行四边形

1
2
flowchart LR
ID[\This is the text\]
1
2
flowchart LR
ID[\This is the text\]

另一种平行四边形

1
2
flowchart LR
ID[/This is the text/]
1
2
flowchart LR
ID[/This is the text/]

梯形

1
2
flowchart LR
ID[/This is the text\]
1
2
flowchart LR
ID[/This is the text\]

倒梯形

1
2
flowchart LR
ID[\This is the text/]
1
2
flowchart LR
ID[\This is the text/]

节点之间的连接

带箭头的链接

1
2
flowchart LR
A-->B
1
2
3
flowchart LR
A-->B

实线连接

1
2
flowchart LR
A---B
1
2
flowchart LR
A---B

链接带文字

1
2
flowchart LR
A--This is a text!---B
1
2
flowchart LR
A--This is a text!---B

或者

1
2
flowchart LR
A---|This is a text!|B
1
2
flowchart LR
A---|This is a text!|B

带箭头和文本的连接

1
2
flowchart LR
A--This is a text!-->B
1
2
flowchart LR
A--This is a text!-->B

虚线连接

1
2
flowchart LR
A-.-B
1
2
flowchart LR
A-.-B

虚线箭头连接

1
2
flowchart LR
A-.->B
1
2
flowchart LR
A-.->B

粗实线连接

1
2
flowchart LR
A===B
1
2
flowchart LR
A===B

粗实线箭头连接

1
2
flowchart LR
A==>B
1
2
flowchart LR
A==>B

其他连接方式

1
2
flowchart LR
A--oB--xCo--oD<-->Ex--xF
1
2
flowchart LR
A--oB--xC o--oD<-->E x--xF

例子

1
2
flowchart TB
A & B & C ---> D & E & F
1
2
flowchart TB
A & B & C ---> D & E & F

子图

1
2
3
subgraph title
	graph definition
end

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
flowchart TB
c1-->a2
subgraph one[名字]
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one-->two
two-->three
three-->a2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
flowchart TB
c1-->a2
subgraph one[名字]
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one-->two
two-->three
three-->a2

样式设置

1
2
3
4
flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
1
2
3
4
flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

时序图

1
2
3
4
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice->>John: See you later!