Mermaid ダイアグラム プレビュー
Mermaid コードを入力して、flowchart や sequenceDiagram などのダイアグラムをリアルタイムの SVG プレビューで確認します。
ダイアグラム文書化
Mermaid コードをすぐに SVG ダイアグラムで確認
Mermaid ダイアグラム プレビューは、README、Wiki、設計書に入れる Mermaid 構文をブラウザで即時レンダリングするツールです。
flowchart、sequenceDiagram、classDiagram、stateDiagram など、ドキュメントでよく使う Mermaid 構文を入力すると、右側で SVG 結果を確認できます。
構文が正しくない場合は、プレビュー領域にエラー状態と元のコードが表示され、修正箇所を見つけやすくなります。
レンダリングされた SVG または元の Mermaid コードをコピーして、README、Issue、技術文書の作成に続けて使えます。
どんな場面で使いますか？
サービスフロー、API シーケンス、状態遷移、簡単なアーキテクチャ構成をドキュメントに入れる前にすばやく確認できます。
例をすぐに挿入できますか？
入力欄の上部で flowchart、sequenceDiagram、classDiagram、stateDiagram の例を選ぶとすぐに入力できます。
エラーはどう表示されますか？
Mermaid のレンダリングに失敗すると、エラーメッセージと元のコードブロックを一緒に表示し、構文を直しやすくします。
何をコピーできますか？
SVG コピーはレンダリング結果を、ソースコピーは入力した Mermaid コードをクリップボードにコピーします。
Mermaid レンダラーは外部 CDN から読み込まれ、入力内容はブラウザ内だけで処理されます。
Mermaid ダイアグラム プレビュー Mermaid ダイアグラム プレビュー作業領域
使い方
- 1 左側の入力欄に Mermaid 構文を書き込むか貼り付けます。
- 2 例が必要な場合は、入力欄の上部で flowchart、sequenceDiagram、classDiagram、stateDiagram のいずれかを選んで挿入します。
- 3 右側のプレビューで SVG ダイアグラムまたはエラーメッセージを確認します。
- 4 結果が正しければ、SVG コピーまたはソースコピーで必要な内容をクリップボードにコピーします。
主な使用例
- README 用 flowchart のプレビュー
- API 呼び出しフローの sequenceDiagram 確認
- 状態遷移またはクラス関係ダイアグラムの下書き確認
よくある質問
どの Mermaid ダイアグラムをプレビューできますか？
Mermaid レンダラーが対応する flowchart、sequenceDiagram、classDiagram、stateDiagram などの一般的な Mermaid 構文を SVG としてレンダリングできます。
構文エラーがある場合はどう表示されますか？
レンダリングに失敗すると、プレビュー領域にエラー状態を表示し、入力した元のコードもコードブロックとして表示します。
入力したダイアグラムコードはサーバーに送信されますか？
いいえ。このツールはクライアント専用で、入力した Mermaid コードはブラウザ内だけで処理されます。