Generate draw.io editable diagrams (.drawio, .drawio.svg) from text, images, or Excel. Orchestrates 3-agent workflow (Analysis → Manifest → SVG generation) with quality gates. Use when creating architecture diagrams, flowcharts, sequence diagrams, or converting existing images to editable format. Supports Azure/AWS cloud icons. Triggers on draw.io, drawio, ダイアグラム, アーキ図, フローチャート, シーケンス図.
インストール方法を見るインストールする前に、エージェントに与えられる指示の中身を確認できます。
Generate draw.io editable diagrams using AI-powered workflow.
Choose this skill when the result will need later GUI editing in draw.io, cloud icons, or documentation-facing diagram assets.
| Tool | Required |
|---|---|
| VS Code | Yes |
| Draw.io Integration | Yes |
| GitHub Copilot | Yes |
Create a login flow diagram
Generate an Azure Hub-Spoke architecture diagram
From inputs/requirements.md, create a system diagram
| Extension | Description | When to Use |
|---|---|---|
*.drawio | Native format | Recommended |
*.drawio.svg | SVG + metadata | Markdown/Web |
*.drawio.png | PNG + metadata | Image with edit |
Output: outputs/
If the user asks for an editable diagram, make *.drawio the primary deliverable. Do not let a plain SVG or preview artifact become the file the user is expected to edit.
ドキュメント向けは name.drawio (editable) + name.drawio.svg (embed) を対で出す。多言語変体・Qiita への掲載・ローカル preview 脱出手順は → references/delivery-patterns.md。
Treat generated images as optional layout references, not requirement evidence. Resolve labels, nodes, groups and edge directions in the manifest; flag ambiguity instead of inventing content. Rebuild native mxCells and connectors; wrapping a raster image in draw.io metadata does not make its elements editable.
USER INPUT → ORCHESTRATOR → MANIFEST GATEWAY → SVG FORGE → COMPLETED
| Score | Action |
|---|---|
| 85-100 | Proceed |
| 70-84 | Fix and retry |
| 50-69 | Simplify |
| 0-49 | Ask user |
When the deliverable is headed for print, gate it on the Monochrome Print Profile and the Pre-delivery Geometry Sweep in style-guide.md before any visual review.
| Limit | Value |
|---|---|
| Manifest revision | 2 |
| SVG revision | 2 |
| Total timeout | 45min |
Use Cloud Icons Reference. Azure diagrams must use verified img/lib/azure2/**/*.svg image paths, retain short service labels, and fall back to neutral boxes only when an icon is missing or misleading.
| File | Description |
|---|---|
| mxcell-structure.md | mxCell XML structure |
| cloud-icons.md | Azure/AWS icon guide |
| style-guide.md | Node colors, edge styles |
| delivery-patterns.md | Editable + embed pair, Qiita, multilingual |
| troubleshooting.md | Full troubleshooting (24 items) |
| Script | Description |
|---|---|
scripts/validate_drawio.py | Validate mxCell structure |
頻度高トップ 4 件を下記に掲載。全一覧（フレーム/エッジ/余白/PDF 出力、レジェンド位置、エスケープ層、CLI の export オプション 等 24 項目）は references/troubleshooting.md。
| Issue | Solution |
|---|---|
| Blank in draw.io | Check content attribute |
| Edges not visible | Verify node IDs |
| Icons missing | Enable Azure/AWS shapes (+ More Shapes → Azure / AWS) |
| Text overlaps near outer frame | Inset top callout 16–24px, increase height, wrap to 3–4 lines; review at actual embed width |
.drawio or .drawio.svg file generated.drawio.svg is part of the delivery, it was exported with --embed-diagram and contains mxfile.drawio when editability is expectedまだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Design, review, and debug agent workflows, and decide when a request should use a prompt, instruction, skill, agent, or hook before escalating to multi-agent design. Use for .agent.md / .instructions.md / .prompt.md / AGENTS.md work, workflow architecture, orchestration planning, scheduled automation model allocation, or when agent workflows may be overkill. Triggers on 'agent workflow', 'create agent', 'automation models', 'ワークフロー設計', 'orchestrator'.
Design, run, and review fair performance, token, and cost comparisons across GitHub Copilot CLI, Codex CLI, and direct model APIs. Use for AI CLI benchmark, Copilot vs Codex, prompt-cache diagnosis, cache read/write analysis, fresh-process latency measurement, token-cost comparison, or when a benchmark must separate provider caching from local CLI caches.
日本語の概要は準備中です。原文の説明を表示しています。
Analyze historical VS Code GitHub Copilot Chat sessions by model, reasoning effort, AIU, time, reliability, workflow behavior, and external quality evidence, or safely prune workspace-scoped local chat history by age. Use for session analysis, repeated-task retrospectives, model evaluation, cost/performance analysis, and old session cleanup.
日本語の概要は準備中です。原文の説明を表示しています。
Create reproducible animated infographic GIFs from structured data or measured results, with audience-language labels, explicit timing semantics, representative-frame QA, and a static fallback. Use when asked for GIF生成, animated infographic, 動的インフォグラフィック, 結果が流れる図, animated benchmark, or a blog/SNS animation whose displayed metrics must remain traceable to source data.
Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid. Also use for Archify, interactive or animated HTML diagrams, インタラクティブ図, 動く構成図. When an editable .drawio file is required, use the draw.io workflow instead and treat Archify HTML only as a supplement.
Generate ASCII-art text banners for terminals, READMEs, and CLI startup messages. Use when a user asks for an ASCII banner, text art, バナー, アスキーアート, or a decorative header for a script/README.