⚡製図革命2.0⚡draw.io で図を作る AI スキルを作ってみた🚀

Last updated at 2026-01-15Posted at 2026-01-15

こんにちは、「図を AI に描かせたい欲」が止まらないアーキテクトのやまぱんです 😊
補足コメントや質問、いいね、拡散、ぜひお願いします 🥺！
間違っていたら 優しく 教えてください！

以前、「製図革命」として AG-Diagram Maker を紹介しました。
https://qiita.com/aktsmm/items/5dc37c60cadb61be659d

今回はその アップグレード版 として、内容も改善しつつ「スキル」という形でパッケージ化した話をします。
SKILL NINJA を使えばワンクリックでインストールできます 🎉

TL;DR

以前紹介した「AG-Diagram Maker」を スキル としてパッケージ化した
SKILL NINJA 拡張機能で ワンクリックインストール できる
「アーキテクチャ図を作って」と頼むと 編集可能な .drawio ファイル が出力される
Azure アイコンは azure2 形式を使わないと VS Code で表示されない（ハマりポイント）

Agent Skills とは？
AI エージェントに専門知識を教える「手順書パッケージ」です。

Tool: 「できること」を増やす（API 呼び出し、ファイル操作など）
Instructions: 常に守るルール（命名規則、文体など）
Skills: 必要なときだけ読む手順書（ワークフロー、複雑な判断など）

Skills = Instructions の構造化・標準化・パッケージ化 と考えると分かりやすいです！
詳しくはこちらの記事で解説しています 👇

https://qiita.com/aktsmm/items/08eef2cdeeb0a32b69a2

前提条件

VS Code がインストール済み
GitHub Copilot 拡張機能が有効（Agent モードが使えること）
Draw.io Integration 拡張機能がインストール済み
SKILL NINJA 拡張機能がインストール済み（手動導入の場合は不要）
良い言語モデルを使う: 出力品質はモデル依存です。Claude Opus 4.5 など高性能なモデルを選びましょう 🧠

「Mermaid + AI」vs「draw.io + AI」

方法	初期作成	あとから編集	向いてる図
Mermaid + AI	爆速	△ コード修正	シーケンス図、README 埋め込み
draw.io + AI（本スキル）	爆速	○ GUI で即反映	クラウド構成図、提案資料

本スキルの価値 = 「AI で叩き台 → GUI で仕上げ」

Mermaid は修正するたびにコードを書き換える必要がありますが、draw.io なら GUI でドラッグするだけ ✨
「あとで何度も直す図」には draw.io + AI がおすすめです！

過去記事からの進化

前回の「AG-Diagram Maker」から何が変わったのか、比較表にまとめました！

項目	前回（AG-Diagram Maker）	今回（drawio-diagram-forge スキル）
導入方法	リポジトリを clone	SKILL NINJA でインストール
形式	VS Code ワークスペース	スキル（SKILL.md + references/）
配布	GitHub リポジトリ	Agent-Skills リポジトリ（公開）
Azure アイコン	mxgraph.azure.*	azure2 形式に統一（修正済み）
使い方	@flow-orchestrator を指定	スキルが自動認識

ポイント: 「リポジトリを clone する」から「スキルをインストールする」へ進化しました 🎉
手軽さが大幅にアップです！

SKILL NINJA でインストール → 図を生成してみる

SKILL NINJA とは？
AI コーディングアシスタント向けのスキル管理 VS Code 拡張機能です。100 以上のプリセットスキルをワンクリックで追加できます。
詳細はこちら → Skill を管理する "Agent Skill Ninja" MCP 対応 VS Code 拡張機能作ってみた ⚡

百聞は一見にしかず 👀

説明するより見たほうが早い！
Copilot Chat で「Azure と AWS を使った構成図を作って」と指示するだけで、編集可能な .drawio ファイル が生成されます 🚀

SKILL NINJA から「drawio-diagram-forge」をインストールして、Azure と AWS を使ったサービス構成図を生成している様子。

