はじめに
アーキテクチャ設計図を書くのって、地味に時間がかかる上に、めんどくさいことが多いと思います。
本記事では awesome-copilot というコミュニティ公式コレクションから厳選した Skills と Instructions を導入し、GitHub Copilot に draw.io（diagrams.net）の XML を正しく生成・編集させる環境を構築する手順を紹介します。
実際に Azure のセキュアな 3 層 Web アーキテクチャの図（公式アイコン付き）を自動生成するところまで確認しました。
またdraw.io公式が出しているMCPサーバーを利用する方法もありますが、今回は手軽さを重視してSkillsを導入しました。
awesome-copilot とは
awesome-copilot は GitHub 公式がホストするコミュニティ製の Copilot 拡張コレクションです。
Skills・Instructions・Plugins・Agents・Hooks・Workflows など幅広い種類のカスタマイズが収録されており、専用 Web サイト (awesome-copilot.github.com) から全文検索で探せます。
awesome-copilot/
├── skills/ # 特定タスクに特化した手順書（Copilot が必要時に参照）
├── instructions/ # ファイル種別に自動適用されるルール集
├── plugins/ # GitHub Copilot CLI から直接インストールできる拡張
├── agents/ # カスタムエージェント定義
└── workflows/ # 自動化ワークフロー
GitHub Copilot のカスタマイズ機構
Skills とは
.github/skills/ 配下に置く Markdown ファイル（SKILL.md）です。
Copilot がタスクを受け取ったとき、関連するスキルを自動的に参照して応答品質を高めます。
「特定の作業をするときだけ読み込む、専門家の手順書」 というイメージです。
Instructions とは
.github/instructions/ 配下に置く NAME.instructions.md ファイルです。
frontmatter の applyTo に glob パターンを書くと、そのパターンに一致するファイルを扱うときに自動適用されます。
---
applyTo: "**/*.drawio,**/*.drawio.svg"
---
# draw.io 作図ルール
...
.drawio ファイルを開いたり編集したりするたびに Copilot が自動でこのルールを参照するため、「毎回プロンプトに指示を書く」必要がなくなります。
今回導入した 3 つのリソース
| 種別 | 名前 | 役割 |
|---|---|---|
| Skill | draw-io-diagram-generator |
draw.io mxGraph XML の生成・編集・バリデーション |
| Skill | azure-architecture-autopilot |
Azure アーキテクチャ設計→図→Bicep 生成の一気通貫パイプライン |
| Instructions | draw-io.instructions.md |
.drawio ファイルへの自動適用ルール（常時有効） |
導入手順
1. ディレクトリ構造の作成
.github/
├── instructions/
│ └── draw-io.instructions.md ← ① Instructions
└── skills/
├── draw-io-diagram-generator/ ← ② Skill
│ ├── SKILL.md
│ ├── references/
│ │ ├── drawio-xml-schema.md
│ │ ├── shape-libraries.md
│ │ └── style-reference.md
│ ├── scripts/
│ │ ├── validate-drawio.py
│ │ └── add-shape.py
│ └── assets/templates/
│ ├── flowchart.drawio
│ ├── architecture.drawio
│ ├── sequence.drawio
│ ├── er-diagram.drawio
│ └── uml-class.drawio
└── azure-architecture-autopilot/ ← ③ Skill
├── SKILL.md
├── references/
│ ├── phase0-scanner.md
│ ├── phase1-advisor.md
│ ├── bicep-generator.md
│ └── ...（計 10 ファイル）
└── scripts/
├── generator.py
├── cli.py
└── icons.py（605+ Azure 公式アイコン埋め込み）
2. ファイルの取得（PowerShell）
以下のPowershellスクリプトで awesome-copilot リポジトリから直接ダウンロードできます。
$sha = "cd420ca862a301755a32ed76d53611bd5e04de30" # 使用時に最新 SHA に変更
$rawBase = "https://raw.githubusercontent.com/github/awesome-copilot/$sha"
$base = ".\.github"
# ① Instructions
New-Item -Force -ItemType Directory "$base\instructions" | Out-Null
Invoke-WebRequest "$rawBase/instructions/draw-io.instructions.md" `
-OutFile "$base\instructions\draw-io.instructions.md"
# ② draw-io-diagram-generator Skill（SKILL.md + references + scripts + templates）
$files = @(
"skills/draw-io-diagram-generator/SKILL.md",
"skills/draw-io-diagram-generator/references/drawio-xml-schema.md",
"skills/draw-io-diagram-generator/references/shape-libraries.md",
"skills/draw-io-diagram-generator/references/style-reference.md",
"skills/draw-io-diagram-generator/scripts/validate-drawio.py",
"skills/draw-io-diagram-generator/scripts/add-shape.py",
"skills/draw-io-diagram-generator/assets/templates/architecture.drawio",
"skills/draw-io-diagram-generator/assets/templates/flowchart.drawio",
"skills/draw-io-diagram-generator/assets/templates/sequence.drawio",
"skills/draw-io-diagram-generator/assets/templates/er-diagram.drawio",
"skills/draw-io-diagram-generator/assets/templates/uml-class.drawio"
)
foreach ($f in $files) {
$dest = Join-Path $base ($f -replace "^skills/","" -replace "/","\")
New-Item -Force -ItemType Directory (Split-Path $dest) | Out-Null
Invoke-WebRequest "$rawBase/$f" -OutFile $dest
}
# ③ azure-architecture-autopilot Skill（icons.py は 2MB の SVG バイナリ）
$azFiles = @(
"skills/azure-architecture-autopilot/SKILL.md",
"skills/azure-architecture-autopilot/references/phase0-scanner.md",
"skills/azure-architecture-autopilot/references/phase1-advisor.md",
"skills/azure-architecture-autopilot/references/bicep-generator.md",
"skills/azure-architecture-autopilot/references/bicep-reviewer.md",
"skills/azure-architecture-autopilot/references/phase4-deployer.md",
"skills/azure-architecture-autopilot/references/service-gotchas.md",
"skills/azure-architecture-autopilot/references/ai-data.md",
"skills/azure-architecture-autopilot/references/azure-common-patterns.md",
"skills/azure-architecture-autopilot/references/azure-dynamic-sources.md",
"skills/azure-architecture-autopilot/references/architecture-guidance-sources.md",
"skills/azure-architecture-autopilot/scripts/generator.py",
"skills/azure-architecture-autopilot/scripts/cli.py",
"skills/azure-architecture-autopilot/scripts/icons.py"
)
foreach ($f in $azFiles) {
$dest = Join-Path $base ($f -replace "^skills/","" -replace "/","\")
New-Item -Force -ItemType Directory (Split-Path $dest) | Out-Null
Invoke-WebRequest "$rawBase/$f" -OutFile $dest
}
Write-Host "Done."
icons.py は 605 種以上の Azure 公式アイコンを Base64 SVG として内包した約 2MB のファイルです。pip install 不要でそのまま使えます。
各コンポーネントの詳細
draw-io-diagram-generator Skill
draw.io（.drawio/.drawio.svg/.drawio.png）ファイルの生成・編集に特化したスキルです。
対応ダイアグラム種別
| 種別 | テンプレート |
|---|---|
| フローチャート | assets/templates/flowchart.drawio |
| システムアーキテクチャ | assets/templates/architecture.drawio |
| シーケンス図 | assets/templates/sequence.drawio |
| ER 図 | assets/templates/er-diagram.drawio |
| UML クラス図 | assets/templates/uml-class.drawio |
生成ルールのハイライト
<!-- 必須: 最初の 2 セルは常に id=0 と id=1 -->
<mxCell id="0" />
<mxCell id="1" parent="0" />
<!-- vertex: mxGeometry が必須 -->
<mxCell id="app-service" value="App Service"
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;"
vertex="1" parent="1">
<mxGeometry x="200" y="100" width="160" height="80" as="geometry" />
</mxCell>
<!-- edge: source と target が必須 -->
<mxCell id="e1" value="HTTPS"
style="edgeStyle=orthogonalEdgeStyle;html=1;"
edge="1" source="user" target="app-service" parent="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
セマンティックカラーパレット（プロジェクト全体で統一）
| 役割 | fillColor | strokeColor |
|---|---|---|
| Primary / Info | #dae8fc |
#6c8ebf |
| Success / Start | #d5e8d4 |
#82b366 |
| Warning / Decision | #fff2cc |
#d6b656 |
| Error / End | #f8cecc |
#b85450 |
| Neutral | #f5f5f5 |
#666666 |
| External | #e1d5e7 |
#9673a6 |
バリデーションスクリプトで生成後に構造チェックができます。
python .github/skills/draw-io-diagram-generator/scripts/validate-drawio.py <file.drawio>
azure-architecture-autopilot Skill
Azure インフラを自然言語で設計・図化・Bicep 生成まで一気通貫で行うスキルです。
4 フェーズのパイプライン
Phase 0: 既存リソーススキャン（az CLI で自動収集）
↓
Phase 1: インタラクティブ設計 + HTMLアーキテクチャ図生成
↓
Phase 2: Bicep テンプレート生成
↓
Phase 3: コードレビュー + コンパイル検証
↓
Phase 4: validate → what-if → deploy
605+ Azure 公式アイコン内蔵
scripts/icons.py に全アイコンが Base64 SVG で組み込まれており、ネットワークアクセスなしで即座に使えます。
draw-io.instructions.md（Instructions）
.drawio/.drawio.svg/.drawio.png ファイルを扱うときに自動適用される Instructions です。
---
applyTo: "**/*.drawio,**/*.drawio.svg,**/*.drawio.png"
---
このファイルを置くだけで、以下が Copilot に自動インジェクトされます。
- mxGraph XML の必須ルール（id=0/id=1、mxGeometry 必須など）
- カラーパレット統一ルール
- ファイル命名規則（kebab-case、
docs/orarchitecture/配置） - バリデーションチェックリスト
実際に使ってみる
draw.io 図の新規作成
Copilot Chat または Copilot CLI に以下のように依頼するだけです。
Azure 上のセキュアな 3 層 Web アーキテクチャの draw.io 図を
docs/architecture.drawio に作成してください。
- フロント: Azure Front Door (WAF)
- アプリ: Azure App Service
- DB: Azure SQL Database（Private Endpoint 経由）
- 認証: Managed Identity
- 監視: Application Insights
Copilot は draw-io-diagram-generator スキルを参照し、バリデーション済みの mxGraph XML を生成します。
公式 Azure アイコンの使用
dwarfered/azure-architecture-icons-for-drawio リポジトリから、各 Azure サービスの公式 SVG アイコンを含むスタイル文字列を取得できます。
azure-public-service-icons/
├── 003 app services.xml # App Service, App Service Plans
├── 009 databases.xml # SQL Database, Cosmos DB など
├── 013 identity.xml # Managed Identity, Entra ID など
├── 023 monitor.xml # Application Insights, Log Analytics
├── 024 networking.xml # VNet, Front Door, WAF, Private Link など
└── ...
各 XML は mxlibrary 形式で、draw.io の「File > Open Library」からそのまま読み込めます。
アイコンのスタイル文字列は shape=image;...image=data:image/svg+xml,<Base64> 形式で、.drawio ファイルの style 属性に直接埋め込むことができます。
主要サービスのアイコン ID 対応表
| Azure サービス | アイコン ID |
|---|---|
| Azure App Service | 10035-icon-service-App-Services |
| Azure SQL Database | 10130-icon-service-SQL-Database |
| Application Insights | 00012-icon-service-Application-Insights |
| Azure Front Door | 10073-icon-service-Front-Door-and-CDN-Profiles |
| WAF Policy | 10362-icon-service-Web-Application-Firewall-Policies(WAF) |
| Azure Virtual Network | 10061-icon-service-Virtual-Networks |
| Private Link / Endpoint | 00427-icon-service-Private-Link |
| Private DNS Zone | 10064-icon-service-DNS-Zones |
| Managed Identity | 10227-icon-service-Managed-Identities |
| Subnet | 02742-icon-service-Subnet |
生成結果の確認
まとめ
| 導入したもの | 効果 |
|---|---|
draw-io-diagram-generator Skill |
正しい mxGraph XML を生成、バリデーション付き |
azure-architecture-autopilot Skill |
Azure 設計→図→Bicep を自然言語で一気通貫 |
draw-io.instructions.md Instructions |
.drawio 編集時に自動でルール適用、手動指示不要 |
「draw.io の XML が壊れて開けない」「アイコンが違う」といった問題が、これらの設定を入れるだけで大幅に解消されます。
特に Instructions の自動適用は効果が高く、一度設定してしまえば毎回プロンプトに制約を書く必要がなくなります。
Azure をメインに使っている方は azure-architecture-autopilot も組み合わせると、設計→図→IaC のフローを Copilot で完結させることができます。
この記事が皆様のコーディングライフの助けになれば幸いです。
参考リンク