AI ワークフロー

2026 AI Diagram Generator比較

公開日 2026年08月14日

Kvmjet · 約 15 分で読めます

diagram-designの公式リポジトリは、27種類のビジュアルタイプを案内しています。(公式リポジトリ)

症状：README、設計書、ブログ、会議資料で同じ図を何度も作り直している。
最短解決：技術文書の自動生成はdiagram-design、テキスト管理と共同編集はMermaid Chart、自由な手書き調整はExcalidrawを選んでください。

この記事は、2026年8月14日時点で各プロジェクトの公式リポジトリと公式ドキュメントを確認して作成しています。機能や料金体系が変わった場合は、再確認が必要です。

この記事が向いている人

README、技術ブログ、設計書のために構成図やフロー図を作る開発者向けです。図をコードリポジトリで管理したいチームや、Claude Codeを使った図解ワークフローを検討している技術責任者にも適しています。

単に「AIで絵を作りたい」だけなら、3製品の比較軸が合わない可能性があります。ここでは画像の見栄えだけでなく、後から修正できるか、差分を追えるか、納品先へ適切な形式で渡せるかを重視します。

出力形式で決める3つのルート

最初に確認すべきなのは、機能数ではなく最終納品物です。3製品は似た図を作れても、内部のデータ構造と編集方法が大きく異なります。

HTML／SVGルート：diagram-design
Claude Codeのスキルとして動作し、自己完結型のHTMLとSVGを生成します。
外部ランタイムやビルド工程に依存しない出力を作りやすく、ブログ、技術文書、スライド用素材に向いています。
PNGやSVGへの書き出しにも対応しています。公式説明では、PNG出力にPlaywrightとChromiumの導入が必要です。(diagram-designの公式リポジトリ)
テキスト構文ルート：Mermaid Chart
自然言語からMermaid構文を生成し、その後にテキストエディターで細部を修正できます。
.mmd形式のソースを保存できるため、Gitでレビューしやすい点が強みです。
PNG、SVG、Mermaidコードとしての書き出しに対応しています。(Mermaid Chart公式AIガイド)
自由キャンバスルート：Excalidraw
無限キャンバス上で図形、矢印、手書き線を直接配置します。
PNG、SVG、クリップボード、.excalidraw JSONへの出力に対応しています。
開発者向けの公式リポジトリでは、リアルタイム共同編集、エンドツーエンド暗号化、共有リンクも案内されています。(Excalidraw公式リポジトリ)

この違いから、Claude Codeで設計書を連続生成するならdiagram-design、構文をレビューしながら保守するならMermaid Chart、会議中に発想を広げるならExcalidrawが基本判断になります。

生成品質と修正コスト

diagram-designの位置付け

diagram-designは、単純なボックスと矢印だけでなく、アーキテクチャ、シーケンス、状態遷移、ER図、タイムライン、スイムレーン、四象限など、用途別の視覚形式を選ぶ設計です。公式リポジトリには、静的HTMLを標準出力とし、必要に応じてアニメーションを使える構成も記載されています。

技術ブログでは、図そのものだけでなく見出し、注釈、要約カードまで一体化したい場面があります。その場合、自己完結型HTMLを残せるdiagram-designは、画像生成だけのツールより修正経路を確保しやすい選択です。

一方、生成結果をそのまま採用してはいけません。実際のサービス名、通信方向、認証境界、失敗時の経路は、必ずソースコードや設計書と照合してください。

Mermaid Chartの位置付け

Mermaid Chartは、自然言語から図表構文を作り、会話形式で修正できます。公式ガイドでも、生成後にテキストエディターへ切り替えて正確な修正を行う流れが説明されています。

この方式は、技術文書との相性が良好です。図を変更した理由をコード差分として確認でき、レビュー担当者も視覚エディターを開かずに変更点を追えます。

ただし、ノードが増えるほど自動レイアウトの結果を確認する作業が必要です。複雑な依存関係を一度で美しく配置することより、構造を正確なテキストとして残すことを優先するツールです。

Excalidrawの位置付け

Excalidrawは、AI自動生成専用ツールとして評価するより、自由なキャンバスと手動編集の強さで見るべきです。公式のオープンソースエディターは、図形、矢印、画像、図形ライブラリ、PNG、SVG、JSON出力を備えています。

ExcalidrawでAIによるフロー図作成を行うことは可能ですが、公式オープンソースエディターの中心機能はキャンバス編集です。AI生成の可否や方法は、接続する外部エージェントや拡張機能によって変わるため、標準機能と追加ワークフローを混同しないでください。

注意：AIが生成した図は、正しい配置と正しい設計を保証しません。特に認証、決済、個人情報、障害経路を含む図は、生成後に人が関係と境界を確認してください。

編集性とチーム運用

diagram-designとMermaid Chartは技術文書にどちらが向いているか

コードリポジトリに置くことを最優先するなら、Mermaid Chartが扱いやすいです。構文が一次ソースになるため、プルリクエストで変更理由をレビューでき、Markdown内の図も更新しやすくなります。

一方、完成した図をWebページへ埋め込み、見た目をブランドに合わせたい場合はdiagram-designが有利です。HTML、SVG、PNGという納品形式を使い分けられ、Mermaidランタイムを読者側で動かす必要がない構成も選べます。

