Mermaid 状态图与 Git 图
# Mermaid 状态图与 Git 图
# 一、状态图（State Diagram）
状态图描述一个对象从创建到销毁经历的所有状态，以及触发状态转换的事件。最适合画订单状态、工作流、审批流。
# 1.1 基础语法
stateDiagram-v2
[*] --> 待支付
待支付 --> 已支付 : 用户付款
已支付 --> 已发货 : 商家发货
已发货 --> 已完成 : 用户签收
已完成 --> [*]
待支付 --> 已取消 : 超时/取消
已取消 --> [*]
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
[*] 起点或终点
状态名 --> 状态名 状态转换
: 说明文字 转换标签
1
2
3
2
3
# 1.2 带转换描述
stateDiagram-v2
[*] --> Draft
Draft --> Review : submit
Review --> Draft : reject
Review --> Published : approve
Published --> Archived : archive
Published --> Draft : unpublish
Draft --> [*] : delete
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 二、复合状态（Composite State）
一个状态内部可以包含子状态：
stateDiagram-v2
[*] --> 空闲
state 工作中 {
[*] --> 编码
编码 --> 自测
自测 --> 评审
评审 --> 编码 : 修改
评审 --> [*]
}
空闲 --> 工作中 : 接到任务
工作中 --> 空闲 : 任务完成
空闲 --> [*]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 三、并发状态（Concurrent State）
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn
NumLockOn --> NumLockOff
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn
CapsLockOn --> CapsLockOff
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn
ScrollLockOn --> ScrollLockOff
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
-- 分隔并发子状态
1
# 四、分支（Fork/Join）
stateDiagram-v2
state 订单处理 {
[*] --> 校验
校验 --> 风控检查
校验 --> 库存检查
风控检查 --> 合并
库存检查 --> 合并
合并 --> [*]
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 五、实战：Git 提交状态流转
stateDiagram-v2
[*] --> 工作区修改
工作区修改 --> 暂存区 : git add
暂存区 --> 本地仓库 : git commit
本地仓库 --> 远程仓库 : git push
工作区修改 --> 工作区修改 : git restore
暂存区 --> 工作区修改 : git restore --staged
本地仓库 --> 暂存区 : git reset --soft
本地仓库 --> 工作区修改 : git reset --mixed
本地仓库 --> 已删除 : git reset --hard
已删除 --> [*]
远程仓库 --> 本地仓库 : git revert
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 六、Git 图（gitGraph）
Git 图直接用 Mermaid 画出分支结构和提交历史，最适合讲解 Git 工作流。
# 6.1 基础语法
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
gitGraph 声明 Git 图
commit 在当前分支提交
commit id: "hash" 指定 commit id
branch name 创建分支
checkout name 切换分支
merge name 合并分支
1
2
3
4
5
6
2
3
4
5
6
# 6.2 标签与反向合并
gitGraph
commit id: "init"
commit id: "基础功能"
branch feature/login
checkout feature/login
commit id: "登录功能"
commit id: "登录测试"
checkout main
branch hotfix/crash
checkout hotfix/crash
commit id: "修复崩溃" tag: "v1.0.1"
checkout main
merge hotfix/crash
checkout feature/login
merge main
commit id: "适配修复"
checkout main
merge feature/login tag: "v1.1.0"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 6.3 实战：Git Flow 可视化
gitGraph
commit id: "v1.0"
branch develop
checkout develop
commit id: "项目初始化"
branch feature/商品搜索
checkout feature/商品搜索
commit id: "搜索功能"
commit id: "搜索优化"
checkout develop
merge feature/商品搜索
branch feature/购物车
checkout feature/购物车
commit id: "购物车功能"
commit id: "购物车修复"
checkout develop
merge feature/购物车
branch release/v1.1
checkout release/v1.1
commit id: "版本号" tag: "v1.1.0"
checkout main
merge release/v1.1
checkout develop
merge release/v1.1
checkout main
branch hotfix/支付异常
checkout hotfix/支付异常
commit id: "修复支付" tag: "v1.1.1"
checkout main
merge hotfix/支付异常
checkout develop
merge hotfix/支付异常
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 七、速查
┌──────────────────────────────────────────────┐
│ Mermaid 状态图 & Git图速查 │
├──────────────────────────────────────────────┤
│ 状态图 │
│ [*] 起点/终点 │
│ state 名 {} 复合状态 │
│ -- 并发分隔 │
│ : 文字 转换标签 │
│ │
│ Git图 │
│ commit 在当前分支提交 │
│ commit tag:"" 提交并打标签 │
│ branch name 创建分支 │
│ checkout name 切换分支 │
│ merge name 合并分支 │
└──────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
🏃 下一篇：甘特图与饼图——项目排期、任务管理、数据占比可视化。
上次更新: 2026/06/07, 09:20:35
