システム構成図やER図を作成するたびに、ブラウザでdraw.ioを開くのは少し面倒。
VS CodeやCursorの拡張機能「Draw.io Integration」を使えば、エディタ内で図を作成・編集できる。さらに、作成した図をソースコードと一緒にGitで管理できる。
Draw.io Integrationとは
Draw.io Integrationは、図の作成ツール「draw.io（diagrams.net）」をVS Code内で使用できる非公式の拡張機能。
VS Codeだけでなく、Cursorでも利用できる。
主な機能は以下のとおり。
| 機能 | 内容 |
|---|---|
| 図の作成・編集 | エディタ内でフローチャートやER図などを作成 |
| Git管理 |
.drawio ファイルをリポジトリで管理 |
| オフライン対応 | インターネット接続なしでも編集可能 |
| SVG・PNG対応 | 画像として表示できる形式で保存・再編集 |
| AI連携 | AIから図のXMLを生成・変更できる |
| テーマ切り替え | エディタの外観を変更できる |
インストール方法
VS CodeまたはCursorの拡張機能画面を開き、Draw.io Integration を検索する。
以下の拡張機能をインストール。
- 拡張機能名：Draw.io Integration
- 開発者：hediet
- 拡張機能ID：
hediet.vscode-drawio
コマンドラインからインストールする場合は以下。
code --install-extension hediet.vscode-drawio
※ code コマンドが利用できるVS Code環境の場合。
図を作成する
インストール後、以下のようなファイルを新規作成する。
docs/
└── architecture.drawio
作成した architecture.drawio を開くと、Draw.ioの編集画面が表示される。
図形を配置し、線で接続するだけで構成図を作成できる。
例えば、Webアプリケーションのシステム構成図であれば、以下のような関係を表現できる。
この図はMermaidによる表現だが、Draw.io Integrationでは各要素を図形として自由に配置できる。
図形の位置、サイズ、色、接続線などもGUIで編集可能。
保存形式の違い
Draw.io Integrationでは、複数のファイル形式を扱える。
| 拡張子 | 特徴 |
|---|---|
.drawio |
XML形式。Gitでの差分確認やAI編集に適している |
.drawio.svg |
SVG画像として表示でき、Draw.ioで再編集可能 |
.drawio.png |
PNG画像として表示でき、Draw.ioで再編集可能 |
.dio |
.drawio と同様に扱える |
特に使いやすいのが .drawio.svg。
SVG画像として利用できるため、GitHubのREADMEにもそのまま埋め込める。
通常の画像として表示できるだけでなく、ファイル内にDraw.ioの編集データも保持される。
そのため、画像を再編集する際に元のDraw.ioファイルを探す必要がない。
一方、AIによる編集やGitの差分確認を重視するなら、XMLを直接扱える .drawio が適している。
Gitで構成図を管理する
.drawio ファイルはXML形式のため、通常のソースコードと同様にGitで管理できる。
例えば、以下のようなディレクトリ構成。
project/
├── src/
│ ├── components/
│ └── api/
├── docs/
│ ├── architecture.drawio
│ ├── database.drawio
│ └── authentication.drawio
└── README.md
アプリケーションの実装と関連する図を同じリポジトリで管理できる。
構成図を変更した際も、Gitで追加・変更・削除を追跡できる。
.drawio はXML形式なのでテキスト差分を確認できる。ただし、図形の移動やレイアウト変更でもXMLの差分が発生するため、Gitの差分だけで変更内容を把握できるとは限らない。
XMLを直接編集する
Draw.io Integrationでは、図をGUIで編集するだけでなく、元のXMLを直接編集できる。
.drawio ファイルを右クリックし、Reopen Editor With... からテキストエディタを選択する。
例えば、以下は2つの図形を線で接続する最小構成のXML。
<mxfile host="app.diagrams.net">
<diagram name="Page-1">
<mxGraphModel>
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell
id="frontend"
value="Frontend"
style="rounded=1;whiteSpace=wrap;html=1;"
vertex="1"
parent="1">
<mxGeometry
x="40" y="80"
width="120" height="60"
as="geometry" />
</mxCell>
<mxCell
id="backend"
value="Backend API"
style="rounded=1;whiteSpace=wrap;html=1;"
vertex="1"
parent="1">
<mxGeometry
x="240" y="80"
width="120" height="60"
as="geometry" />
</mxCell>
<mxCell
id="connection"
edge="1"
source="frontend"
target="backend"
parent="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>
このXMLを .drawio ファイルとして保存すれば、Draw.io Integrationで図として開ける。
GUIとXMLを並べて表示することも可能で、XML側の変更は図にも反映される。
CursorなどのAIと組み合わせる
.drawio がXML形式であることを利用すれば、AIに構成図の作成や編集を依頼できる。
例えば、CursorのAIチャットに以下のように指示する。
docs/architecture.drawio を作成してください。
Browser → Next.js → Laravel API → MySQL の構成図にしてください。
Draw.ioで編集可能なXML形式にしてください。
AIが生成したXMLをファイルに保存し、Draw.io Integrationで開けば図として確認できる。
既存の図に対しても、次のような指示が可能。
architecture.drawio にRedisを追加し、Laravel APIからRedisへの接続線を追加してください。既存の図形は維持してください。
AIにXMLを編集させた後、GUIで配置やデザインを調整できる。
AIが生成したXMLに誤りがあると、Draw.ioで正常に表示できない場合がある。生成後は図を開いて、接続関係やレイアウトを確認する必要がある。
なお、これはAIがXMLファイルを直接編集する方法であり、Draw.io専用のMCPサーバーを使用する方法とは別の仕組み。