Mermaid 図エディター

Mermaid でフローチャートやシーケンス図を描画し、SVG・PNG で保存

サンプル

テーマ

Mermaid コード

プレビューMermaid を読み込み中…

背景

PNG のサイズ

Mermaid 図エディターの使い方

Mermaid のコードからフローチャート、シーケンス図、ER 図、ガントチャート、マインドマップなど 10 種類の図を即座に描画します。プレビューは拡大・移動でき、SVG か最大 4 倍の PNG で書き出せます。

エディターに Mermaid のコードを書くか、「サンプル」から図の種類を選んで始めます。

テーマを「デフォルト」「ニュートラル」「ダーク」「フォレスト」から選びます。

プレビューを確認します。ホイールやピンチで拡大縮小、ドラッグで移動でき、「全体を表示」や「全画面表示」も使えます。

「背景」と「PNG のサイズ」を設定し、SVG または PNG を押してダウンロードするか、「SVG をコピー」「PNG をコピー」でクリップボードにコピーします。

よくある質問

いいえ。Mermaid はページ内で動作し、コードも図もブラウザの外に出ません。コードはローカルに保存されるので、次回も続きから使えます。

エディターの下にエラーと行番号が表示され、プレビューには最後に描画できた図が残ります。

できます。SVG や PNG を書き出す前に「背景」を「透明」にしてください。

「PNG のサイズ」で 2×、3×、4× を選びます。実際のピクセル数が横に表示されます。

エディターで Ctrl/⌘ + S を押すと SVG をダウンロードします。プレビューでは + と − で拡大縮小、矢印キーで移動、0 で 100% に戻し、F で全体を表示します。