draw.io (diagrams.net) はブラウザや VS Code 拡張でフローチャート・ネットワーク図・ER 図など任意の図を GUI で作成できるオープンソースのツールです。
このリポジトリでは図の作成に PlantUML・Mermaid・draw.io の 3 種類のツールを使用できます。意味論を明確に表現しやすいことから PlantUML を第 1 選択、次いで Mermaid を推奨しており、draw.io は UML の意味論で表現しにくい任意のレイアウトの図が必要な場合にのみ使用します。
Pandoc で扱うには .drawio.svg 形式での保存を推奨します。この形式は draw.io のデータを含む SVG ファイルで、Pandoc が通常の SVG 画像として HTML に変換できるほか、draw.io で再編集する際も元のデータが保持されています。
| ツール | 特徴 | 推奨ケース |
|---|---|---|
| PlantUML | UML の意味論を厳密に表現できる | シーケンス図・クラス図・コンポーネント図など (第 1 選択) |
| Mermaid | GitHub でネイティブ表示・記法が簡潔 | フロー図など、GitHub 上でのプレビューを重視する場合 (第 2 選択) |
| draw.io | GUI で自由に作図できる | UML の意味論で表現しにくい任意のレイアウトの図 (第 3 選択) |
| PNG/SVG など | 既存の画像をそのまま利用できる | 外部ツールで作成済みの図・スクリーンショットなど (第 4 選択) |
.drawio.svg 形式で保存し、Markdown から画像として参照します:
draw.io での保存手順:
*.drawio.svg として保存するPandoc 変換時は通常の SVG 画像として HTML に埋め込まれます。*.drawio.svg ファイルは draw.io で再度開いて編集できるため、テキストベースの管理が難しい複雑なレイアウト図に適しています。