# Mermaid 状态图速查表

状态、状态之间的迁移，以及中间的分支。

## 状态与迁移

迁移就是一根箭头。箭头后面的冒号后面是引发它的事件。

```mermaid
stateDiagram-v2
  [*] --> Idle
  Idle --> Running : start
  Running --> Idle : stop
```

![一台状态机，起点流向 Idle，started 时转到 Running，stopped 时又回到 Idle。](/diagrams/state/transitions.svg)

## 开始与结束

同一个 [*] 标记两件事都管：指向它的箭头是结束，从它出发的箭头是开始。

```mermaid
stateDiagram-v2
  [*] --> Draft
  Draft --> Published
  Published --> [*]
```

![一个起点，然后一个标着 Draft 的框，再一个标着 Published 的框，最后一个终点。](/diagrams/state/start-end.svg)

## 一个选择点

一个提出问题的菱形。每根出发的箭头就是一个答案。

```mermaid
stateDiagram-v2
  [*] --> Check
  Check --> Decide <<choice>>
  Decide --> Accepted : if valid
  Decide --> Rejected : if invalid
```

![一个起点通向标着 Check 的框，再通向标着 Decide 的菱形，后者分成 Accepted 和 Rejected。](/diagrams/state/choice.svg)

## 状态里的状态

花括号打开一个复合状态。它的内部状态就住在里面。

```mermaid
stateDiagram-v2
  [*] --> Active
  state Active {
    [*] --> NumLockOff
    NumLockOff --> NumLockOn : press
    NumLockOn --> NumLockOff : press
  }
  Active --> [*]
```

![一个叫 Active 的状态框，里面装着两个更小的状态 NumLockOff 和 NumLockOn，由一根带标签的箭头相连。](/diagrams/state/composite.svg)

## 分叉与汇合

分叉把流拆开，汇合要等每一条分支都到齐。

```mermaid
stateDiagram-v2
  [*] --> Split <<fork>>
  Split --> A
  Split --> B
  A --> Merge <<join>>
  B --> Merge
  Merge --> [*]
```

![一个起点通向一根横杠，横杠分成两支，两支都通向第二根横杠，再通向一个终点。](/diagrams/state/fork-join.svg)

## 注释

注释挂在某个状态上，或者横跨两个状态浮着。

```mermaid
stateDiagram-v2
  [*] --> Draft
  Draft --> Review
  note right of Draft
    Still editable
  end note
```

![一台状态机，Draft 状态右边挂着一个注释框。](/diagrams/state/notes.svg)

## 方向

和流程图同一个关键字。默认自上而下。

```mermaid
stateDiagram-v2
  direction LR
  [*] --> Idle
  Idle --> Running : start
```

![一个起点、一个 Idle 框和一个 Running 框，从左到右排开。](/diagrams/state/direction.svg)

## 在 Mernyx 里画出来

打开一个 .mmd 文件，在画布上挪一个节点，源码跟着走。macOS 原生，不经过浏览器。