GitHub Copilotでdraw.io構成図を自動生成する方法

Posted at 2025-11-03

GitHub Copilotでdraw.io構成図を自動生成する方法

はじめに

システム設計において、構成図の作成は避けて通れない作業ですが、アイコンの配置やレイアウト調整に多くの時間を費やしているのが実情です。設計レビュー直前に慌てて図を作成し、変更のたびに全体を調整する――こうした作業は本質的なエンジニアリングとは言えません。

GitHub Copilot Agentとdraw.ioのVS Code拡張機能を組み合わせることで、自然言語のプロンプトから構成図を自動生成できます。

本記事では、この手法の具体的な実装方法と、試行錯誤から得られた知見を共有します。

draw.ioとは

draw.io（diagrams.net）は、オープンソースの作図ツールで、ブラウザ版とデスクトップ版が提供されています。VS Codeの拡張機能を使用すると、エディタ内で .drawio ファイルを直接編集でき、バージョン管理との統合も容易です。

draw.ioはXML形式でデータを保存するため、GitHub CopilotのようなLLMでコード生成が可能となります。

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

完成イメージ・デモ

プロンプトに「AWS本番環境のアーキテクチャ構成図を作成」と指示すると、以下のような図が生成されます。

生成される図の特徴:

AWS 2025アイコンセット: 最新の公式アイコンを使用
Region/VPC階層: AWS標準のグループ表示
Multi-AZ構成: 2つのAvailability Zoneで完全冗長化
セキュリティ層: Shield、WAF、Security Groupの多層防御
Auto Scaling対応: ECS Auto Scaling Groupで可視化
運用管理: Systems Manager、Secrets Managerを統合
論理的な接続線: 線が重ならず、色分けで用途を区別

具体的な構成要素:

外部層: Internet/Users → Route53（DNS）→ CloudFront（CDN）→ Shield（DDoS防御）→ WAF
ネットワーク層: Region → VPC (10.0.0.0/16) → Multi-AZ (ap-northeast-1a/1c)
- Internet Gateway、NAT Gateway×2
Public Subnet: Application Load Balancer（ALB）
Private Subnet:
- コンピュート: ECS Fargate Tasks×6 (各AZ 3個ずつ、Auto Scaling Group管理)、ECR (コンテナイメージ)
- データベース: RDS PostgreSQL Multi-AZ (Primary/Standby)、RDS Proxy
- キャッシュ: ElastiCache Redis (Primary/Replica)
ストレージ: S3 (静的コンテンツ)、S3 (ログ)
管理・監視: CloudWatch、Systems Manager、Secrets Manager

前提条件

本記事は以下の環境で動作確認しています。

OS: macOS Sonoma 14.5
VS Code: 1.105.1
拡張機能: Draw.io Integration v1.6.6
LLM: GitHub Copilot Chat (Claude Sonnet 4.5)
前提知識: VS Codeの基本操作、draw.ioの基礎知識（初見でも可）

所要時間: 約15分

環境構築

1. Draw.io Integration 拡張機能のインストール

VS Code拡張機能マーケットプレイスから、または以下のコマンドでインストールします。

code --install-extension hediet.vscode-drawio

インストール後、.drawio または .drawio.svg ファイルを開くと、draw.ioエディタが起動します。

2. GitHub Copilotの有効化確認

VS Codeの右下にCopilotアイコンが表示されていることを確認します。表示されていない場合は、以下を確認してください。

GitHub Copilot拡張機能がインストールされているか
GitHub Copilotサブスクリプションが有効か
VS Codeでサインインしているか

実装手順

手順1: draw.ioファイルの作成

プロジェクトディレクトリに .drawio ファイルを作成します。

mkdir -p docs/diagrams
touch docs/diagrams/architecture.drawio

VS Codeでファイルを開くと、draw.ioエディタが起動します。

手順2: GitHub Copilot Chatでプロンプトを入力

GitHub Copilot Chatを開き、プロンプトを入力します。

