無料オンライン状態図エディター

状態図でステートマシンとシステムの動作を可視化。シンプルなテキストを使用して状態、遷移、イベントをモデル化。

状態図を作成

主な機能

  • 状態と遷移を定義
  • 初期状態と最終状態を表示
  • 遷移条件とアクションを追加
  • ネストされた状態のサポート
  • リアルタイム図レンダリング
  • SVGまたはPNG形式でエクスポート

よくあるユースケース

  • システムの動作をモデル化
  • アプリケーション状態の文書化
  • ユーザーインターフェースフローの設計
  • ワークフロー状態の可視化
  • 有限状態機械の計画
  • プロトコル仕様の作成

状態図 の例

stateDiagram-v2
  [*] --> 待機
  待機 --> 読み込み中: 開始
  読み込み中 --> 成功: ok
  読み込み中 --> エラー: 失敗
  成功 --> [*]
  エラー --> 待機: 再試行
この例を試す

この状態図エディタを使う理由

無料のオンライン状態図エディタを使えば、シンプルなテキスト構文でプロ品質の図を簡単に作成できます。インストールは不要で、入力を始めるだけでリアルタイムにレンダリングされます。

このエディタは Mermaid.js をベースにしており、即時プレビュー、SVG/PNG エクスポート、URL 共有に対応しています。開発者、技術ライター、プロジェクトマネージャーなど、明確でプロフェッショナルな図を素早く作りたい人に最適です。

状態図の作成方法

  1. 状態図 用の Mermaid キーワードから開始します。
  2. 主要な要素を分かりやすい名前で定義します。
  3. 要素同士を矢印や関係線で接続します。
  4. 判断・イベント・条件にラベルを付けます。
  5. 関連する部分をセクションやサブグラフでまとめます。
  6. プレビューで確認し、構文エラーを修正します。
  7. レイアウトと命名規則を一貫させます。
  8. SVG/PNG へ書き出すか URL で共有します。

状態図のベストプラクティス

  • 1つの図は1つの目的に集中させます。
  • 短く明確なラベルを使います。
  • 命名ルールを統一します。
  • 重要な経路を明確に示します。
  • 大きな図は小さく分割します。
  • 境界条件やエラー経路も含めます。
  • チームでレビューして確認します。
  • ロジック変更時は図も更新します。

状態図の高度な機能

カスタムスタイル

テーマ変数やクラス定義を使って、状態図 の重要部分を強調します。

グループ化とセクション

状態図 をモジュール・チーム・工程ごとに整理します。

メモと注釈

ルールや前提、判断理由を短い注釈で残します。

再利用可能なパターン

繰り返し使うパターンを再利用し、同種の図を素早く作成します。

状態図でよくある間違い

  • ⚠️ノードや参加者の名前が曖昧または重複している。
  • ⚠️重要な接続にラベルがない。
  • ⚠️1つの図に要素を詰め込みすぎている。
  • ⚠️記法が混在して一貫性がない。
  • ⚠️必要な開始点・終了点がない。
  • ⚠️エラー経路や代替経路を示していない。
  • ⚠️装飾を増やしすぎて可読性が下がっている。
  • ⚠️編集後の検証をしていない。

他の図と比べて状態図を使うべき場面

状態図 は、この観点を明確に伝えたい場合に最適です。やり取りの順序は シーケンス図、状態遷移は 状態図、データ設計は ER図、時間計画は ガントチャート を使うと効果的です。

よくある質問

Mermaid Viewer の使い方と図の作成に関するよくある質問