Mermaid 図解ジェネレーター
Mermaid 記法をブラウザ上でリアルタイムに描画して、PNG / SVG にエクスポートできる無料ツールです。ChatGPT / Claude / Gemini が出力した記法をそのまま貼り付けて、技術記事・設計書・README 用の図に変換できます。
Mermaid 記法チートシート（日本語）
タブを切り替えて、よく使う記法を確認できます。
| 記法 | 説明 |
|---|---|
| flowchart TD / LR | 方向（TD=上から下、LR=左から右） |
| A --> B | 矢印（実線） |
| A --- B | 線のみ（矢印なし） |
| A -.-> B | 点線 |
| A ==> B | 太線 |
| A -->|ラベル| B | ラベル付き矢印 |
| A[四角] | 四角ノード |
| A(角丸) | 角丸ノード |
| A((円)) | 円ノード |
| A{ひし形} | ひし形（条件分岐） |
| A[/平行四辺形/] | 入出力 |
| A([スタジアム]) | スタジアム（開始/終了） |
無料で使える Mermaid エディタ（日本語対応）
Mermaid は、テキスト記法でフローチャート作成・シーケンス図作成・ER 図作成・クラス図・ガントチャートなどの図を記述できる JavaScript 製のオープンソースライブラリです。GitHub・GitLab・Notion・Qiita・Zenn など多くのプラットフォームが標準でサポートしており、Markdown のコードブロック内に記述するだけで図が描画されます。
この Mermaid エディタは、日本語 UI と日本語チートシートを備えた無料オンラインツールです。ブラウザ内で Mermaid 記法をリアルタイムに描画して、Mermaid PNG エクスポート（1x / 2x / 3x スケール）または SVG ダウンロードができます。記事執筆中・LT スライド作成中・社内設計書作成中に「Mermaid から最終成果物への変換」が必要になるラストマイルを、ブラウザだけで完結させることが目的です。インストール・登録・会員登録は不要です。
対応している図の種類
| 図の種類 | 用途 | 記法 |
|---|---|---|
| フローチャート | 処理の流れ・分岐 | flowchart TD |
| シーケンス図 | システム間の通信・API 呼び出し | sequenceDiagram |
| クラス図 | オブジェクト指向設計 | classDiagram |
| ER 図 | DB スキーマ設計 | erDiagram |
| ガントチャート | プロジェクトスケジュール | gantt |
| マインドマップ | アイデア整理 | mindmap |
| 円グラフ | 比率の可視化 | pie |
| git グラフ | ブランチ・マージの可視化 | gitGraph |
こんなときに便利
- ChatGPT / Claude / Gemini が出力した Mermaid 記法を、技術記事用の画像に変換したい
- README や設計書に貼り付ける図を、Figma や draw.io を起動せずにブラウザだけで作りたい
- Qiita や Zenn の記事用に、高解像度（2x / 3x）の PNG を出力したい
- Mermaid の記法を学習中で、テーマ切り替えとリアルタイムプレビューで動作確認したい
- 社内設計書（Confluence / Notion）に貼る図を SVG で出力したい
使い方
- 左ペインに Mermaid 記法を入力（または ChatGPT / Claude / Gemini の出力をそのまま貼り付け）
- 右ペインで描画結果を確認（テーマを Default / Dark / Forest / Neutral から選択）
- 「PNG ダウンロード」または「SVG ダウンロード」で画像を保存
- 記法に迷ったら、下部の Mermaid チートシート（日本語）タブで該当する図の記法を確認
ChatGPT / Claude が出力した Mermaid 図を画像に変換するには
ChatGPT や Claude に「この処理のフローチャートを Mermaid 記法で書いて」「ER 図を Mermaid で出力して」と頼むと、コードブロック形式で記法が返ってきます。返ってきた ```mermaid から ``` の間の本文だけをコピーして、このツールの左ペインに貼り付けてください。コードブロックの開始・終了マーカーは含めなくて OK です。
貼り付けた瞬間にリアルタイムで描画され、PNG または SVG としてダウンロードできます。Qiita や Zenn・はてなブログ・WordPress などの技術記事に貼り付ける場合は、解像度の高い 2x または 3x の PNG エクスポートが扱いやすいです。社内 Confluence・Notion・Figma などベクター対応の媒体には SVG ダウンロードを推奨します。
関連記事
よくある質問
- Q. ChatGPT や Claude が出力した Mermaid 記法をそのまま貼り付けて動きますか？
- はい。Mermaid v11 系の標準記法（flowchart / sequenceDiagram / classDiagram / erDiagram / gantt / mindmap / pie / gitGraph）に対応しているため、ChatGPT・Claude・Gemini が出力した一般的な Mermaid 記法はそのまま貼り付けて描画できます。
- Q. PNG は高解像度で出力できますか？
- はい。エクスポート時に 1x / 2x / 3x のスケール倍率を選択でき、技術記事・LT スライド・社内設計書にそのまま貼れる解像度で出力します。極端に大きな図はブラウザの Canvas 上限内に自動で収まるよう縮小されます。
- Q. 入力した記法やデータはサーバーに送信されますか？
- いいえ。このツールはすべてブラウザ内（クライアントサイド）で動作し、入力された Mermaid 記法・描画結果・エクスポートファイルは一切サーバーに送信されません。機密性の高い設計図・社内データも安全に変換できます。
- Q. 対応している図の種類は？
- フローチャート（flowchart）、シーケンス図（sequenceDiagram）、クラス図（classDiagram）、ER 図（erDiagram）、ガントチャート（gantt）、マインドマップ（mindmap）、円グラフ（pie）、git グラフ（gitGraph）の 8 種類に対応しています。各図のサンプルとチートシートをツール内に用意しています。
- Q. 出力した画像の著作権はどうなりますか？
- 出力した画像は自由にご利用いただけます。商用利用・個人利用ともに制限はなく、クレジット表記も不要です。技術記事・社内設計書・スライドなどで自由に活用してください。
- Q. テーマは変更できますか？
- はい。Default / Dark / Forest / Neutral の 4 種類のテーマを用意しています。記事の背景色や資料のトーンに合わせて切り替えてください。Dark テーマは PNG 出力時の背景も自動でダークに調整されます。
関連ツール
開発者
Zeronova（呑名 健造）
PdM × AI-Native Builder × Senior UX × Civic Tech
19年以上のWeb/IT業界経験を持つ PdM が、現場で本当に使えるツールを開発。登録不要・ブラウザだけで動作する無料ツールを100種類以上公開中。