Mermaid図プレビュー
Mermaidコードを入力するとリアルタイムで図を描画します。flowchart・sequenceDiagram・classDiagram などに対応。
コードを入力すると図が表示されます
プレビュー内をドラッグで移動 · スクロールで拡大縮小 · 中央の縦線で左右幅変更 · 下のハンドルで高さ変更
Mermaid図プレビューツールとは？
テキストベースの図表記述言語「Mermaid」のコードをリアルタイムでプレビューし、SVGとしてダウンロードできる無料ツールです。 フローチャート・シーケンス図・クラス図・ER図・ガントチャートなど多様な図に対応しており、 コードを書きながら即座に仕上がりを確認できます。
プレビューエリアはドラッグで移動、マウスホイールで拡大縮小できるため、大きな図もストレスなく確認できます。 また、ウィンドウサイズも自由に変更可能です。
使い方
- 1左のエディタにMermaidコードを入力する（サンプルが最初から入力されています）
- 2右のプレビューエリアにリアルタイムで図が描画される
- 3図をドラッグして移動、マウスホイールで拡大縮小して確認する
- 4「SVGをダウンロード」ボタンで図をSVGファイルとして保存する
対応している図の種類
flowchartフローチャート
sequenceDiagramシーケンス図
classDiagramクラス図
stateDiagram状態遷移図
erDiagramER図
ganttガントチャート
pie円グラフ
gitGraphGitブランチ図
こんな場面で活躍します
- ·GitHubのREADMEや技術ドキュメントに添付するフロー図を作成したいとき
- ·システム設計のシーケンス図・ER図をすばやく確認・共有したいとき
- ·Notionや Docusaurus などで使うMermaid図をプレビューしながら編集したいとき
- ·プロジェクトのGitブランチ戦略をビジュアルで確認したいとき
よくある質問
Q. どんな種類の図が描けますか？
A. flowchart（フローチャート）、sequenceDiagram（シーケンス図）、classDiagram（クラス図）、stateDiagram（状態遷移図）、erDiagram（ER図）、gantt（ガントチャート）、pie（円グラフ）、gitGraph（Gitブランチ図）などに対応しています。
Q. SVGはどうやってダウンロードできますか？
A. プレビューエリア上部の「SVGをダウンロード」ボタンをクリックすると、diagram.svg というファイル名でダウンロードされます。
Q. プレビューエリアを拡大・縮小できますか？
A. はい。プレビューエリア内でマウスホイールを使って拡大縮小、ドラッグで図を移動できます。また、ツールバーの ＋ / － ボタンでもズームを調整できます。中央の縦線ドラッグで左右の幅、下端ハンドルドラッグで高さを変更できます。
Q. コードにエラーがあるとどうなりますか？
A. プレビューエリアにエラーメッセージが表示されます。Mermaid の構文エラーの最初の行が表示されるので、コードを修正してください。