ステート図とは？
ステート図（状態機械図）は、オブジェクトやシステムが取りうるさまざまな状態と、イベントに応答して状態間をどのように遷移するかを視覚化します。ライフサイクル動作、ワークフロー、複雑な条件ロジックのモデリングに不可欠です。各状態は安定した条件を表し、遷移は状態変更を引き起こすトリガーを示します。
編集とプレビュー
Mermaid構文でステート図を作成し、変更を即座に確認。
Example
State diagram example
A Mermaid state diagram for a diagram moving from draft to preview, edit, and export.
Mermaid code
stateDiagram-v2
[*] --> Draft
Draft --> Preview: render
Preview --> Editing: update code
Preview --> Exported: download PNG
Editing --> Preview: render again
Exported --> [*]一般的なユースケース
アプリケーション状態管理
UI状態、フォームバリデーションフロー、アプリケーションモードをモデル化。ReactやVueなどのフロントエンドフレームワークでの状態機械設計に不可欠。
ワークフローモデリング
承認ワークフロー、注文処理状態、チケットライフサイクル管理を設計。ビジネスプロセスのステータス遷移とガード条件をマッピング。
プロトコル設計
ネットワークプロトコル状態、接続ライフサイクル、通信状態機械を視覚化。組み込みシステムやIoTデバイスプログラミングに重要。
ゲーム開発
キャラクター状態、ゲームモード、レベル進行をモデル化。AI動作やゲームメカニクス用の有限状態機械を設計。
主な機能
状態タイプ
シンプルな状態、複合状態、および初期、終了、選択疑似状態などの特殊状態に対応。
遷移ガード
ガード条件と状態変更時に実行されるアクションを含む条件付き遷移を定義。
ネストされた状態
複雑な動作をモデル化するための親子状態を持つ階層的状態機械を作成。
並行状態
並行動作を持つシステムのための並列状態機械と直交領域をモデル化。
ベストプラクティス
シンプルに始める
高レベルの状態から始め、徐々に詳細化。複合状態を使用して、必要になるまで複雑さを隠す。
状態は条件として命名
動詞ではなく形容詞や過去分詞（例：「アクティブ」「一時停止中」「完了済み」）を使用。
遷移を文書化
すべての遷移にイベント、ガード条件、アクションをラベル付け。すべての矢印が明確なストーリーを伝えるべき。
状態の爆発を避ける
状態が多すぎる場合、それらを組み合わせるパターンを探すか、代わりに状態変数を使用。
他のダイアグラムタイプを探す
フローチャート
ノードと方向矢印でプロセス、ワークフロー、アルゴリズムを視覚化。ビジネスプロセスやデシジョンツリーに最適です。
シーケンス図
異なるアクターやシステム間の時系列でのインタラクションを文書化。APIドキュメントやシステム設計に最適です。
クラス図
クラス、属性、関係でオブジェクト指向システムをモデル化。ソフトウェアアーキテクチャ設計に不可欠です。
ガントチャート
タスクと依存関係でプロジェクトのタイムラインを計画・追跡。プロジェクト管理やスケジューリングに最適です。
ER図
エンティティと関係でデータベーススキーマを設計。データベースモデリングやドキュメント作成に最適です。
ユーザージャーニー
タッチポイント全体のユーザー体験とインタラクションをマッピング。UXデザインやカスタマージャーニーマッピングに最適です。
Gitグラフ
Gitのブランチ戦略やコミット履歴を視覚化。バージョン管理ワークフローの説明に役立ちます。
マインドマップ
アイデアの整理、ブレインストーミング、階層的なビジュアル構造の作成に。計画立案やナレッジマネジメントに最適です。
円グラフ
円形チャートでデータの比率分布を表示。パーセンテージやマーケットシェアの分析に最適です。
タイムライン
時間軸に沿ってイベントやマイルストーンを視覚化。プロジェクト履歴やロードマップの表示に最適です。
カンバンボード
ワークフローの段階ごとにタスクを列に整理。アジャイルプロジェクト管理やタスク追跡に最適です。
象限チャート
2軸グリッド上に項目をプロットして比較・優先順位付け。機能の優先順位付けや戦略分析に最適です。
サンキーダイアグラム
ノード間のフロー量を比例矢印で視覚化。エネルギーフロー、予算配分、コンバージョンファネルに最適です。
XYチャート
カスタマイズ可能な軸を持つ棒グラフと折れ線グラフを作成。データ視覚化やトレンド分析に最適です。
ブロックダイアグラム
行と列に配置されたブロックで構造化レイアウトを構築。システムアーキテクチャやコンポーネント概要に最適です。
アーキテクチャ図
サービスアイコンと接続を使用してクラウドやシステムアーキテクチャを設計。インフラストラクチャドキュメントに最適です。
パケットダイアグラム
ネットワークプロトコルのパケット構造とビットレベルのフィールドレイアウトを視覚化。ネットワークプロトコルドキュメントに最適です。