初めて試す場合は、シンプルな構成から始めることをお勧めします。以下は基本的なプロンプト例です。

📝 基本プロンプト例:

@workspace architecture.drawioファイルに、以下のAWS構成図をdraw.io XML形式で作成してください：

【ネットワーク構成】
- VPC (10.0.0.0/16)
- Availability Zone A (ap-northeast-1a)
  - Public Subnet A (10.0.1.0/24)
  - Private Subnet A (10.0.10.0/24)
- Availability Zone B (ap-northeast-1c)
  - Public Subnet B (10.0.2.0/24)
  - Private Subnet B (10.0.20.0/24)

【コンポーネント配置】
- Internet側: Route53 → CloudFront → WAF
- Public Subnet: Internet Gateway、NAT Gateway (各AZ)、ALB
- Private Subnet: ECS Fargate (各AZに3つずつ)、RDS Primary/Standby、ElastiCache
- ストレージ: S3 (静的コンテンツ)、S3 (ログ)、ECR

【レイアウト要件】
- Region、VPCを大きな枠で表現
- AZを左右に配置（AZ-A: 左、AZ-B: 右）
- Public SubnetとPrivate Subnetを上下に配置
- 接続線が重ならないよう、コンポーネントを階段状に配置
- 各コンポーネント間の間隔を100px以上確保

【スタイル】
- AWS 2025アイコンセット (mxgraph.aws4.*) を使用
- Region: 薄い青緑色の枠
- VPC: 薄い緑色の枠
- Public Subnet: 薄い青色の背景
- Private Subnet: 薄い青色の背景
- Auto Scaling Group: オレンジ色の点線枠
- 接続線は色分け（外部通信: 青、内部通信: オレンジ、DB接続: 紫）
- 矢印にプロトコル名とポート番号を表示

本格的な環境構成図を生成する場合は、より詳細なプロンプトが必要です。記事末尾の「付録: 完全なdraw.io生成プロンプト」に、完全な仕様を含むプロンプトを掲載していますので、そちらを参照してください。

手順3: 生成されたXMLをファイルに適用

Copilotがdraw.io XMLを生成するので、以下の手順で適用します。

Copilotの回答からXMLコードをコピー
architecture.drawio ファイルを右クリック → 「ソースとして開く」
ファイル内容を全選択し、コピーしたXMLを貼り付け
保存（Cmd+S / Ctrl+S）

保存すると、draw.ioビューに切り替わり、図が表示されます。

試行錯誤の過程：失敗から学んだプロンプトの改善

当初は簡単なプロンプトで構成図が生成できると考えていましたが、最初の試行は完全な失敗に終わり、数回プロンプトを調整する必要がありました。この過程で、効果的なプロンプトの書き方が見えてきました。

試行1: 曖昧な指示では実用的な図にならない(失敗)

プロンプト:

AWSの構成図を作って

結果: コンポーネント名は表示されましたが、実用的ではない図が生成されました。

問題点:

AWSアイコンではなく、単純な四角形と楕円で表現されている
ネットワーク構成(VPC、サブネット、AZ)が存在しない
接続線が直線的で、実際のトラフィックフローが不明確
レイアウトが平面的で、階層構造が表現されていない
本番環境として必要なMulti-AZ構成、冗長化の概念がない

学び: 曖昧な指示ではAIも意図を理解できません。人間同士のコミュニケーションと同じで、具体性が重要だと痛感しました。コンポーネント名だけでなく、ネットワーク構成やレイアウトも明示する必要があります。

試行2: コンポーネントを列挙するが、レイアウトが崩れる

プロンプト:

以下のAWSコンポーネントでdraw.io構成図を作成：
- CloudFront
- ALB
- ECS ×3
- RDS
- ElastiCache

結果: コンポーネントは正しく生成されましたが、レイアウトが崩れていました。

問題点:

コンポーネントが重なって表示される
接続線が交差して見づらい
階層構造が表現されていない