操作手順

VS Code で SKILL NINJA 拡張機能を開く
ソースリポジトリを追加: aktsmm/Agent-Skills を追加する
「drawio-diagram-forge」を検索してインストール
Copilot Chat で「図を作って」と指示
Azure/AWS アイコンを使った構成図が生成される！

ソースリポジトリの追加方法
SKILL NINJA の設定画面から「Add Source Repository」で aktsmm/Agent-Skills を追加してください。プリセットには含まれていないので、手動で追加が必要です。

かなり簡単ですね 💪

注意: 一部のアイコンがうまく反映されないこともあります。多少の手直しは必要ですが、「ゼロから描くよりだいぶ楽！」という感覚で使ってもらえれば 😊

drawio-diagram-forge スキルとは

スキルのファイル構成

ファイル	役割
`SKILL.md`	メイン定義（いつ使うか、使い方）
`references/mxcell-structure.md`	mxCell XML 構造リファレンス
`references/cloud-icons.md`	Azure/AWS アイコン使用ガイド
`references/style-guide.md`	ノード色、エッジスタイル
`scripts/validate_drawio.py`	mxCell 検証スクリプト

SKILL NINJA を使わない場合

SKILL NINJA を使わない場合は、リポジトリから直接取得できます。

# Agent-Skills リポジトリを clone
git clone https://github.com/aktsmm/Agent-Skills.git

# drawio-diagram-forge スキルをワークスペースの .github/skills/ に配置
mkdir -p .github/skills
cp -r Agent-Skills/skills/drawio-diagram-forge .github/skills/

でも SKILL NINJA を使えばワンクリックなので、ぜひ使ってみてください 😊

できること

テキストから図を生成
画像/スクリーンショットを編集可能な図に変換
Excel/Markdown からフローチャート生成
Azure/AWS アーキテクチャ図

「図を作りたい」と思ったら、このスキルに任せれば OK です 🚀

作成例：こんな図が作れます

過去記事で紹介した作成例をいくつか紹介します。すべて AI が生成したもので、手動での追記・整形はしていません！

テキストから作成

現代人の一生をフローチャートにして

Excel からスイムレーン図を作成

inputs/Sample_procurement_request.xlsx からスイムレーン図で作成して

Markdown からアーキテクチャ図を作成

inputs/system-requirements.md の「アーキテクチャ概要」から図を作成して

Azure アイコンもちゃんと使われています 🎉

今回の図ではざっくりとした指示しか与えていませんが、実際にはもっと様々なインプットに対応できます：

Excel: 一覧表やマトリクスから構成図を生成
詳細設計書: ドキュメントから関係図やフローを抽出
スクリーンショット: 既存の図を編集可能な形式に変換
要件定義: テキストベースの要件からアーキテクチャ図を作成

詳しい使い方は過去記事を参照してください 👇

技術的ポイント

ここからはちょっと技術的な話です。興味ある方だけどうぞ～！

draw.io ファイルの正体は XML

draw.io ファイルって、実は中身は XML なんです。

draw.io ファイルの基本構造

<mxfile generator="diagram-forge">
  <diagram>
    <mxGraphModel>
      <root>
        <!-- ルート（必須） -->
        <mxCell id="0" />
        <!-- デフォルト親（必須） -->
        <mxCell id="1" parent="0"/>
        <!-- ノード: vertex="1" -->
        <mxCell id="2" value="Start" style="rounded=1" vertex="1" parent="1">
          <mxGeometry x="100" y="100" width="80" height="40" as="geometry"/>
        </mxCell>
        <!-- エッジ: edge="1" -->
        <mxCell id="3" edge="1" source="2" target="4" parent="1"/>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

mxCell 完全性ルール

必要な mxCell 数 >= 2 + ノード数 + エッジ数

id="0" - ルート（必須）
id="1" - デフォルト親（必須）
vertex="1" - ノード（箱、丸など）
edge="1" - エッジ（矢印、線）

3-Agent ワークフロー

