# Mermaid ステート図のチートシート

状態と、その間の遷移、そしてそのあいだの分岐。

## 状態と遷移

遷移は 1 本の矢印です。矢印のあとのコロンが、それを起こすイベントです。

```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)

## 選択点

問いかけるひし形です。出る矢印 1 本が答え 1 つです。

```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 という名の状態箱の中に、より小さい 2 つの状態 NumLockOff と NumLockOn があり、ラベルのついた矢印でつながっています。](/diagrams/state/composite.svg)

## フォークとジョイン

フォークは流れを分割し、ジョインはすべての分岐がそろうまで待ちます。

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

![開始点から横棒へ分岐し 2 本の流れになり、どちらも 2 本目の横棒へ、最後は終了点へつながっています。](/diagrams/state/fork-join.svg)

## ノート

ノートは 1 つの状態に付けます。2 つにまたがって浮かせることもできます。

```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 ネイティブで、ブラウザは介在しません。