Mermaid Chartの長所
構文をGitで管理しやすい。
図とコードの対応関係を追いやすい。
Mermaid構文に慣れたチームなら移行しやすい。
Mermaid Chartの短所
最終レイアウトの細部を手動で整える場面がある。
オンラインの共同編集機能と、オープンソースのMermaid描画機能は同一ではない。
共有権限やリアルタイム編集は契約プランの確認が必要です。プランによって閲覧、コメント、同時編集の扱いが異なります。(Mermaid Chart公式共有ガイド)
diagram-designの長所
自己完結型のHTML、SVGを成果物として残せる。
Claude Codeのスキルと組み合わせて、設計文書から図を生成しやすい。
既存のMermaidやdraw.ioの内容を別形式へ描き直す機能も案内されています。
diagram-designの短所
チーム全員が同じスキル、テンプレート、出力ルールを共有する必要がある。
HTMLやSVGの見た目は編集できても、Mermaidのような単純な構文差分とは異なる。
PNGだけを保存すると、後からの構造修正が難しくなります。

チーム協業はMermaid ChartとExcalidrawのどちらが適しているか

図の内容をレビューし、承認履歴を残すならMermaid Chartが適しています。編集権限、閲覧リンク、コメント、SVGリンク、同時編集の扱いを確認できるため、レビューを伴うチーム運用に向いています。

会議中に複数人が線を引き、付箋のように考えを並べるならExcalidrawが自然です。自由な配置を維持しやすく、議論の初期段階で完成度より発想量を優先できます。

ただし、白板でまとまった図を、そのまま正式なアーキテクチャ文書にする運用は避けた方が安全です。会議後にMermaid構文またはHTML／SVGへ整理し、決定事項と未確定事項を分離してください。

Claude Codeと自動化環境

Claude Codeでdiagram-designを使う場合は、プロジェクトまたは個人用のスキル領域へ配置し、SKILL.mdを読み込める状態にします。Claude Code公式ドキュメントでは、スキルは再利用可能な指示と補助ファイルを持つディレクトリとして管理でき、プロジェクト単位の.claude/skills/にも配置できると説明されています。(Claude Code公式スキルガイド)

導入から納品までは、次の順番で進めてください。

[ ] 図の納品先を、README、Webページ、スライド、会議用白板のいずれかに決める。
[ ] 一次ソースを、HTML／SVG、Mermaid構文、Excalidraw JSONのどれにするか決める。
[ ] 図に含めるコンポーネント、関係、方向、境界、例外経路を文章で整理する。
[ ] Claude Code、Mermaid Chart、Excalidrawのいずれかで初稿を生成する。
[ ] サービス名、矢印の向き、データの流れ、認証や権限の境界を人が検証する。
[ ] SVGまたはPNGへ書き出し、実際のREADME、ブログ、スライドへ埋め込んで表示を確認する。
[ ] 一次ソースと生成物を分けて保存し、次回の修正方法をREADMEに記録する。

ブラウザー上のレンダリング、Playwrightを使った書き出し、複数図の一括生成まで行う場合は、ローカル環境の権限、フォント、Chromium、ファイル保存先をそろえる必要があります。導入前に、Kvmjetのインフラストラクチャ情報とヘルプセンターで利用環境を確認しておくと、作業場所を決めやすくなります。

2026 AI Diagram Generatorの用途別ランキング

1位：コードリポジトリの技術文書

第一候補：Mermaid Chart
代替候補：diagram-design

図の構造をコードとしてレビューし、READMEや設計書と一緒に更新したいならMermaid Chartです。完成デザインやSVG納品まで自動化したい場合はdiagram-designへ切り替えます。

2位：技術ブログとドキュメント配図

第一候補：diagram-design
代替候補：Mermaid Chart

記事の読者に合わせて情報量、配色、レイアウトを調整するならdiagram-designです。ブログ内で図の再生成を頻繁に行い、構文の追跡を重視する場合はMermaid Chartを選びます。

3位：協業ホワイトボード

第一候補：Excalidraw
代替候補：Mermaid Chart

自由な配置、手書き風の表現、会議中の同時編集を優先するならExcalidrawです。議論後に正式な技術文書へ変換する必要がある場合は、Mermaid Chartへ整理し直す運用が適しています。

4位：非技術者向けの説明資料

第一候補：diagram-design
代替候補：Excalidraw

経営会議や顧客説明では、構文の正しさよりも視線誘導、要約、情報量の制御が重要です。手描きの親しみやすさを出したい場合だけExcalidrawを優先してください。

現行のオンライン図解サービスだけで完結させると、契約プランによる共有制限、ブラウザー依存の編集、書き出し環境の差、チーム内の権限管理が問題になりやすくなります。反対に、Mac環境を毎回自前で用意すると、端末購入、設定、更新、短期案件後の遊休コストが発生します。

Claude Code、ブラウザー描画、SVGとPNGの一括書き出しを短期間だけ試すなら、KvmjetのMac環境をレンタルして作業場所を分離する方が、導入判断と撤収を進めやすいケースがあります。用途が長期の常時稼働や物理インターフェース必須の開発なら、自社端末の方が適していますが、短期の検証や技術記事制作ではMacノードの利用案内を確認してから比較するとよいでしょう。

最終的な選択は、単一の総合点では決まりません。技術文書の自動化はdiagram-design、テキスト構文とレビューはMermaid Chart、自由な白板と手動調整はExcalidrawという分け方が、2026年8月14日時点でもっとも実務に落とし込みやすい判断です。