Mermaid・PlantUML・D2 を PNG / SVG で出力できる無料ダイアグラムメーカー
ブラウザ上で Mermaid・PlantUML・D2・Graphviz・C4 (Structurizr)・WaveDrom など 16 種類のダイアグラム言語をリアルタイムレンダリング。フローチャート・シーケンス図・ER 図・ガントチャート・ネットワーク図などをコードから生成し、PNG / SVG として保存できます。会員登録不要、完全無料。
なぜダイアグラムをコードで書くのか
ドラッグ & ドロップ式のお絵かきツール (Visio / draw.io など) に比べて、コード型のダイアグラムには 3 つの利点があります。
1. **Git でバージョン管理できる** — 図の変更履歴がプルリクエストに乗る 2. **テキストエディタで編集できる** — VS Code / Vim でも作業できる 3. **再利用しやすい** — テンプレ化してチーム全員で同じスタイルが使える
特にエンジニアチームのアーキテクチャ図・運用フロー図・API シーケンスなどで効果を発揮します。
対応しているダイアグラム言語
・**Mermaid**: フローチャート / シーケンス図 / ER 図 / ガント / 円グラフ。Markdown 内に直接書ける万能型 ・**PlantUML**: クラス図・ユースケース図・アクティビティ図など UML 全般 ・**D2**: 2023 年登場のモダンな宣言的言語。アーキテクチャ図に強い ・**Graphviz (DOT)**: グラフ理論の老舗。ノード・エッジが多い図に ・**Structurizr DSL**: C4 モデルでソフトウェアアーキテクチャを階層化 ・**WaveDrom**: デジタル回路のタイミング波形 ・**TikZ / Vega / その他 10 種類** も対応
PNG / SVG どちらで出力すべきか
**SVG** は拡大しても劣化しないベクター画像。ドキュメントや Web ページに埋め込むなら SVG 一択です。テキスト検索もできます。
**PNG** はラスター画像。Slack や Notion のように SVG をうまく扱えないツールに貼り付けるとき、または Word / PowerPoint に埋め込むときに便利です。
本ツールは両方ともワンクリックでダウンロード可能。レンダリング後にどちらを保存するか選べます。
AI で図を自動生成したい場合
「ユーザー登録のフローを描きたい」「マイクロサービス間のシーケンスを可視化したい」のような自然言語の依頼から、AI が最適な記法を選んでコードを生成する **AI ダイアグラムメーカー** (プレミアム機能) もあります。Mermaid / PlantUML / D2 のどれを使うべきか迷う前に、まず日本語で要件を入力してみてください。