Mermaid図生成ツール
Mermaidの図表構文を入力すると、その場でレンダリングされる様子を確認できます。用意されたテンプレートから始め、構文エラーをその都度修正しながら、図をSVGまたはPNGとしてコピー・ダウンロードできます。
すべての処理はブラウザ内で完結します — ファイルが外部に送信されることはありません。
使い方
- 01左側のペインにMermaid構文を入力または貼り付けるか、「サンプル」をクリックしてフローチャート、シーケンス、クラス、状態、ガント、円グラフ、ER図のテンプレートを読み込みます。
- 02入力に合わせて図が自動的にレンダリングされます。構文が無効な場合は、プレビューをクリアせずに分かりやすいエラーメッセージを表示しつつ、直前の有効な図を表示し続けます。
- 03プレビュー上部の−／%／+の操作で、細部を確認しながら50%〜200%までズームできます — これは書き出すファイルのサイズには影響しません。
- 04レンダリングされた図をSVG文字列としてコピーするか、「形式を選んでダウンロード」で単体の.svgまたは.pngファイルとして保存します。
- 05SVGやPNGを文書に貼り付けるか、対応しているレンダラー（GitHub、GitLab、Notionなどはmermaidのコードフェンスをネイティブにレンダリングします）ではMermaidのソースをMarkdownに直接埋め込めます。
よくある質問
このMermaid図生成ツールは無料ですか？
はい、アカウント登録や利用制限は一切ありません。図はMermaid.jsライブラリを使ってすべてブラウザ内でパース・レンダリングされます。
図のソースはどこかにアップロードされますか？
いいえ。レンダリングはすべてブラウザ内で処理されます — 入力した構文が端末の外に出ることはありません。
Mermaidが対応している図の種類は？
フローチャート、シーケンス図、クラス図、状態図、ER図、ガントチャート、円グラフなど、さまざまな種類の図に対応しています — このツールはフローチャートに限らず、有効なMermaid構文であれば何でもレンダリングします。「サンプル」メニューには、これら7種類それぞれの出発点となるテンプレートが用意されています。
構文にエラーがある場合はどうなりますか？
図のペインには、クラッシュしたり空白ページになったりする代わりに、Mermaidが解析できなかった内容を説明する分かりやすいエラーメッセージが表示されます。すでに有効な図が表示されていた場合は、エラーの下にそのまま表示され続けるため、作業中の位置を見失いません。構文を修正すればプレビューは自動的に更新されます。
SVGだけでなく、PNGとしても書き出せますか？
はい。「形式を選んでダウンロード」メニューから「PNG」を選ぶと、その時点のプレビューのズーム率に関わらず、白背景・2倍解像度で図がレンダリングされます。
出力をMarkdownに直接使えますか？
多くのレンダラー（GitHub、GitLab、Notion、Obsidianなど）は```mermaidのコードフェンスをネイティブにレンダリングします。その場合は書き出し不要で、生の構文をそのままMarkdown文書に貼り付けられます。Mermaidにネイティブ対応していないレンダラーには、このツールのSVGまたはPNG書き出しを使ってください。