ステート図とは？
ステート図（状態機械図）は、オブジェクトやシステムが取りうるさまざまな状態と、イベントに応答して状態間をどのように遷移するかを視覚化します。ライフサイクル動作、ワークフロー、複雑な条件ロジックのモデリングに不可欠です。各状態は安定した条件を表し、遷移は状態変更を引き起こすトリガーを示します。
編集とプレビュー
Mermaid構文でステート図を作成し、変更を即座に確認。
一般的なユースケース
アプリケーション状態管理
UI状態、フォームバリデーションフロー、アプリケーションモードをモデル化。ReactやVueなどのフロントエンドフレームワークでの状態機械設計に不可欠。
ワークフローモデリング
承認ワークフロー、注文処理状態、チケットライフサイクル管理を設計。ビジネスプロセスのステータス遷移とガード条件をマッピング。
プロトコル設計
ネットワークプロトコル状態、接続ライフサイクル、通信状態機械を視覚化。組み込みシステムやIoTデバイスプログラミングに重要。
ゲーム開発
キャラクター状態、ゲームモード、レベル進行をモデル化。AI動作やゲームメカニクス用の有限状態機械を設計。
主な機能
状態タイプ
シンプルな状態、複合状態、および初期、終了、選択疑似状態などの特殊状態に対応。
遷移ガード
ガード条件と状態変更時に実行されるアクションを含む条件付き遷移を定義。
ネストされた状態
複雑な動作をモデル化するための親子状態を持つ階層的状態機械を作成。
並行状態
並行動作を持つシステムのための並列状態機械と直交領域をモデル化。
ベストプラクティス
シンプルに始める
高レベルの状態から始め、徐々に詳細化。複合状態を使用して、必要になるまで複雑さを隠す。
状態は条件として命名
動詞ではなく形容詞や過去分詞（例：「アクティブ」「一時停止中」「完了済み」）を使用。
遷移を文書化
すべての遷移にイベント、ガード条件、アクションをラベル付け。すべての矢印が明確なストーリーを伝えるべき。
状態の爆発を避ける
状態が多すぎる場合、それらを組み合わせるパターンを探すか、代わりに状態変数を使用。
他のダイアグラムタイプを探す
フローチャート
ノードと方向矢印でプロセス、ワークフロー、アルゴリズムを視覚化。ビジネスプロセスやデシジョンツリーに最適です。
シーケンス図
異なるアクターやシステム間の時系列でのインタラクションを文書化。APIドキュメントやシステム設計に最適です。
クラス図
クラス、属性、関係でオブジェクト指向システムをモデル化。ソフトウェアアーキテクチャ設計に不可欠です。
ガントチャート
タスクと依存関係でプロジェクトのタイムラインを計画・追跡。プロジェクト管理やスケジューリングに最適です。
ER図
エンティティと関係でデータベーススキーマを設計。データベースモデリングやドキュメント作成に最適です。
ユーザージャーニー
タッチポイント全体のユーザー体験とインタラクションをマッピング。UXデザインやカスタマージャーニーマッピングに最適です。
Gitグラフ
Gitのブランチ戦略やコミット履歴を視覚化。バージョン管理ワークフローの説明に役立ちます。