GitHub Copilot×drawio MCPでSAMテンプレートからAWS構成図を自動生成してみた

はじめに

draw.ioのMCP（Model Context Protocol）サーバーがリリースされたので、これを使ってSAMテンプレートから自動的にAWS構成図を生成してみました。

https://x.com/drawio/status/2020918870375370825https://x.com/drawio/status/2020918870375370825

MCPとは？

MCP（Model Context Protocol）は、Anthropicが提唱するAIアシスタントと外部ツールを接続するための標準プロトコルです。GitHub CopilotもMCPに対応しており、MCPサーバーを通じて様々な外部サービスやツールと連携できます。

今回使用するdrawio MCPサーバーは、AIエージェントがDraw.ioの図を直接作成・編集できるようにするものです。

環境構築

1. VS Code拡張機能のインストール

まず、VS CodeにDraw.io Integration拡張機能をインストールします。

1. VS Codeの拡張機能タブを開く（Ctrl/Cmd + Shift + X）
2. "Draw.io Integration"を検索
3. "hediet.vscode-drawio"をインストール
   

または、以下のリンクから直接インストール：
https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawiohttps://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

この拡張機能により、VS Code内で.drawioファイルを直接編集・プレビューできるようになります。

2. drawio MCPサーバーの準備

drawio MCPサーバーは、以下の2つの方法で利用できます：

方法A：npxで実行（推奨）

VS Codeの設定（settings.json）に以下を追加：

{
  "github.copilot.chat.mcp.servers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "@drawio/mcp"]
    }
  }
}

-yフラグにより、確認なしで自動的にパッケージがダウンロード・実行されます。

方法B：グローバルインストール

npm install -g @drawio/mcp

VS Codeの設定（settings.json）には以下を追加：

{
  "github.copilot.chat.mcp.servers": {
    "drawio": {
      "command": "drawio-mcp"
    }
  }
}

3. 動作確認

Copilot Chatを開き、チャットウィンドウの[Configure Tools...]でdrawioサーバーのツールが利用可能になっていることを確認します。

SAMテンプレートの準備

今回は例として、以下のようなサーバーレスアプリケーションのSAMテンプレートを想定しています：

• API Gateway
• Lambda関数（複数）
• DynamoDB
• S3バケット
• CloudWatch Logs
• IAMロール

構成図の自動生成

プロンプトの工夫

GitHub Copilot Chatに対して、以下のような指示を出します：

このSAMテンプレートを分析して、AWS構成図をdraw.ioで作成してください。

要件：
1. AWSの公式アイコンを使用すること
2. リソース間の関係性を矢印で明確に表現すること
3. VPCやセキュリティグループがあれば、それらのグループ化も表現すること
4. データフローの方向が分かりやすいレイアウトにすること
5. 日本語でラベルを付けること
6. .drawioファイルを出力すること

MCPサーバーのツールが使われています：

生成結果

数秒で、以下のような要素を含むAWS構成図が生成されます：

• すべてのAWSリソースが適切なアイコンで表現される
• Lambda関数とAPI Gatewayの接続関係
• DynamoDBへのアクセスパターン
• S3バケットの用途
• CloudWatch Logsへのログ出力
• IAMロールとリソースの関連付け

生成された.drawioファイルは、VS Code内で直接開いて確認できます。Draw.io Integration拡張機能により、エディタ内で図が視覚的にレンダリングされ、必要に応じて手動での微調整も可能です。
少し、文字や矢印の重なりが気になる以外はほぼ想定通りのAWS構成図になっています。

実用上のTips

1. VS Code内での即座の確認と編集

• リアルタイムプレビュー：生成された.drawioファイルをクリックするだけで、VS Code内で図が表示される
• 手動調整：GitHub Copilotが生成した図をベースに、細かい位置調整や色の変更を手動で行える
• エクスポート：拡張機能から直接PNG、SVG、PDFなどの形式にエクスポート可能
• サイドバイサイド表示：SAMテンプレートと構成図を並べて表示し、整合性を確認しながら作業できる

2. 複雑なテンプレートは分割して生成

まず全体のアーキテクチャ図を作成してください。
次に、API層の詳細図を別途作成してください。

3. バージョン管理との連携

VS Code内で作業することで、以下のような効率的なワークフローが実現できます：

1. SAMテンプレートを編集
2. GitHub Copilotで構成図を生成
3. 同じVS Code内で図を確認・微調整
4. Git統合機能でテンプレートと図を一緒にコミット

4. 段階的なブラッシュアップ

1回目：基本構成の生成
2回目：データフローの追加
3回目：セキュリティグループやIAMポリシーの可視化
4回目：モニタリング・アラート設定の追記

メリットと活用シーン

メリット

✅ 時間の大幅な削減：構成図作成時間を90%以上削減
✅ IaCとの完全な一致：テンプレートから直接生成するため、乖離がない
✅ 継続的な更新：テンプレート変更時に即座に図を更新可能
✅ シームレスな開発体験：VS Code内で開発から図の生成・確認まで完結
✅ 手動調整の柔軟性：AI生成をベースに、Draw.io拡張機能で細かい調整が可能

活用シーン

• 🚀 新規プロジェクトの設計書作成
• 📝 既存システムのドキュメント整備
• 🔄 CI/CDパイプラインでの自動ドキュメント生成
• 👥 チームメンバーへのアーキテクチャ説明
• 📊 クライアントへの提案資料作成

まとめ

drawio MCPサーバーとVS CodeのDraw.io Integration拡張機能を組み合わせることで、SAMテンプレートからAWS構成図を自動生成できるようになりました。これにより：

1. ドキュメント作成の効率化：手動作成と比べて圧倒的に速い
2. 品質の向上：IaCとの完全な一致を保証
3. メンテナンス性の向上：テンプレート変更に即座に追従
4. 開発体験の向上：VS Code内で開発からドキュメント作成まで完結

特に、VS Code内ですべてが完結する点は大きなメリットです：

• コードを書く
• GitHub Copilotで図を生成
• 同じエディタで図を確認・編集
• Gitで一緒に管理

AWS環境のドキュメント整備に課題を感じている方、特にVS Codeをメインエディタとして使っている方は、ぜひ試してみてください。

参考リンク

• drawio MCP Server（npm）
• Draw.io Integration - VS Code Extension
• Model Context Protocol Documentation
• GitHub Copilot Documentation
• AWS SAM Documentation
• draw.io