オープンソースダイアグラムツール比較：draw.io vs Excalidraw vs Mermaid でフロー図・ER図を作る

Lucidchart（$9/月〜）やMiroの高額プランを払い続けていませんか？オープンソースのダイアグラムツールは、企業グレードの機能を無料またはセルフホストで利用できます。

ダイアグラムツールが必要な場面

• システム設計: アーキテクチャ図・クラウドインフラ図
• データベース設計: ER図・スキーマ設計
• プロセス設計: フローチャート・業務フロー
• UI設計: ワイヤーフレーム・画面遷移図

主要3ツールの概要

draw.io（diagrams.net）

JavaScriptで作られたWebベースのダイアグラムツールで、diagrams.netとして無料で利用できます。2,000以上のシェイプライブラリを内蔵し、AWS・GCP・Azureのアーキテクチャ図を簡単に作成できます。

# draw.io デスクトップ版をセルフホスト（Docker）
docker run -it --rm \
  --name drawio \
  -p 8080:8080 -p 8443:8443 \
  jgraph/drawio

Excalidraw

Reactで書かれた手書き風スケッチUIのコラボレーションツールです。リアルタイム共同編集・エンドツーエンド暗号化・オフライン動作をサポートします。

# Excalidrawのセルフホスト
git clone https://github.com/excalidraw/excalidraw.git
cd excalidraw
npm install && npm start

# または Docker
docker run -d \
  --name excalidraw \
  -p 3000:80 \
  excalidraw/excalidraw:latest

Mermaid

Markdownに埋め込めるテキストベースのダイアグラムツールです。GitHubやNotionでネイティブサポートされ、コードとして図を管理できます。

graph TD
  A[ユーザー] -->|リクエスト| B[Nginx]
  B --> C[Next.js]
  C --> D[Supabase]
  D --> E[(PostgreSQL)]

機能比較表

比較項目	draw.io	Excalidraw	Mermaid
形式	GUI（ドラッグ&ドロップ）	GUI（手書き風）	テキスト（DSL）
リアルタイム共同編集	✅（有料版）	✅	❌
フローチャート	✅	✅	✅
ER図	✅	⚠️ 手動	✅
シーケンス図	✅	⚠️ 手動	✅
ガントチャート	✅	❌	✅
AWS/GCPアイコン	✅	❌	⚠️
GitHubネイティブ	❌	❌	✅
バージョン管理	⚠️ XMLファイル	⚠️ JSONファイル	✅ テキスト
オフライン動作	✅	✅	✅
セルフホスト	✅	✅	✅（local）
学習コスト	低い	非常に低い	中程度
ライセンス	Apache 2.0	MIT	MIT
GitHub Stars	40k+	90k+	73k+

Mermaidの主要ダイアグラム構文

フローチャート・ER図・シーケンス図・ガントチャートを1つの構文で書けます。以下はER図の例です:

erDiagram
  USERS {
    int id PK
    string name
    string email
  }
  ORDERS {
    int id PK
    int user_id FK
    decimal total
  }
  USERS ||--o{ ORDERS : places

シーケンス図は認証フローの説明に最適です:

sequenceDiagram
  actor User
  User->>API: POST /auth/login
  API->>DB: SELECT user WHERE email=?
  DB-->>API: user record
  API-->>User: 200 OK + JWT token

GitHubとの統合

GitHubのMarkdown（README・PR・Issue）でMermaidはそのままレンダリングされます。コードブロックに mermaid を指定するだけで、GitHubが自動的にSVG図として表示してくれます。

draw.ioをVS Codeで使うには、draw.io VS Code拡張をインストールして .drawio ファイルをリポジトリに置きます。PRレビューで設計変更も確認可能です。

デザイン・UX関連ツールはデザインカテゴリ（/categories/design）で一覧でき、開発者向けツール全般はDevOpsカテゴリ（/categories/devops）からも探せます。

FAQ

Q. MermaidはExcalidrawのような視覚的に美しい図が作れますか？

A. Mermaidのデフォルトスタイルはシンプルですが、テーマやスタイルクラスでカスタマイズできます。ただし手書き風の温かみや自由なレイアウトはExcalidrawの方が優れています。技術仕様書・PRのドキュメント化ならMermaid、プレゼン・ワークショップ用ならExcalidrawという使い分けがお勧めです。

Q. draw.ioのファイルをGitで管理するとコンフリクトが怖いのですが？

A. draw.ioは .drawio.svg（SVGにXMLを埋め込む形式）で保存できます。GitHub上でプレビュー表示されるうえ、テキストdiffも取れます。複数人で同時編集する場合はExcalidrawのリアルタイム共同編集機能の方が向いています。

Q. Mermaidで書いた図をエクスポートするにはどうすればいいですか？

A. CLI ツール @mermaid-js/mermaid-cli（mmdc）を使えばターミナルから PNG/SVG/PDF に変換できます: mmdc -i diagram.mmd -o diagram.svg。GitHub ActionsでCI/CDに組み込んで自動でSVGを生成するパイプラインも構築できます。

Q. チームでリアルタイムに共同編集できるオープンソースツールはありますか？

A. Excalidrawは無料でリアルタイム共同編集をサポートしています（ランダムURLをシェアするだけ）。完全セルフホストの場合、excalidraw-room（WebSocketサーバー）をDockerで立てることで、プライベートなリアルタイム共同編集環境を構築できます。

Q. AWS・Azure・GCPのアーキテクチャ図を描くには何が最適ですか？

A. draw.ioが最適です。AWS・Azure・GCPの公式アイコンライブラリを内蔵しており、クラウドアーキテクチャ図を標準的なアイコンで描けます。File → Shapes → Networking でAWSシェイプライブラリを有効にするだけで使えます。

まとめ

ユースケース	推奨ツール
コードとしてバージョン管理	Mermaid
リアルタイム共同スケッチ	Excalidraw
本格的なアーキテクチャ図	draw.io
GitHubのREADMEに埋め込む	Mermaid

関連外部リソース

• draw.io公式サイト↗
• Excalidraw GitHubリポジトリ↗
• Mermaid公式ドキュメント↗
• GitHubのMermaidサポート発表↗