状態遷移図 ― 状態の移り変わり

導入

状態遷移図 は、あるモノが取りうる 状態 と、状態が どのきっかけで移り変わるか を表す図です。注文の「未払い → 支払済 → 発送済」や、信号機の色の変化などを表すのに使います。

説明

stateDiagram-v2 で始め、状態の名前と、--> による遷移を並べます。開始と終了には特別な記号 [*] を使います。

• [*] --> 状態 … 開始点 からその状態へ入る。
• 状態A --> 状態B : きっかけ … A から B への遷移。: の後ろに、遷移を起こす イベント を書ける。
• 状態 --> [*] … その状態で 終了 する。

stateDiagram-v2
    [*] --> 未払い
    未払い --> 支払済 : 入金
    支払済 --> 発送済 : 出荷
    発送済 --> [*]

この図は「注文は未払いから始まり、入金で支払済に、出荷で発送済に移り、そこで完了する」と読みます。丸い [*] が開始と終了の目印です。

読んでみよう

フローチャート（レッスン8）が「処理の流れ」を描くのに対し、状態遷移図は「モノが今どの状態にあるか」と「その間の移り変わり」に注目します。同じ矢印でも、ノードが表すもの（処理か、状態か） が違うのがポイントです。これで、Markdown の中に UML の主要な図を描く土台がそろいました。