はじめに
受託開発やSESの現場にいると、とにかく「図」を作る場面が多いんですよね。
業務フロー図、システム構成図、ER図、シーケンス図、画面遷移図、体制図、CI/CDパイプライン……。設計書のページをめくるたびに図、図、図。しかもこれ、お客様に出す資料だったりするので、雑には作れません。
「じゃあAIに描かせればいいじゃん」と思うじゃないですか。僕もそう思ってました。
でも実際に ChatGPT や Claude に「この仕様から業務フロー図を描いて」と投げると、出てくるのは——
✅ それっぽい
❌ でも、使えない
という微妙なシロモノ。色はバラバラ、凡例はない、矢印の向きはおかしい、スコープも書いてない。結局レビューで毎回同じ指摘をして、自分で描き直す羽目になる。これ、AI駆動開発で一番「任せられそうで任せられない」領域が“図”だったんです。
そこで、「図のお作法」をまるごとスキルに閉じ込めた draw.io 生成スキル集を作りました。この記事ではその中身と使い方、そして「これは誰の痛みを解決するのか」を丁寧に書きます。
📦 リポジトリはこちら → https://github.com/enomoso-pm/drawio-diagram-skills
こんな人の痛みを解決します
先に結論。このスキルが刺さるのは、こういう人たちです。
| こんな人 | 抱えている痛み |
|---|---|
| 🧑💻 受託 / SES の SE・PM | 設計書に載せる図が多すぎる。1枚1枚 draw.io で手描きするのが地味に重い |
| 🧑🏫 レビューする側のリーダー | 後輩が描いた図に毎回同じ指摘（凡例ない・矢印の向き・色・スコープ）。レビューが消耗戦 |
| 🤖 AI駆動開発を進めたい人 | 「図だけはAIに任せられない」と感じている。出力品質が毎回ガチャ |
| 🏢 お客様向け資料を作る人 | 技術的には正しくても“誤解を生む図”を出すと事故る。でも丁寧に作る時間はない |
| 🆕 図の“お作法”を知らない若手 | 「この色は何層？」「点線の意味は？」が分からず、毎回先輩の図を真似している |
ど真ん中の痛みを一言でいうと、
「AIに図を描かせても“それっぽいけど使えない図”しか出てこない。結局レビューと描き直しで時間が溶ける」
これを倒すのがゴールです。
なぜAIに「図を描いて」だとうまくいかないのか？
原因を分解すると、だいたいこの5つに集約されました。
| 問題 | 何が起きるか |
|---|---|
| 🎲 品質がガチャ | 同じ依頼でも毎回レイアウト・色・粒度が変わる。再現性がない |
| 🤐 お作法が属人的 | 「外部サービスへの矢印はApp層から」等のルールはシニアの暗黙知。AIは知らない |
| ➡️ 矢印の向きが破綻 | DBから外部APIへ直接矢印が伸びる等、因果関係がおかしい図が普通に出る |
| 🏷️ 凡例・スコープが無い | 色や線の意味が不明。「この図はどこまでが対象か」が書かれず誤解を生む |
| 🖼️ 編集できない形式で来る | 画像やMermaidで渡されて、お客様が手元で直せない／微調整できない |
特に効くのが「お作法が属人的」という点。シニアエンジニアの頭の中には「この色はApp層」「破線は戻り」「1枚に詰め込みすぎたら分割」みたいな暗黙のルールが大量にあります。これをAIに毎回プロンプトで伝えるのは現実的じゃない。
→ だったら、そのお作法を“スキル”として一度きちんと書き起こして、AIに常時参照させればいいのでは？ というのが今回の発想です。
解決のアイデア：「図のお作法」をスキルに閉じ込める
Claude Code のスキル（SKILL.md）は、特定タスクの手順・ルールをMarkdownで書いておくと、関連する依頼が来たときにAIが自動で読み込んで従ってくれる仕組みです。
ここに、図種別ごとのレシピを全部書き込みました。
- 抽出対象 … 何をノード／エッジにするか（例：業務フローならアクター→レーン、ステップ→ボックス）
- レイアウト … どう並べるか（例：構成図は Client→App→Data→External の層構造）
- 色ルール … どの色が何を意味するか（層・役割ごとに固定）
- 点線の意味 … 図種別ごとに一意に定義（戻り／配信／兼務 など）
-
ID体系 … ノードに付ける接頭辞（
C-XXX=コンポーネント等） - スケール制限 … 1枚あたりノード40・エッジ60を上限とし、超えたら分割を提案
- 誤解防止 … タイトル・凡例・注記（Scope/前提/対象外）を必須化
そして出力は .drawio（編集可能なdraw.ioファイル）。画像でもMermaidでもなく、お客様がdraw.ioで開いてそのまま直せる形式にしています。
何ができる？ — 7種の図
題材を「タスク管理アプリ」に統一して、各スキル内蔵テンプレートの完成例を載せます。これ、全部AIが生成→そのまま .drawio で出力したものです（手で整えていません）。
システム構成図
Client → App → Data → External の層構造、Cloud/External の境界、OAuth・Push の因果ルール（配信＝破線）。
業務フロー（スイムレーン）
レーンで責務を分け、DBは操作名（UPSERT等）で表記、検証失敗の戻りループは破線。OAuthの因果チェーン（フロント→外部→バック→DB→フロント）も型どおり。
シーケンス図
同期＝実線 / 非同期＝破線 / 戻り＝破線。活性区間は省略し、メッセージは「動詞＋目的語」で統一。
ER図
PK/FK を明示し、N:N は中間テーブルで解消、関係線にカーディナリティ（1..N）。
CI/CD パイプライン
dev/stg/prod の環境帯、ツール名（GitHub Actions / ArgoCD）を明記、手動承認ゲート（◇）と監視（破線）も表現。
画面遷移図 / 体制図
| 画面遷移図（戻り遷移＝破線、初期/終了状態を明示） | 体制図（報告線／承認線／兼務＝破線） |
|---|---|
 |
 |
