この記事は Microsoft Azure Tech Advent Calendar 2025🎄 の 15 日目の記事 です。
なおかつ、Azure PoC 部 Advent Calendar 2025🎄 の 16 日目の記事 です。
こんにちは、図を描くのがちょっと苦手なアーキテクトのやまぱんです 😊
補足コメントや質問、いいね、拡散、ぜひお願いします 🥺！
間違っていたら 優しく 教えてください！
この記事では、私が作った「AG-Diagram Maker」を紹介します。
結論から言うと、VS Code と GitHub Copilot、そして Draw.io の拡張機能を組み合わせるだけで、「画像として表示できて、かつ後から編集できる図」 を AI に自動生成させられます。超便利です。
この記事は、私が書いた AG-Diagram Maker の README をベースにまとめています。機能は更新される可能性があるので、最新はリポジトリを見てください。
先に結論：AG-Diagram Maker で何が嬉しいの？
ざっくり言うと、この 3 点に尽きます。
- VS Code 上で Copilot に指示するだけで、構成図 / フローチャート / スイムレーン図などを自動生成できます
- 出力は
.drawioや.drawio.svgなので、draw.io で「人間が後編集」できる のが強みです - 入力は Markdown、Excel、画像、自然言語入力、書き起こしファイルなどを想定していて、「既存資料から図を起こす」用途に強いです
「手元の情報をポイッと渡したら、編集可能な図になって返ってくる」── これが一番の価値だと思っています。
背景：図作成って、地味に時間が溶けません？
構成図や業務フロー図って、
- 仕様理解
- 形にする
- 何回も手直し
で、気づいたら 1 日終わってる…みたいなこと、ありますよね！！！？？
私はこのリポジトリで、ここを「まず AI に叩き台を作らせて、人間は仕上げに集中する」方向に寄せました。
なぜ「編集できる画像」が作れるの？
ポイントは 1 つで、AI が “画像を描く” のではなく “テキスト（XML / SVG）を生成する” ところにあります。
README にも書いたのですが、.drawio.svg が「SVG と draw.io の編集メタデータ（mxGraphModel）を内包する」構造であることがポイントです。
つまり、以下が両立します。
-
ブラウザや VS Code は SVG を画像として表示
-
draw.io は mxGraphModel を読み取って編集
AI 生成物は “それっぽい嘘” を混ぜることがあります。README にも「人間によるレビュー推奨」と書いているので、たたき台をつくったあとは最終成果物は必ず確認・微調整しましょう。
まず動かす（細かい導入手順は割愛）
インストールやリポジトリ取得の細かい手順は README の Quick Start にまとまっているので、ここでは「最短で試す」ための要点だけ書きます。
必要なもの（最小）
- VS Code
- GitHub Copilot（Copilot Free でも試せます）
- VS Code 拡張機能：Draw.io Integration（必須）
公式 URL：
- Copilot Free の存在と制限：GitHub Docs の「GitHub Copilot のプラン」
- Draw.io Integration 本体：VS Code Marketplace
参照（README 記載）：Draw.io Integration を必須拡張としている意図や前提
- AG-Diagram Maker README の概要・Quick Start
最短で試す 3 ステップ
- README の Quick Start を見ながら、リポジトリを VS Code で開く
- Draw.io Integration を入れる
- Copilot Chat で “1 行” 指示して、
outputs/に出力が出るのを確認する
期待結果：outputs/ に .drawio（または .drawio.svg）が生成され、VS Code 上で開いて draw.io 形式として編集できる状態になります。
推奨（あると便利）
- Excel Viewer（Excel 入力を VS Code 内で確認したい場合）
ちょい脱線ですが、draw.io 側で Azure / AWS のアイコンライブラリを有効化しておくと、生成した図でもクラウドアイコンが使えるようになります（ここが地味に効いてきます！）。しかも 一度有効化すれば以降は自動的に適用 されます。
参照（README 記載）：「☁️ クラウドアイコンの有効化（Azure / AWS）」
こんな感じで Azure アイコンが使われます（例 4 の図）。
ついでに、（たまに欲しいアイコンが無いときも）最終的には draw.io で手動調整できます。つまり 「編集できる」形式で出すメリットがここで効いてきます！
プロンプト例（コピペで OK）
ここからは「そのままコピペして試せる」プロンプト例です。入力（ファイル/図の種類/範囲）を指定すると、だいぶ安定します。
※例 2〜4 は Copilot Chat で @flow-orchestrator を選び、段階生成で実施しています（使用モデル：Claude Opus 4.5）。例 1 は @flow-orchestrator を使わず、単発で指示した結果です（使用モデル：GPT-4o）。
以下の例に出てくる図は、生成されたファイルをそのまま開いたもので、手動での追記・整形はしていません。
（必要なら draw.io で後から手動調整できるのが、この仕組みの良さです）
つまり、こんな感じでワークフローが回る環境です。
例 1：テキストだけで作る（GPT-4o、単発指示）
この例は @flow-orchestrator を使わず、Copilot Chat に単発で指示しています。
現代人の一生をフローチャートにして
例 2：テキストだけで作る（Claude Opus 4.5）
おなじプロンプトでも全く違いますね
現代人の一生をフローチャートにして
png エクスポートした例
例 3：Excel からスイムレーン図で作る
inputs/Sample_20251114_procurement_request_for_information_outline_02.xlsx からスイムレーン図で作成して
例 4：Markdown の特定の Markdown から作る
inputs/Sample-jiki-kikan-system-vdi-requirements.md の「6. アーキテクチャ概要」から図を作成して
エージェントワークフローで段階生成すると安定する
複雑な図のときに flow-orchestrator のエージェントワークフローを使うと、段階的に進むので品質が上がりやすいです。
上記の例であった 例 3 の :RFI の Excel からの生成など、難易度の高い生成物は単発生成だと出力が出ないことがあります。
今回のエージェントワークフロー
README の説明を “ざっくり” 書くと、次の流れです。入力 → 設計 → 生成の三段ロケットで安定させています。
-
flow-orchestrator：入力を分析して、要件整理・方針決め（Review Engine 内蔵） -
manifest-gateway：図を作るためのマニフェスト（中間成果物）を生成 -
svg-forge：図面を生成して自己検証し、完成品として出力する
要するに「最初に要件を固める → 中間表現でズレを防ぐ → 出力時に自己検証する」流れで、行ったり来たりの手戻りを減らす設計になっています。
注意：GitHub Copilot には無料の Copilot Free もありますが、機能や利用できるモデルに制限があります。
- Copilot Free / Pro などのモデル差（Included / Not included）：GitHub Docs
Copilot Free では一部モデルが Not included のため、環境によってはエージェントワークフローが回しづらい可能性があります。
その場合は、単発生成 + 手動レビューで回し、必要ならプランやモデル選択を検討するのが現実的かなと思います！
最後に伝えたいこと：VS Code × Copilot は “市民開発” の味方
このリポジトリは見た目はコードを書く人向けですが、実は 手元のコンテキストを渡すと図にしてくれる のが本質です。だから 開発者じゃなくても 例えば以下のような人たちでも、十分につかう価値があります ⭐
- 情シス
- 企画
- 運用
- PM
- インフラエンジニア
今回の例でいえば、、、
- 音声入力で要件をしゃべる → 文字起こし → そのテキストからフロー図・関係図・グルーピング図を描かせる
- 会議の録音 → 議事録（文字起こし） → 決定事項や担当をスイムレーンに落とす
- Word / PowerPoint / Excel の内容を読み取って、関係者図や業務フローにする
ここは「AG-Diagram Maker が音声ファイルを直接取り込む」という意味ではなく、音声や会議録を “テキスト化” して入力にできたら強いよね、という活用アイデアです。入力としては Markdown / Excel / 画像などが想定されています。
他にもいろいろなことが GitHub と GitHub Copilot とエージェントワークフローを使うといろんなことができるようになるので、個人的にめちゃくちゃワクワクしますね 🎉
しかも GitHub Copilot には Copilot Free があって、「まず試す」ことができます。
ここは本当に強いです。
公式 URL：Copilot Free の説明とプラン比較
URL： https://docs.github.com/ja/copilot/get-started/plans
まとめ
- このリポジトリ（AG-Diagram Maker）は、Copilot と Draw.io を使って “編集できる図” を AI 生成する仕組みです
- 叩き台を AI に作らせて、人間はレビューと微調整に集中するのがコツです
- VS Code × GitHub Copilot（Copilot Free もあり）は、最強の業務改善ツール候補だと思っています
参考 URL
- AG-Diagram Maker（概要、Quick Start、仕組み、セキュリティ、ライセンス）
- GitHub Copilot のプラン（Copilot Free の存在、制限、比較表）
- VS Code 拡張：Draw.io Integration（必須）
- VS Code 拡張：Excel Viewer（推奨）