实例讲解 Mermaid 状态图语法，不会画图也能画状态图，程序员专属画图工具
- 作者： 刘杰
- 来源： 技术那些事
- 阅读：186
- 发布： 2025-08-01 08:05
- 最后更新： 2025-08-05 10:08
Mermaid 状态图语法示例
图表方向表格：
| 符号 | 含义 |
|---|---|
| TB | 从上到下（Top to Bottom） |
| BT | 从下到上（Bottom to Top） |
| LR | 从做到右（Left to Right） |
| RL | 从右到左（Right to Left） |
| HZ | 水平方向（Horizontal） |
| VT | 垂直方向（Vertical） |
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#ff8c1f',
'primaryTextColor': 'black'
}
}
}%%
stateDiagram
direction BT
group: 第一个分组
state1:第一个状态
note left of state1
标记重要信息
第二行.
end note
state2: state2状态
note right of state2: 状态右边标记
state if_state <<choice>>
state fork_state <<fork>>
state join_state <<join>>
state_false: 这是个假状态
state_true: 这是个真状态
[*] --> group
state group {
direction LR
[*] --> state1
state1 --> state2 : s1/a1
state2 --> [*]
}
group --> if_state
if_state --> state_false : if n < 0
if_state --> state_true : if n > 0
state_false --> state3
state_true --> state3
state3 --> fork_state
fork_state --> state4
fork_state --> state5
state4 --> join_state
state5 --> join_state
join_state --> [*]
代码如下（如果折叠，请点击复制代码右侧的小箭头可以打开折叠代码）：
language
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#ff8c1f',
'primaryTextColor': 'black'
}
}
}%%
stateDiagram
direction BT
group: 第一个分组
state1:第一个状态
note left of state1
标记重要信息
第二行.
end note
state2: state2状态
note right of state2: 状态右边标记
state if_state <<choice>>
state fork_state <<fork>>
state join_state <<join>>
state_false: 这是个假状态
state_true: 这是个真状态
[*] --> group
state group {
direction LR
[*] --> state1
state1 --> state2 : s1/a1
state2 --> [*]
}
group --> if_state
if_state --> state_false : if n < 0
if_state --> state_true : if n > 0
state_false --> state3
state_true --> state3
state3 --> fork_state
fork_state --> state4
fork_state --> state5
state4 --> join_state
state5 --> join_state
join_state --> [*]