ポイントは、どの図にもタイトル・凡例・注記（Scope/前提/対象外）が必ず入っていること。これが「使える図」と「それっぽい図」の決定的な差です。
インプットは何を渡す？
「魔法のように何もなしで出る」わけではありません。いいインプットがいい図を作ります。とはいえ、構えなくて大丈夫。手元の仕様書・議事録・要件をそのまま貼るだけです。
スキルが最初に確認してくる（＝渡すと精度が上がる）項目はこれ。
| 項目 | 必須 | 例 |
|---|---|---|
| プロジェクト名 | ✅ | タスク管理アプリ |
| 入力情報 | ✅ | 仕様書 / 議事録 / 要件 / 設計メモ（テキストでOK） |
| 図種別 | ✅ | 業務フロー / 構成図 / ER図 / シーケンス / 画面遷移 / 体制図 / CI/CD |
| 対象範囲（Scope） | ✅ | 「ログイン機能のみ」「全体俯瞰」など |
| 抽象度 | ⬜ | L1=俯瞰 / L2=主要詳細 / L3=実装寄り（未指定ならL1） |
| 前提 / 制約 | ⬜ | 「認証はGoogle OAuthのみ」など |
コツは Scope（対象/対象外）を最初にハッキリさせること。これだけで「全体図に見える部分図」みたいな事故がなくなります。
使い方（3ステップ）
Step 1. インストール
リポジトリを clone して、各スキルを Claude Code のスキルディレクトリに置くだけ。
git clone https://github.com/enomoso-pm/drawio-diagram-skills.git
# 各スキルをグローバルに配置（プロジェクト単位なら .claude/skills/ でもOK）
cp -r drawio-diagram-skills/skills/* ~/.claude/skills/
Step 2. 依頼する
あとは普通に話しかけるだけ。仕様や議事録を貼って、図種別とScopeを添えます。
このログイン仕様で業務フロー図を draw.io で作って。
Scope は「Google OAuth ログインのみ」、抽象度は L1 でお願い。
（ここに仕様書 or 議事録のテキストを貼る）
図種別に応じて適切なスキルが自動で起動し、お作法に沿った .drawio を生成してくれます。
Step 3. draw.io で開いて仕上げ
出力された .drawio を draw.io（デスクトップ / Web / VSCode拡張）で開けば、
- ボックスの移動・色変更・文言修正がそのままできる
- PNG / SVG / PDF に書き出して資料に貼れる
- お客様にもファイルごと渡せる（編集可能）
「AIで土台を一発生成 → draw.io で微調整」という流れが、図作成の体感を一番ラクにしてくれました。
“効く”ポイント：シニアの暗黙知をルール化した
このスキル集の本体価値は、見た目より**「描いてはいけない図」を描かせない**ところにあります。いくつか例を挙げます。
-
因果関係の制約：システム構成図で「外部サービスへの矢印は必ず App 層から」。
Cache/Queue/Storage（Data層）から外部へ直接矢印を出すのは禁止。→ AIがやりがちな破綻を封じる -
Push通知の表現を固定：
Worker → APNs/FCMは実線(HTTPS)、APNs/FCM → クライアントは破線(配信)。→ 方向と種別が一目で分かる - 点線の意味を図種別ごとに一意化：業務フローでは「戻り」、構成図では「配信」、体制図では「兼務」。混用禁止＆凡例に必ず明記
- スケール制限で“詰め込み事故”を防止：1枚にノード40・エッジ60を超えそうなら、勝手に描き切らず分割案を提示してから描く
-
バージョニング必須：ファイル名に
_v1.0を付与、上書きせず繰り上げ保存
要は、レビューで毎回指摘していた内容を、最初からルールとして組み込んだわけです。だから出力が一発でレビューを通りやすい。
ビフォーアフター
| 観点 | Before（素のAIに「図描いて」） | After（このスキル） |
|---|---|---|
| 品質 | 毎回バラつく（ガチャ） | 図種別ごとに一定 |
| 凡例・スコープ | だいたい無い | 必ず入る |
| 矢印の向き | 破綻しがち | 因果ルールで担保 |
| 形式 | 画像/Mermaidで編集不可 |
.drawio で編集可能 |
| レビュー | 毎回同じ指摘 | 一発で通りやすい |
| 若手の学習 | 先輩の図を見様見真似 | ルールが明文化され再現できる |
まとめ
- AIに「図を描いて」と頼んでも“それっぽいけど使えない図”しか出ないのは、お作法（暗黙知）をAIが知らないから
- そのお作法（抽出対象・色・点線の意味・因果ルール・スケール制限・凡例必須）を スキルに明文化すると、出力が一気に“使える図”になる
- 出力は 編集可能な
.drawio。AIで土台生成 → draw.io で仕上げ、の流れが一番ラク - 「設計書の図が多い」「レビューが消耗戦」「図だけAIに任せられなかった」人にこそ効きます
図にかけていた時間を、本来やりたい設計や検討に回しましょう。ぜひ試してみてください！
📦 リポジトリ：https://github.com/enomoso-pm/drawio-diagram-skills
サンプル7種・テンプレート・各スキルのSKILL.mdを同梱しています。
付録：コピペで使える依頼プロンプト例
図種別ごとの“最初の一言”テンプレです。（ここに仕様/議事録を貼る） の部分に手元の情報を入れてください。
# 業務フロー
この業務の流れを draw.io の業務フロー図にして。
Scope=「（対象範囲）」、抽象度=L1。レーン分割と戻りループも入れて。
（ここに仕様/議事録を貼る）
# システム構成図
このシステムの構成図を draw.io で。Client/App/Data/External の層構造で、
外部連携(OAuth/Push)の因果ルールに沿って。Scope=「全体俯瞰」、抽象度=L1。
（ここに構成メモを貼る）
# ER図
このデータ要件から ER図を draw.io で。PK/FK明示、N:Nは中間テーブルで解消。
（ここにエンティティ/項目を貼る）
# シーケンス図
このAPI処理のシーケンス図を draw.io で。同期/非同期/戻りを区別して。
Scope=「（ユースケース名）」。
（ここに処理の流れを貼る）
# 画面遷移図
このアプリの画面遷移図を draw.io で。初期/終了状態と戻り遷移(Back/Cancel)も必ず。
（ここに画面一覧/遷移を貼る）
# 体制図
このプロジェクトの体制図を draw.io で。報告線/承認線/兼務を区別して。
（ここに役割/担当を貼る）
# CI/CD
このリリースフローを draw.io の CI/CD パイプライン図に。
dev/stg/prod の環境帯、ツール名、手動承認ゲートを明記。
（ここにデプロイ手順を貼る）