学び: コンポーネントのリストだけでは不十分です。レイアウトの指示も必要だと分かりました。

試行3: VPCとサブネット構成を追加

ただし、試行2の構成では実際の本番環境としては不十分でした。VPC、サブネット、セキュリティグループなどのネットワーク構成が欠けていたのです。

プロンプト:

@workspace architecture.drawioに以下のAWS構成図を作成してください：

【ネットワーク構成】
- Region: ap-northeast-1 (Tokyo Region)
- VPC (10.0.0.0/16)
- Availability Zone A (ap-northeast-1a)
  - Public Subnet A (10.0.1.0/24): ALB、NAT Gateway
  - Private Subnet A (10.0.10.0/24): ECS ×3、RDS Primary
- Availability Zone B (ap-northeast-1c)
  - Public Subnet B (10.0.2.0/24): ALB、NAT Gateway
  - Private Subnet B (10.0.20.0/24): ECS ×3、RDS Standby

【外部接続】
1. Internet/Users → Route53 → CloudFront → Shield → WAF
2. WAF → Internet Gateway → ALB (Public Subnet)

【内部構成】
3. ALB → ECS Fargate (Private Subnet、各AZに3つずつ、Auto Scaling Group管理)
4. ECR → ECS (コンテナイメージのPull)
5. ECS → RDS Proxy → RDS Multi-AZ (Primary: AZ-A、Standby: AZ-B)
6. ECS → ElastiCache Redis (Primary: AZ-A、Replica: AZ-B)
7. ECS → S3 (ログ保存)
8. CloudFront → S3 (静的コンテンツ配信)

【管理・監視】
9. Systems Manager → ECS (パラメータ管理)
10. Secrets Manager → RDS Proxy (DB認証情報)
11. ALB → CloudWatch (メトリクス・ログ)

【レイアウト重要】
- キャンバスサイズ: 2400×1800px
- Region、VPCを階層的な枠で表現
- AZを左右に配置（左: AZ-A、右: AZ-B）
- 各AZ内でPublic/Privateサブネットを上下に配置
- ECSタスクを階段状に配置（線の交差を避ける）
- コンポーネント間の最小間隔: 100px以上

