Mermaid ステート図ビューア
ブラウザでMermaidステート図やステートマシンをレンダリング。遷移をプレビューし、SVGまたはPNGにエクスポート。無料オンラインツール。
ダイアグラムをプレビューするにはMermaidコードを入力してください
ステート図は、システムが取りうるすべての状態と、イベントによってトリガーされるそれらの間の遷移を示すことで、システムの動作をモデル化します。これらは、有限ステートマシン（FSM）の設計、UIコンポーネントのライフサイクルのモデリング、注文ワークフローの文書化、組み込みシステムの動作仕様の記述に不可欠です。 Mermaidの`stateDiagram-v2`構文は、開発者が「支払い注文の状態をモデル化して」「Reactコンポーネントのライフサイクルを見せて」「信号機のステートマシンを設計して」といった質問をした際に、AIアシスタントによって広く生成されます。その出力をZolkitに貼り付けることで、遷移が完了しているか、到達不可能な状態がないか、ハッピーパスとエラーパスが正しく接続されているかなどを即座に確認できます。 Zolkitのステート図ビューアは、開始状態と終了状態（`[*]`）、遷移ラベル、複合状態（ネストされたステート図）、`--`を使用した並行状態、選択擬似状態、ノートなどの`stateDiagram-v2`の機能をサポートしています。このビューアは、単純な有限オートマトンと、実世界のアプリケーションで見られる複雑な階層型ステートマシンをレンダリングします。
無料オンラインMermaidダイアグラムビューア＆エクスポートツール
ZolkitのMermaidダイアグラムビューアを使えば、Mermaidコードを貼り付けるだけで、レンダリングされたダイアグラムを即座に確認できます。インストール不要、サインアップ不要、サーバーへのアップロードも不要です。すべてブラウザ内で完結するため、Claude、ChatGPT、GeminiなどのAIが生成したダイアグラムを確認する最も速い方法です。フローチャート、シーケンス図、クラス図、ER図、ガントチャート、ステート図、マインドマップ、Gitグラフ、円グラフ、タイムラインなど、主要なMermaidダイアグラムタイプをすべてサポートしています。
即時ライブプレビュー
入力に合わせてダイアグラムが自動的にレンダリングされます。300ミリ秒のデバウンス処理により、遅延を感じさせません。
100% プライベート
すべてのレンダリングはmermaid.jsを使用してブラウザ内で行われます。コードがサーバーに送信されることはありません。
SVG & PNG エクスポート
ドキュメントやスライドに最適な、鮮明なベクターSVGまたは高解像度2×PNG形式でダイアグラムをダウンロードできます。
すべてのMermaidダイアグラムタイプに対応
フローチャート、シーケンス図、クラス図、ER図、ガントチャート、マインドマップ、Gitグラフなど、多数のダイアグラムタイプをサポートしています。
AIダイアグラム対応
AI時代のために構築されました — Claude、ChatGPT、Gemini、またはその他のLLMによって生成されたダイアグラムを直接プレビューできます。
常に無料
アカウント不要、利用制限なし、透かしなし。ZolkitのMermaidビューアは完全に無料で、永続的にご利用いただけます。
Mermaidダイアグラムをプレビューする方法
- 1
左側のエディタにMermaidコードを貼り付けます — AIアシスタントからコピーするか、手動で作成できます。
- 2
ダイアグラムは右側のプレビューパネルに即座にレンダリングされます。構文エラーがある場合は、問題点が説明されます。
- 3
'SVGをエクスポート' または 'PNGをエクスポート' をクリックして、ドキュメント、スライド、共有に適したファイル形式でダイアグラムをダウンロードします。
よくある質問
stateDiagramとstateDiagram-v2の違いは何ですか？
`stateDiagram-v2`は、Mermaid v10以降で現在推奨されている構文です。元の`stateDiagram`にはなかった、複合（ネストされた）状態、並行領域、選択擬似状態、フォーク、ジョインのサポートが追加されています。v1構文は後方互換性のために引き続き機能しますが、すべての新しい図では完全な機能セットを利用するために`stateDiagram-v2`を使用する必要があります。
Mermaidでネストされた（複合）状態を表示するにはどうすればよいですか？
波括弧 `{}` を使用した `state` ブロックを使用します: `state Processing { [*] --> Validating \n Validating --> Charging \n Charging --> [*] }`。外側の状態「Processing」は、それ自体の内部ステートマシンを含んでいます。複合状態は、高レベルの状態が内部サブプロセスを持つ複雑なワークフローをモデル化します。例えば、「Processing」状態にある間に複数のサブステップを経る注文などです。
ステート遷移にラベルを追加するにはどうすればよいですか？
遷移矢印の後にコロン `:` を追加します: `Idle --> Loading : user submits form`。ラベルは、遷移をトリガーするイベントまたは条件を文書化します。適切にラベル付けされた遷移は、ステート図を実行可能な仕様に変えます。開発者は各ラベルを実装内の関数呼び出し、イベントハンドラ、またはAPIレスポンスに直接マッピングできます。
並行状態とは何ですか？また、いつ使用すべきですか？
並行状態（複合状態内で `--` 区切り文字を使用）は、システムの一部が並行して実行される様子をモデル化します。例えば、音楽プレーヤーには、再生（再生中/一時停止）と表示（フルスクリーン/通常）の並行状態があるかもしれません。2つの独立した動作が共存し、それぞれが独自のステートマシンを必要とする場合に、すべての組み合わせを個別のトップレベル状態としてモデル化するのではなく、並行状態を使用します。