Mermaid状态图Git图完全指南

一、状态图（State Diagram）

状态图描述一个对象从创建到销毁经历的所有状态，以及触发状态转换的事件。最适合画订单状态、工作流、审批流。

1.1 基础语法

stateDiagram-v2
    [*] --> 待支付
    待支付 --> 已支付 : 用户付款
    已支付 --> 已发货 : 商家发货
    已发货 --> 已完成 : 用户签收
    已完成 --> [*]
    待支付 --> 已取消 : 超时/取消
    已取消 --> [*]

[*]                  起点或终点
状态名 --> 状态名     状态转换
: 说明文字             转换标签

1.2 带转换描述

stateDiagram-v2
    [*] --> Draft
    Draft --> Review : submit
    Review --> Draft : reject
    Review --> Published : approve
    Published --> Archived : archive
    Published --> Draft : unpublish
    Draft --> [*] : delete

---

二、复合状态（Composite State）

一个状态内部可以包含子状态：

stateDiagram-v2
    [*] --> 空闲
    
    state 工作中 {
        [*] --> 编码
        编码 --> 自测
        自测 --> 评审
        评审 --> 编码 : 修改
        评审 --> [*]
    }
    
    空闲 --> 工作中 : 接到任务
    工作中 --> 空闲 : 任务完成
    空闲 --> [*]

---

三、并发状态（Concurrent State）

stateDiagram-v2
    [*] --> Active
    
    state Active {
        [*] --> NumLockOff
        NumLockOff --> NumLockOn
        NumLockOn --> NumLockOff
        --
        [*] --> CapsLockOff
        CapsLockOff --> CapsLockOn
        CapsLockOn --> CapsLockOff
        --
        [*] --> ScrollLockOff
        ScrollLockOff --> ScrollLockOn
        ScrollLockOn --> ScrollLockOff
    }

--     分隔并发子状态

---

四、分支（Fork/Join）

stateDiagram-v2
    state 订单处理 {
        [*] --> 校验
        校验 --> 风控检查
        校验 --> 库存检查
        风控检查 --> 合并
        库存检查 --> 合并
        合并 --> [*]
    }

---

五、实战：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

---

六、Git 图（gitGraph）

Git 图直接用 Mermaid 画出分支结构和提交历史，最适合讲解 Git 工作流。

6.1 基础语法

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit

gitGraph           声明 Git 图
commit             在当前分支提交
commit id: "hash"  指定 commit id
branch name        创建分支
checkout name      切换分支
merge name         合并分支

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"

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/支付异常

---

七、速查

┌──────────────────────────────────────────────┐
│           Mermaid 状态图 & Git图速查          │
├──────────────────────────────────────────────┤
│ 状态图                                        │
│ [*]           起点/终点                       │
│ state 名 {}   复合状态                        │
│ --            并发分隔                        │
│ : 文字         转换标签                        │
│                                              │
│ Git图                                         │
│ commit        在当前分支提交                  │
│ commit tag:"" 提交并打标签                    │
│ branch name   创建分支                        │
│ checkout name 切换分支                        │
│ merge name    合并分支                        │
└──────────────────────────────────────────────┘

🏃 下一篇：甘特图与饼图 (opens new window)——项目排期、任务管理、数据占比可视化。