Mermaid 状态图

使用状态图可视化状态机和系统行为。为复杂系统建模状态、转换和事件。

100%

开始输入以查看您的图表

100% • 拖动平移

快速语法参考

对状态机进行建模的基本语法。

基本状态定义状态和转换

stateDiagram
  [*] --> Idle
  Idle --> Running
  Running --> [*]

状态转换带事件的转换

stateDiagram
  Idle --> Running : start
  Running --> Paused : pause
  Paused --> Running : resume

复合状态嵌套状态结构

state First {
  [*] --> Second
  Second --> Third
}

分叉与合并并行状态

state fork {
  [*] --> fork
  fork --> A
  fork --> B
}

选择条件分支

state if_state <<choice>>
[*] --> IsValid
IsValid --> if_state
if_state --> Success : yes
if_state --> Error : no

注释添加注释

Note right of State : Note text
Note left of State : Another note

状态图通过状态和转换对系统行为进行建模。

为前端应用程序建模组件状态。

记录业务流程工作流。

设计通信协议和握手。

建模游戏状态和玩家操作。

跟踪从创建到交付的订单生命周期。

记录反应性系统行为。