---
title: Mermaid 状态图写法入门
canonical: "https://mermaid.vloam.com/zh/docs/state/"
pubDate: 2026-09-13
author: Vloam
description: "用状态、事件和清晰的起止标记画出对象的生命周期；说明 [*] 起点终点、转移标签，以及何时该嵌套状态、何时该拆成两张扁平图来保持可读与完整。"
---

状态图描述事物如何随时间变化。每个方框是一个状态，每条箭头是触发转移的事件。

## 使用现代写法

这样开头：

```mermaid
stateDiagram-v2
  [*] --> 空闲
  空闲 --> 运行中 : 开始
  运行中 --> 空闲 : 停止
  运行中 --> [*] : 退出
```

`[*]` 是特殊标记：

- `[*] --> 某状态` — 从起点进入
- `某状态 --> [*]` — 走到终点结束

## 给转移命名

事件写在冒号后面：

```mermaid
草稿 --> 审阅 : 提交
```

读者不看代码也应看懂事件。优先用 `提交`、`通过`、`失败`，少写长句。

## 只在需要时嵌套

某个阶段自己还有小循环时，可以分组：

```mermaid
stateDiagram-v2
  [*] --> 活跃
  state 活跃 {
    [*] --> 就绪
    就绪 --> 忙碌 : 开工
    忙碌 --> 就绪 : 完成
  }
  活跃 --> [*] : 退出登录
```

适度嵌套有帮助。嵌太深会把故事藏起来。宁可拆成两张扁平图，也不要一张迷宫。

## 写作建议

- 从 `[*]` 开始，再回到 `[*]`，生命周期更完整。
- 避免两条路径表达同一事件。
- 若两个状态只差一个标志位，就合并状态，把标志写在转移标签上。