状態遷移図
状態遷移図は、システムの異なる状態とその状態間の遷移を記述します。リアクティブシステムの動作をモデル化するのに特に適しています。
構文
基本要素
- 状態:
state 状態名 - 遷移:
--> - 開始状態:
[*] - 終了状態:
[*] - 複合状態: ネストされた状態を含むことができる
- 選択点:
<<choice>> - ノート:
note left/right of
基本例
コード:
mermaid
stateDiagram-v2
[*] --> 静止
静止 --> [*]
静止 --> 移動
移動 --> 静止
移動 --> 衝突
衝突 --> [*]
応用例
様々な機能を示す複雑な状態遷移図の例：
コード:
mermaid
stateDiagram-v2
[*] --> アイドル
state アイドル {
[*] --> 準備完了
準備完了 --> 処理中: 開始
処理中 --> 準備完了: 完了
}
アイドル --> アクティブ: 起動
state アクティブ {
[*] --> 実行中
実行中 --> 一時停止: 一時停止
一時停止 --> 実行中: 再開
実行中 --> エラー: 失敗
エラー --> 実行中: 再試行
}
アクティブ --> アイドル: 停止
アクティブ --> [*]: シャットダウン
note right of アクティブ: システムが完全に動作中
note left of アイドル: システムがスタンバイ中
複合状態
コード:
mermaid
stateDiagram-v2
[*] --> 第一状態
第一状態 --> 第二状態
state 第一状態 {
[*] --> サブ状態1
サブ状態1 --> [*]
}
state 第二状態 {
[*] --> サブ状態2
サブ状態2 --> [*]
}
選択点
コード:
mermaid
stateDiagram-v2
state 分岐状態 <<choice>>
[*] --> 分岐状態
分岐状態 --> 状態1: 条件1
分岐状態 --> 状態2: 条件2
並行状態
コード:
mermaid
stateDiagram-v2
[*] --> アクティブ状態
state アクティブ状態 {
state "CPU実行" as CPU
state "ディスクI/O" as IO
--
state "メモリアクセス" as メモリ
}
スタイル設定
外観をカスタマイズできます：
- 異なる矢印タイプ
- 状態の説明
- ノート
- 方向（LRまたはTB）
実用的なヒント
- システムの主要な状態から始める
- 明確で簡潔な状態名を使用
- すべての可能な遷移を含める
- 必要に応じて遷移に条件を追加
- 複合状態を使用して複雑さを管理
- 重要な状態の動作をノートで記録
- 状態図が複雑になりすぎないようにする
- サブ状態を適切にグループ化する
よくある問題の解決
レイアウトの問題
- 図の方向を調整
- 状態の数を減らす
- 複合状態で関連する状態を整理
可読性の問題
- 意味のある状態名を使用
- 遷移の説明を簡潔に
- ノートを適切に使用して説明
複雑さの管理
- 複雑な状態図を複数の図に分割
- 複合状態を使用
- 交差する遷移を避ける