📐
設計図パターン比較
SVG, Mermaid, draw.io, D2, Excalidraw — どの方式で描くか
設計図を描く方式は大きく3種類に分かれます。コードベース（Mermaid, D2）はGit diffとCI/CD自動化が可能で、GUIベース（draw.io, Excalidraw）は非開発者でも編集しやすく、直接レンダリング（SVG/HTML+CSS）は完全な制御が可能ですが作成コストが高いです。
構造ダイアグラム
3つのアプローチ
📝
コードベース
Diagrams as Code
Mermaid.js
D2
PlantUML
🖱️
GUIベース
ドラッグ&ドロップ
draw.io
Excalidraw
Lucidchart / Figma
🎨
直接レンダリング
SVG / HTML+CSS
SVG直接記述
HTML + Tailwind CSS
(app56はこの方式!)
ツール別詳細比較
| ツール | 方式 | Git Diff | レイアウト制御 | 非開発者 | CI/CD自動化 |
|---|---|---|---|---|---|
| Mermaid.js | テキスト | ✓ | 弱い | 普通 | ✓ |
| D2 | テキスト | ✓ | 強い | 普通 | ✓ |
| PlantUML | テキスト | ✓ | 普通 | 難しい | ✓ |
| draw.io | GUI (XML) | XML | 完全 | ✓ | 制限的 |
| Excalidraw | GUI (JSON) | JSON | 完全 | ✓ | ✗ |
| SVG直接 | コード | ✓ | 完全 | 不可 | 手動 |
| HTML+CSS | コード | ✓ | 完全 | 不可 | 手動 |
同じ図、異なる文法
🧜
Mermaid.js
GitHub READMEで直接表示
graph LR
A[Client] -->|HTTP| B[Load Balancer]
B --> C[App Server 1]
B --> D[App Server 2]
C --> E[(Database)]
D --> E
💎
D2
レイアウト制御 + テーマ
client: Client {shape: rectangle}
lb: Load Balancer {shape: hexagon}
app1: App Server 1
app2: App Server 2
db: Database {shape: cylinder}
client -> lb: HTTP
lb -> app1
lb -> app2
app1 -> db
app2 -> db
🖼️
draw.io
GUI + XML保存
ドラッグ
→
ドロップ
→
接続
.drawio (XML) / .svg / .png エクスポート
VS Code拡張でエディタから直接編集!
✏️
Excalidraw
手書きスタイル
Client
--->
Server
--->
DB
JSON保存 → Git管理可能
「未完成感」→ 初期議論に最適
どのツールを使う？ — 選択ガイド
GitHub READMEに<br>直接表示？
→
Mermaid.js
複雑なレイアウト<br>+ Git管理？
→
D2
非開発者も<br>編集必要？
→
draw.io
チームブレスト<br>/ 初期設計？
→
Excalidraw
Webアプリ内<br>インタラクティブ？
→
SVG / HTML+CSS
AIに<br>自動生成？
→
Mermaid / D2
Claude/GPTが即座に生成
Gitワークフロー比較
コードベース（Mermaid/D2）
# PR diffで変更点を確認
- A -->|HTTP| B
+ A -->|gRPC| B
レビュアーが変更意図を即座に把握
バイナリ（PNG/Figma）
Binary files a/diagram.png
and b/diagram.png differ
何が変わったか分からない
draw.io (XML)
<!-- diff可能だが -->
<mxCell value="Server"
x="340" y="180"/>
diff可能だが読みにくい
おすすめ:
公式文書 = draw.io, コードレビュー = Mermaid/D2, ブレスト = Excalidraw, Webアプリ内 = HTML+CSS
動作フロー
1
SVG直接記述: <svg>タグで図形・線・テキストを直接コーディング。完全なピクセル制御だが作成コスト最大
2
HTML+CSS（app56方式）: Tailwindボックス + flexbox/gridで図を構成。レスポンシブ対応、コードと同じスタック
3
Mermaid.js: マークダウンのコードブロック内にテキストで宣言 → 自動レンダリング。GitHub/GitLab READMEで直接表示
4
D2: 宣言型ダイアグラム言語。Mermaidより優れたレイアウト制御とテーマ/スタイリング
5
draw.io（diagrams.net）: GUIエディタでドラッグ&ドロップ。XML保存でGit管理可能。VS Code拡張対応
6
Excalidraw: 手書きスタイルのホワイトボード。ブレインストーミング・初期設計に最適。JSON保存でGit管理可能
メリット
- ✓ コードベース: Git diff可能、PRレビューで変更点を確認
- ✓ コードベース: CI/CDで自動レンダリング（mermaid-cli, d2）
- ✓ GUIベース: 非開発者でも編集可能
- ✓ draw.io: XML保存でGit管理可能 + VS Code拡張
- ✓ Excalidraw: 手書きスタイルで「未完成感」— 初期議論に最適
- ✓ AI時代: ChatGPT/ClaudeがMermaid/D2コードを即座に生成
デメリット
- ✗ コードベース: 複雑なレイアウト制御が困難（自動配置に依存）
- ✗ Mermaid: 大規模ダイアグラムで可読性低下
- ✗ GUIベース: バイナリファイルはGit diff不可（Lucidchart, Figmaなど）
- ✗ SVG直接記述: 作成コストが高く保守が困難
- ✗ draw.io XML: 手動編集時に壊れやすい
- ✗ Excalidraw: 公式ドキュメントにはカジュアルすぎる
ユースケース
技術ブログ / ドキュメント（Mermaid → GitHub README）
ADR（Architecture Decision Record）添付（D2, Mermaid）
構成図公式ドキュメント（draw.io → SVGエクスポート）
チームブレインストーミング / 初期設計（Excalidraw）
Webアプリ内インタラクティブ図（SVG/HTML+CSS）
CI/CD自動生成（Mermaid CLI, D2 CLI → PNG/SVG）