状態遷移図生成ツール
状態機械をテキストとしてモデル化してレンダリングするのを見てください。Mermaidのstatediagram-v2で状態、遷移、イベントを定義 — 注文ライフサイクル、接続状態、承認フロー — すべてデバイス上で。
One step per line. Indent two spaces to branch beneath the line above.
状態、遷移、その間のイベント
状態図は「これは何ができて、これらの状態間をどのように移動するか?」に答えます。Mermaidのstatediagram-v2は直接それにマップされます。「[*]」は開始と終了をマーク、毎回の「A --> B: event」はラベル付き遷移、複合「state Name { … }」はサブ状態をネストしてより豊かな振る舞いを実現。注文ライフサイクル、接続プロトコル、またはドキュメントの承認経路をピンに止める最も明確な方法です。
テキストとして書き込むことはモデルを正直に保つ。状態を追加し、到達するイベントに名前を付け、再描画 — レイアウトが自動的にリフロー、図は文書化するルールからドリフトしません。
ステータス列挙から画像へ
コードが既にステータスフィールドを持っている場合 — pending、paid、shipped、cancelled — 状態図がその列挙をチーム全体が推論できるものに変えます。コードが許可する遷移と禁止するもの。各矢印にトリガーするイベントまたはメソッドでラベル付けして図がスペックのように読める。
設計文書またはプルリクエストにMermaidブロックを落とし込むとレビュアーは欠けている遷移または不可能なパスを見つけられます。バグになる前に。
よくある質問
テキストから状態図を作成するにはどうしますか?
「stateDiagram-v2」で始まり、「[*] --> First」で開始をマーク、「Pending --> Paid: payment confirmed」のような遷移を追加。終了状態は「Last --> [*]」を使用。ライブレンダリングされ、SVGまたはPNGにエクスポートできます。
遷移にイベントでラベル付けするにはどうしますか?
矢印のコロンの後にトリガーを置きます。例えば「Draft --> Submitted: submit」。ラベルは状態変更を引き起こすイベント、メソッド、または条件を表示。
状態をネストできますか（複合状態）?
はい — 「state Name { … }」でサブ状態をラップして独自の「[*] --> …」開始を持つ。上記のチートシートは構文を示します。メディアプレイヤーの例は複合Playing状態を示します。
状態図とフローチャートの違いは何ですか?
フローチャートはプロセスを表示します — ステップと判定は一度実行。状態図はオブジェクトが生涯にわたる状態とそれらの間で移動するイベント、ループが早い状態に戻ることは正常です。
状態図はどこかにアップロードされていますか?
いいえ。Mermaidを使用してブラウザでレンダリングされるため、状態、イベント、内部論理はデバイスから出ません。