Mermaid状態遷移図 — トランジション、ガード、ネスト状態

状態遷移図とは？

状態遷移図（ステートチャートとも呼ばれる）は、イベントに応じて状態が変化するエンティティの振る舞いをモデル化します。UIフロー、注文ライフサイクル、接続状態など、明確に定義された状態と遷移を持つシステムのモデリングに非常に有用です。

基本構文

状態は名前で定義し、遷移は-->とオプションのラベルを使います：

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing : submit
    Processing --> Success : complete
    Processing --> Error : fail
    Error --> Idle : retry
    Success --> [*]

• [*]は開始と終了の擬似状態を表します。
• コロンの後の遷移ラベルは、トリガーとなるイベントを記述します。

状態の説明

コロンを使って状態に説明を追加できます：

stateDiagram-v2
    state "Waiting for payment" as Pending
    Pending : Entry / show payment form
    Pending : Exit / hide form

ネスト（複合）状態

状態はサブ状態を含むことができ、複雑な振る舞いを階層的にモデル化します：

stateDiagram-v2
    [*] --> Active
    state Active {
        [*] --> Running
        Running --> Paused : pause
        Paused --> Running : resume
    }
    Active --> Terminated : kill
    Terminated --> [*]

フォークとジョイン

フォークとジョインで並行（パラレル）状態をモデル化します：

stateDiagram-v2
    [*] --> fork_state
    state fork_state <<fork>>
    fork_state --> TaskA
    fork_state --> TaskB

    TaskA --> join_state
    TaskB --> join_state
    state join_state <<join>>
    join_state --> Complete
    Complete --> [*]

選択擬似状態

<<choice>>を使ってガード条件に基づく条件分岐をモデル化します：

stateDiagram-v2
    [*] --> CheckAge
    state CheckAge <<choice>>
    CheckAge --> Adult : [age >= 18]
    CheckAge --> Minor : [age < 18]

Mermaidの状態遷移図はstateDiagram-v2構文をサポートしており、元のstateDiagram構文よりクリーンなレンダリングと多くの機能を提供します。