詳細は過去記事を参照してもらうとして、概要だけ紹介します。

flow-orchestrator: 入力を分析して、要件整理・方針決め
manifest-gateway: 図を作るためのマニフェスト（中間成果物）を生成
svg-forge: 図面を生成して自己検証し、完成品として出力

この 3 段階で「入力 → 中間表現 → 出力」という流れを作っています。
手戻りを減らすための設計ですね！

ハマりポイント：Azure アイコン

今回のスキルで一番頑張ったのは、クラウドサービス系のアイコンをちゃんと使う ようにしたところです！

AI に図を作らせると、Azure や AWS のサービスが「ただの四角形」で表現されがち。でもそれだと見栄えが悪いし、パッと見て何のサービスかわからない 😅

そこで、なるべく公式アイコンを使う ようにリファレンス（references/cloud-icons.md）を整備しました。

Azure アイコンは `azure2` 形式必須！

ただし、実際にスキルを使ってみたら、Azure アイコンが 青い四角形 になる問題が発生しました 😱

形式	Web 版	VS Code 版	判定
`shape=mxgraph.azure.*`	○	× 青四角	×
`image=img/lib/azure2/*/.svg`	○	○	○

スキル側で azure2 形式に統一済み なので、利用者は気にしなくて OK です！
references/cloud-icons.md に正しいパスをまとめてあります 🎉

参考：XML の違い

旧形式（Web版でしか動かない）

<!-- ❌ これだと VS Code で青四角になる -->
<mxCell style="shape=mxgraph.azure.front_door;fillColor=#0078D4;..." />

新形式（どこでも動く）

<!-- ✅ azure2 形式を使おう -->
<mxCell style="aspect=fixed;image=img/lib/azure2/networking/Front_Doors.svg;..." />

主要アイコンのパス

よく使う Azure アイコンのパスをまとめておきます。

サービス	SVG パス
Front Door	`img/lib/azure2/networking/Front_Doors.svg`
App Service	`img/lib/azure2/compute/App_Services.svg`
Azure AD	`img/lib/azure2/identity/Azure_Active_Directory.svg`
Key Vault	`img/lib/azure2/security/Key_Vaults.svg`
VNet	`img/lib/azure2/networking/Virtual_Networks.svg`

教訓: スキルは必ず実際に使ってテストすべき。ドキュメント上は正しくても環境依存で動かないことがあります 😅

Progressive Disclosure 設計

スキルのロードは 3 段階になっています。

メタデータ (name + description) - 常に読まれる (~100 語)
SKILL.md 本文 - スキルがトリガーされたとき (<5k 語)
references/ - 必要なときだけ (無制限)

これにより、必要なときに必要な情報だけをロードする設計になっています。
コンテキストウィンドウを効率的に使えますね！

ライセンス

スキルのライセンスは CC BY-NC-SA 4.0 です。
個人利用・学習目的なら自由に使えます。商用利用は NG なので、ビジネスで使いたい場合は別途ご相談ください 🙏

参考

drawio-diagram-forge スキル（今回作ったスキル）

Agent Skill Ninja（VS Code 拡張機能）

Agent Skill Ninja の紹介記事

AG-Diagram Maker（元リポジトリ）

Draw.io Integration（VS Code 拡張）

anthropics/skills（公式スキルリポジトリ）

過去記事: ⚡ 製図革命 ⚡ まだ手で図を描いてるの？「あとで直せる図」を AI で作る 🚀

まとめ

「製図革命」を スキル としてパッケージ化した
SKILL NINJA で ワンクリックインストール できる
Azure アイコンは azure2 形式を使うこと（VS Code で表示されない問題を回避）
一部アイコンが反映されないこともあるけど、ゼロから描くよりだいぶ楽！

「図を描くのがめんどくさい」という方、ぜひ試してみてください 🚀
質問や感想があれば、コメントお待ちしています！

SKILL NINJA が便利だと思ったら、ぜひ ⭐ をお願いします！

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