【スタイル】
- AWS 2025アイコンセット (mxgraph.aws4.*) を使用
- Region: 薄い青緑色の枠 (fillColor=#E6F6F7, strokeColor=#00A4A6)
- VPC: 薄い緑色の枠 (fillColor=#E9F3E6, strokeColor=#248814)
- AZ: 青色の点線枠 (strokeColor=#147EBA, dashed=1)
- Public/Private Subnet: 薄い青色 (fillColor=#E6F6F7, strokeColor=#00A4A6)
- Auto Scaling Group: オレンジ色の点線枠 (strokeColor=#D86613, dashed=1)
- 接続線の色分け:
  - 外部通信（HTTPS）: 青 (strokeColor=#0066CC)
  - 内部通信（HTTP）: オレンジ (strokeColor=#ED7100)
  - DB接続: 紫 (strokeColor=#C925D1)
  - セキュリティ: 赤 (strokeColor=#DD344C)
  - 管理・監視: ピンク (strokeColor=#E7157B)
  - ストレージ: 緑 (strokeColor=#7AA116)
- 矢印ラベルにプロトコル名とポート番号を表示
  - 例: "HTTPS:443"、"HTTP:8080"、"PostgreSQL:5432"

結果: 質が一段上がった構成図が生成されました。

学んだこと：効果的なプロンプトの5原則

ネットワーク構成を明示する: VPC、サブネット、CIDR、AZを具体的に記載
コンポーネントの配置場所を指定する: どのサブネットに何を配置するか
レイアウトの詳細を指示する: 座標、間隔、方向性、重なり回避の方法
色やスタイルを統一する: 役割ごとに色を決め、一貫性を持たせる
接続関係に詳細情報を付ける: プロトコル、ポート番号、通信方向

トラブルシューティング

実際に使用する中で遭遇した問題と、その解決策をまとめます。

問題1: Copilotがdraw.io XMLを生成してくれない

症状: Copilotが図の説明文だけを返し、XMLコードを生成しない

解決策: プロンプトの冒頭にXMLサンプルを提示します

以下の形式でdraw.io XMLを生成してください：

<mxfile host="65bd71144e">
    <diagram id="example" name="Example">
        <mxGraphModel>
            <root>
                <mxCell id="0"/>
                <mxCell id="1" parent="0"/>
                <!-- ここにコンポーネントを追加 -->
            </root>
        </mxGraphModel>
    </diagram>
</mxfile>

【構成】
...

この方法で、Copilotが確実にXML形式で返すようになりました。

問題2: コンポーネントが重なって表示される

症状: 複数のコンポーネントが同じ座標に配置され、重なって見えない

解決策: 座標の調整を明示的に指示します

コンポーネントの配置を以下のように調整してください：
- 各コンポーネント間の最小間隔: 100px
- 横方向の配置: 左から右に等間隔（X座標: 0, 200, 400, ...）
- 縦方向の配置: 層ごとにY座標を統一（第1層: 0、第2層: 200、第3層: 400）

問題3: AWSアイコンが表示されない

症状: 四角や丸などの基本図形が表示され、AWSアイコンにならない

解決策: シェイプライブラリを明示します

以下のAWS公式シェイプを使用してください：
- CloudFront: shape=mxgraph.aws4.cloudfront
- S3: shape=mxgraph.aws4.s3
- ECS: shape=mxgraph.aws4.ecs
- RDS: shape=mxgraph.aws4.rds
- ALB: shape=mxgraph.aws4.elastic_load_balancing
- ElastiCache: shape=mxgraph.aws4.elasticache

これらのシェイプ名は、AWS Architecture Iconsから取得できます。

問題4: 生成された図が複雑すぎて編集しづらい

症状: 一度に多くのコンポーネントを指定すると、図が複雑になりすぎる

解決策: 段階的にコンポーネントを追加します

まず基本的な構成（3-5コンポーネント）で図を生成
生成された図を確認し、レイアウトを調整
追加のコンポーネントを段階的に指示

先ほど生成したarchitecture.drawioに、以下のコンポーネントを追加してください：
- CloudWatch（ログ監視）をECSの右側に配置
- X-Ray（トレーシング）をECSの下に配置
- ECSからの接続線を追加

問題5: 接続線が重なって見づらい

症状: 複数のコンポーネント間の接続線が交差したり、重なったりして、何がどこに繋がっているか分からない

これは構成図を作成する上で最も頻繁に発生し、最も重要な問題です。以下の解決策を組み合わせて対応します。

解決策1: コンポーネントを階段状に配置する

【レイアウト】
コンポーネントを以下のように階段状に配置してください：
- ECS Container 1: X=300, Y=450
- ECS Container 2: X=500, Y=480 （Y座標を30pxずらす）
- ECS Container 3: X=700, Y=510 （さらに30pxずらす）
- RDS Primary: X=300, Y=680
- ElastiCache 1: X=700, Y=680

この配置により、ECS1→RDSの線とECS3→ElastiCacheの線が交差しません。

解決策2: 接続線の経路を明示的に指定する

【接続線の経路】
以下のように経路を指定してください：
- ECS1 → RDS: 直線で下に接続
- ECS2 → RDS: 一度左に曲がってから下に接続（waypoint: X=400）
- ECS3 → RDS: 大きく左に曲がってから下に接続（waypoint: X=350）
- ECS1 → Redis1: 一度右に曲がってから下に接続
- ECS2 → Redis2: 直線で下に接続
- ECS3 → Redis3: 直線で下に接続

解決策3: レイヤー分けを活用する

【レイヤー構成】
- Layer 1（最背面）: VPC、サブネット枠
- Layer 2: データベース、キャッシュへの接続線
- Layer 3: HTTP通信の接続線
- Layer 4（最前面）: コンポーネント本体

接続線を種類ごとに異なるレイヤーに配置し、重なりを視覚的に区別できるようにします。

解決策4: 接続点（アンカーポイント）を指定する

【接続点の指定】
コンポーネントの接続点を以下のように指定してください：
- ALB → ECS1: ALBの下辺中央（exitX=0.5, exitY=1）から、ECS1の上辺左寄り（entryX=0.25, entryY=0）へ
- ALB → ECS2: ALBの下辺中央（exitX=0.5, exitY=1）から、ECS2の上辺中央（entryX=0.5, entryY=0）へ
- ALB → ECS3: ALBの下辺中央（exitX=0.5, exitY=1）から、ECS3の上辺右寄り（entryX=0.75, entryY=0）へ

これにより、3本の線が扇形に広がり、重ならなくなります。

解決策5: 曲線スタイルを使用する

【接続線スタイル】
- 外部通信: 直線（edgeStyle=orthogonalEdgeStyle）
- 内部通信: 曲線（edgeStyle=curved、curved=1）
- データベース接続: ジグザグ（edgeStyle=elbowEdgeStyle）

線のスタイルを変えることで、交差していても区別しやすくなります。

動作確認

生成された構成図が正しく表示されるか確認します。

確認手順

draw.ioビューでの確認: ファイルを開き、全コンポーネントが表示されているか確認
XMLソースの確認: 「ソースとして開く」で、XMLが正しく生成されているか確認

期待される結果

すべてのコンポーネントが正しい位置に配置されている
接続線が適切に引かれ、ラベルが表示されている
色分けが指示通りに適用されている

この手法で変わったこと

この手法を導入する前後で、構成図作成の効率が向上しました。

Before（手作業）:

構成図作成: 2-3時間（アイコン選択、配置調整、接続線の引き直し）
修正: 30分/回（レイアウト全体の調整が必要）
複数パターン作成: ほぼ不可能（時間的制約）

After（Copilot）:

構成図作成: 5分（プロンプト入力とXML貼り付けのみ）
修正: 1分/回（プロンプト調整のみ）
複数パターン作成: 10分で3パターン生成可能

まとめ

本記事では、GitHub Copilot Agentを使ってdraw.io構成図を自動生成する方法を紹介しました。

ポイント:

GitHub Copilot Agentで自然言語からdraw.io構成図を生成できます
プロンプトは具体的に記述します（コンポーネント、レイアウト、スタイルを明示）
複雑な図でも、階層構造と色分けで視認性を確保できます
修正もプロンプト調整で即座に対応可能です

今後の展開:

プロンプトをテンプレート化して、チーム内で再利用
CI/CDパイプラインに組み込み、コードから自動的に構成図を生成
Terraformやクラウドテンプレートから構成図を自動生成

付録: 完全なdraw.io生成プロンプト

📝 本記事で使用したdraw.io構成図生成プロンプト全文（クリックで展開）

以下のプロンプトをGitHub Copilot Chatに入力することで、本記事で紹介したAWS本番環境アーキテクチャ図を生成できます。

@workspace architecture-production.drawioファイルに、本番環境のAWS構成図をdraw.io XML形式で作成してください。AWS 2025の最新アイコンセットを積極的に使用してください。

【要件】

## ネットワーク構成
- AWS Region: ap-northeast-1 (Tokyo Region)
  - VPC (10.0.0.0/16)
    - Availability Zone A (ap-northeast-1a)
      - Public Subnet A (10.0.1.0/24)
      - Private Subnet A (10.0.10.0/24)
    - Availability Zone B (ap-northeast-1c)
      - Public Subnet B (10.0.2.0/24)
      - Private Subnet B (10.0.20.0/24)

## コンポーネント配置

### 外部層（VPC外部）
1. Internet / Users（Internetアイコン）
2. Route 53（DNSサービス）
3. CloudFront（CDN）
4. Shield（DDoS防御）
5. WAF（Webアプリケーションファイアウォール）
6. S3 (Static Assets)（静的コンテンツ配信）
7. CloudWatch（監視・ログ収集）

### ネットワーク層
8. Internet Gateway（インターネット接続）
9. NAT Gateway A（ap-northeast-1a）
10. NAT Gateway B（ap-northeast-1c）

### Public Subnet層（各AZ）
11. Application Load Balancer（ALB、Public Subnetに跨る）

### Private Subnet層（コンピュート）
12. Auto Scaling Group A（ap-northeast-1a内）
    - ECS Fargate Task A1
    - ECS Fargate Task A2
    - ECS Fargate Task A3
13. Auto Scaling Group B（ap-northeast-1c内）
    - ECS Fargate Task B1
    - ECS Fargate Task B2
    - ECS Fargate Task B3
14. Elastic Container Registry（ECR、コンテナイメージレジストリ）

### Private Subnet層（データベース）
15. RDS Proxy（コネクションプーリング）
16. RDS PostgreSQL（Primary、ap-northeast-1a）
17. RDS PostgreSQL（Standby、ap-northeast-1c）
18. ElastiCache Redis（Primary、ap-northeast-1a）
19. ElastiCache Redis（Replica、ap-northeast-1c）

### ストレージ・運用管理
20. S3 (Logs)（アプリケーションログ保存）
21. Systems Manager（パラメータストア、セッションマネージャー）
22. Secrets Manager（データベース認証情報管理）

## 接続関係とラベル

### 外部からの流入
- Internet → Route 53: "DNS Query"
- Route 53 → CloudFront: "HTTPS:443"
- CloudFront → WAF: "Security Check"（赤色、strokeColor=#DD344C）
- Shield → CloudFront: "DDoS Protection"（破線、赤色）
- CloudFront → S3 Static: "Static Content"（破線、緑色、strokeColor=#7AA116）
- Internet → Internet Gateway: "HTTPS:443"（青色、strokeColor=#0066CC）
- WAF → Internet Gateway: "HTTPS:443"（青色）

### 負荷分散
- Internet Gateway → ALB: "HTTPS:443"（青色、strokeWidth=2.5）
- ALB → ECS Fargate Task A1: "HTTP:8080"（オレンジ色、strokeColor=#ED7100）
- ALB → ECS Fargate Task A2: "HTTP:8080"（オレンジ色）
- ALB → ECS Fargate Task A3: "HTTP:8080"（オレンジ色）
- ALB → ECS Fargate Task B1: "HTTP:8080"（オレンジ色）
- ALB → ECS Fargate Task B2: "HTTP:8080"（オレンジ色）
- ALB → ECS Fargate Task B3: "HTTP:8080"（オレンジ色）

### コンテナイメージ管理
- ECR → ECS Fargate Task A2: "Pull Container Images"（破線、オレンジ色）

### データベース接続
- ECS Fargate Task A2 → RDS Proxy: "PostgreSQL:5432"（紫色、strokeColor=#C925D1、strokeWidth=2.5）
- RDS Proxy → RDS Primary: "Connection Pool"（紫色）
- RDS Primary → RDS Standby: "Synchronous Replication"（破線、紫色）

### キャッシュ接続
- ECS Fargate Task A2 → ElastiCache Redis A: "Redis:6379"（紫色）
- ECS Fargate Task B2 → ElastiCache Redis B: "Redis:6379"（紫色）
- ElastiCache Redis A → ElastiCache Redis B: "Replication"（破線、紫色）

### ログ・監視
- ECS Fargate Task B3 → S3 Logs: "Application Logs"（破線、緑色）
- ALB → CloudWatch: "Metrics & Logs"（破線、ピンク色、strokeColor=#E7157B）

### 運用管理
- Systems Manager → ECS Fargate Task A2: "Configuration"（破線、ピンク色）
- Secrets Manager → RDS Proxy: "DB Credentials"（破線、赤色）

## レイアウト要件

### キャンバスサイズ
- 幅: 2400px
- 高さ: 1800px

### コンポーネント配置座標（重要！線が交差しないよう精密に配置）

#### 外部層（Y座標: 40-180）
- Internet: X=1140, Y=40, width=80, height=80
- Route 53: X=360, Y=80, width=78, height=78
- CloudFront: X=620, Y=80, width=78, height=78
- Shield: X=980, Y=40, width=60, height=60
- WAF: X=860, Y=80, width=78, height=78
- S3 Static: X=1940, Y=80, width=78, height=78
- CloudWatch: X=2180, Y=80, width=78, height=78

#### Region（Y座標: 180-1720）
- Region Container: X=40, Y=180, width=2300, height=1540

#### VPC（Y座標: 260-1660）
- VPC Container: X=80, Y=260, width=2200, height=1400

#### Availability Zone A（X座標: 120-1120）
- AZ-A Container: X=120, Y=340, width=1000, height=1240
- Public Subnet A: X=160, Y=400, width=920, height=380
- Private Subnet A: X=160, Y=840, width=920, height=680

#### Availability Zone B（X座標: 1200-2200）
- AZ-B Container: X=1200, Y=340, width=1000, height=1240
- Public Subnet B: X=1240, Y=400, width=920, height=380
- Private Subnet B: X=1240, Y=840, width=920, height=680

#### ネットワーク層
- Internet Gateway: X=1090, Y=560, width=78, height=78（Regionの下、VPCの上）
- NAT Gateway A: X=320, Y=794, width=68, height=68（Public Subnet A内）
- NAT Gateway B: X=1400, Y=794, width=68, height=68（Public Subnet B内）
- ALB: X=1090, Y=680, width=78, height=78（Public Subnet中央）

#### コンピュート層（Private Subnet内、階段状配置で線の重複回避）
- Auto Scaling Group A: X=280, Y=1140, width=660, height=360
  - ECS Task A1: X=380, Y=1220, width=68, height=68
  - ECS Task A2: X=600, Y=1280, width=68, height=68
  - ECS Task A3: X=810, Y=1250, width=68, height=68
- Auto Scaling Group B: X=1360, Y=1140, width=660, height=360
  - ECS Task B1: X=1460, Y=1220, width=68, height=68
  - ECS Task B2: X=1680, Y=1280, width=68, height=68
  - ECS Task B3: X=1890, Y=1250, width=68, height=68
- ECR: X=1090, Y=1260, width=68, height=68（中央配置）

#### データベース層（Private Subnet内、最下層）
- RDS Proxy: X=1090, Y=1460, width=68, height=68（中央）
- RDS Primary: X=380, Y=1570, width=68, height=68（AZ-A）
- RDS Standby: X=1460, Y=1570, width=68, height=68（AZ-B）
- Redis Primary: X=600, Y=1610, width=68, height=68（AZ-A）
- Redis Replica: X=1680, Y=1610, width=68, height=68（AZ-B）

#### 運用管理（VPC外、右下）
- S3 Logs: X=2080, Y=1570, width=68, height=68
- Systems Manager: X=1090, Y=1700, width=68, height=68
- Secrets Manager: X=1090, Y=1810, width=68, height=68

## スタイル仕様（AWS 2025準拠）

### グループコンテナ
- Region: shape=mxgraph.aws4.group_region, fillColor=#E6F6F7, strokeColor=#00A4A6
- VPC: shape=mxgraph.aws4.group_vpc, fillColor=#E9F3E6, strokeColor=#248814
- Availability Zone: fillColor=none, strokeColor=#147EBA, dashed=1
- Public Subnet: shape=mxgraph.aws4.group_security_group, fillColor=#E6F6F7, strokeColor=#00A4A6
- Private Subnet: shape=mxgraph.aws4.group_security_group, fillColor=#E6F6F7, strokeColor=#00A4A6
- Auto Scaling Group: shape=mxgraph.aws4.group_auto_scaling_group, fillColor=none, strokeColor=#D86613, dashed=1

### AWSアイコン（resIcon指定）
- Internet: mxgraph.aws4.internet_alt2
- Route 53: mxgraph.aws4.route_53（fillColor=#8C4FFF）
- CloudFront: mxgraph.aws4.cloudfront（fillColor=#8C4FFF）
- Shield: mxgraph.aws4.shield（fillColor=#DD344C）
- WAF: mxgraph.aws4.waf（fillColor=#DD344C）
- S3: mxgraph.aws4.s3（fillColor=#7AA116）
- CloudWatch: mxgraph.aws4.cloudwatch_2（fillColor=#E7157B）
- Internet Gateway: mxgraph.aws4.internet_gateway（fillColor=#8C4FFF）
- NAT Gateway: mxgraph.aws4.nat_gateway（fillColor=#8C4FFF）
- ALB: mxgraph.aws4.application_load_balancer（fillColor=#ED7100）
- ECS Task: mxgraph.aws4.ecs_task（fillColor=#ED7100）
- ECR: mxgraph.aws4.ecr（fillColor=#ED7100）
- RDS Proxy: mxgraph.aws4.rds_proxy（fillColor=#C925D1）
- RDS PostgreSQL: mxgraph.aws4.rds_postgresql_instance（fillColor=#C925D1）
- ElastiCache Redis: mxgraph.aws4.elasticache_for_redis（fillColor=#C925D1）
- Systems Manager: mxgraph.aws4.systems_manager（fillColor=#E7157B）
- Secrets Manager: mxgraph.aws4.secrets_manager（fillColor=#DD344C）

### 接続線スタイル
- 実線: データフロー（strokeWidth=2.5）
- 破線: 管理・監視・レプリケーション（strokeWidth=2, dashed=1）
- edgeStyle: orthogonalEdgeStyle（直角接続）
- 矢印: 単方向（source → target）

### 接続の出入り口指定（線の重複回避に必須）
- exitX, exitY: 接続線の出発点（0=左端/上端、0.5=中央、1=右端/下端）
- entryX, entryY: 接続線の到着点（同上）
- 例: ALBから複数のECSへの接続
  - ALB exitX=0.15, ECS A1 entryX=0.5, entryY=0
  - ALB exitX=0.25, ECS A2 entryX=0.5, entryY=0
  - ALB exitX=0.35, ECS A3 entryX=0.5, entryY=0
  - ALB exitX=0.65, ECS B1 entryX=0.5, entryY=0
  - ALB exitX=0.75, ECS B2 entryX=0.5, entryY=0
  - ALB exitX=0.85, ECS B3 entryX=0.5, entryY=0

### フォント
- fontSize: 11-15px（コンポーネントサイズに応じて）
- fontStyle: 0（通常）、1（太字、グループタイトルのみ）
- fontFamily: sans-serif

## 重要な注意事項

1. **座標の厳密な遵守**: 上記の座標を正確に使用してください。ずれると線が交差します
2. **exitX/exitY の必須指定**: 接続線の出入り口を必ず指定してください
3. **AWS 2025アイコンの使用**: shape=mxgraph.aws4.resourceIcon, resIcon=mxgraph.aws4.xxx 形式で指定
4. **strokeColor の統一**: 用途ごとに色を統一（ネットワーク:#0066CC、コンピュート:#ED7100、DB:#C925D1、セキュリティ:#DD344C、管理:#E7157B、ストレージ:#7AA116）
5. **階層構造の表現**: Region > VPC > AZ > Subnet の入れ子構造を正確に表現
6. **Auto Scaling Groupの可視化**: ECSタスクをグループで囲む
7. **Multi-AZ構成の明確化**: 同一リソースが両AZに配置されていることを視覚的に示す

上記の仕様に従って、完全なdraw.io XML（mxfile形式）を生成してください。

参考文献

[公式] Draw.io Integration - VS Code Marketplace
[公式] GitHub Copilot 公式ドキュメント
[公式] draw.io 公式ドキュメント
[公式] AWS Architecture Icons

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up