Cursor + draw.io + GitによるAWSインフラ構成図の運用管理

2026 1/05

2026年1月5日 2026年1月5日

概要

あるプロジェクトにおいて、Backlog上の設計書をMarkdown化し、Gitで管理する取り組みを進めています。
あわせて、将来的にAIを活用しやすい形に整備することも目的としています。

その過程でdraw.ioで作成しているAWSのインフラ構成図を、設計書と同様に管理できないかと検討し、Cursor・draw.io・Gitを組み合わせた運用にたどり着きました。

draw.io公式サイト：
https://www.drawio.com

準備

Cursor（VS Code可）
Draw.io Integration（draw.io アドオン）

drawioファイルの生データ（XML）

Draw.io Integrationアドオン導入後

Draw.io Integrationを導入することで、Cursor（VS Code）上から構成図の作成・編集が可能になります。
ファイルの差分も検知できるため、そのままコミットが行えます。

テーマ変更

PR変更履歴

作成時

変更時

`.drawio.svg`/ `.drawio.png` 形式

*.drawio.svg/*.drawio.png
*.dio.svg / *.dio.png
といった拡張子でも利用が可能です。

画像ファイルのメタデータ内にXML情報が埋め込まれているため、draw.io上でも、またはpng/svgファイルとしても同様に開くことができる
管理が1ファイルに集約することができる
ファイルサイズは大きくなる点には注意が必要

PR変更履歴

作成時

変更時

.drawio→.drawio.pngへの変換方法

単純に拡張子を変更するだけでは変換できない
Mac環境の場合、Homebrewでdraw.ioをインストールして変換を行う

#drawioをインストール
$ brew install --cask drawio

# .drawio→.drawio.png変換
$ draw.io --export --format png --output aws-architecture.drawio.png
  aws-architecture.drawio

まとめ

基本的に、Web版draw.ioで利用できる機能の多くは、上記環境下でも利用可能と考えられる
Cursor上での操作は、やや動作が重く感じられる場面があった
- もともとdraw.io自体が比較的動作の重いツールであるため、個人的には大きな問題には感じていない
構成図をGitで差分管理できることはとても便利であると感じている