テキストからフローチャート・シーケンス図・ER図を描画してSVG/PNG出力
Mermaid記法のテキストを入力するだけで、フローチャート・シーケンス図・ER図・ガントチャート・クラス図をリアルタイムに描画し、SVG／PNG画像としてダウンロードできる無料ツールです。左のエディタにコードを入力すると、右のプレビューに図が自動で描画されます。インストールや会員登録は不要で、描画・出力はすべてお使いの端末（ブラウザ）内で完結します。
使い方はかんたんです。上部の「サンプルを読み込む」ボタンから作りたい図の種類（フローチャート・シーケンス図・ER図・ガント・クラス図）を選ぶと、ひな形が左のエディタに入ります。あとはノードやラベルを書き換えるだけ。入力するたびに約0.5秒の遅延で図が更新されるので、結果を見ながら編集できます。記法に誤りがある場合はプレビューの下にエラー内容を表示し、直前の正しい図は消えないため安心して修正できます。
設計ドキュメントの処理フロー図、APIやシステム間のやり取りを示すシーケンス図、データベースのテーブル関係を表すER図、プロジェクトのスケジュールを描くガントチャート、クラス構造を示すクラス図など。ChatGPTなどのLLMが出力したMermaidコードをそのまま貼り付けて可視化する用途にも最適です。完成した図はSVG（ベクター）やPNG（画像）で保存し、資料・README・チャットにそのまま貼り付けられます。
Mermaidは「テキストで図を書く」ための記法です。graph TD や sequenceDiagram といった短いコードを書くだけで、線を1本ずつ引くことなく図が生成されます。Markdownネイティブで扱えるためGitHubやドキュメントに埋め込みやすく、2025〜2026年にはLLMが図を出力する際の事実上の標準フォーマットになりました。テキストなので差分管理（バージョン管理）しやすいのも特長です。
| 図の種類 | 先頭キーワード | 用途の例 |
|---|---|---|
| フローチャート | graph / flowchart | 処理の流れ・分岐・判断ロジック |
| シーケンス図 | sequenceDiagram | システム間・API間のやり取り |
| ER図 | erDiagram | データベースのテーブル関係 |
| ガントチャート | gantt | プロジェクトのスケジュール |
| クラス図 | classDiagram | クラス構造・継承・関連 |
SVGはベクター形式で、どれだけ拡大しても輪郭がぼやけません。図を後から編集したり、印刷・大きなスライドに使う場合に向いています。PNGはビットマップ（画像）形式で、SVGを表示できない環境やチャット・資料に貼り付けるときに便利です。本ツールのPNGは、描画されたSVGをブラウザ内のcanvasでラスタライズして生成しています。用途に合わせて使い分けてください。