AgentSkillsCN

drawio-diagram-forge

根据文本、图片或 Excel 数据生成 draw.io 可编辑的图表（.drawio、.drawio.svg）。通过三重智能体协作流程（分析 → 清单 → SVG 生成）并设置质量关卡，助力架构图、流程图、序列图的绘制，或将现有图片转换为可编辑格式。支持 Azure/AWS 云服务图标。

SKILL.md
--- frontmatter
name: drawio-diagram-forge
description: 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.
license: CC BY-NC-SA 4.0
metadata:
  author: yamapan (https://github.com/aktsmm)

Draw.io Diagram Forge

Generate draw.io editable diagrams using AI-powered workflow.

When to Use

  • •Creating architecture diagrams (Azure, AWS)
  • •Converting flowcharts from text descriptions
  • •Transforming images/screenshots into editable format
  • •Generating swimlane, sequence diagrams

Prerequisites

ToolRequired
VS CodeYes
Draw.io IntegrationYes
GitHub CopilotYes

Quick Start

code
Create a login flow diagram
code
Generate an Azure Hub-Spoke architecture diagram
code
From inputs/requirements.md, create a system diagram

Output Formats

ExtensionDescriptionWhen to Use
*.drawioNative formatRecommended
*.drawio.svgSVG + metadataMarkdown/Web
*.drawio.pngPNG + metadataImage with edit

Output: outputs/

Workflow

code
USER INPUT → ORCHESTRATOR → MANIFEST GATEWAY → SVG FORGE → COMPLETED

Quality Gates

ScoreAction
90-100Proceed
70-84Fix and retry
50-69Simplify
0-29Ask user

Limits

LimitValue
Manifest revision2
SVG revision2
Total timeout45min

Cloud Icons

→ references/cloud-icons.md

Enable in VS Code

  1. •Open .drawio file
  2. •Click "+ More Shapes" (bottom-left)
  3. •Enable: Azure, AWS
  4. •Apply

Azure Format (Critical)

xml
<!-- WRONG -->
<mxCell style="shape=mxgraph.azure.front_door;..." />

<!-- CORRECT -->
<mxCell style="aspect=fixed;image=img/lib/azure2/networking/Front_Doors.svg;..." />

References

FileDescription
mxcell-structure.mdmxCell XML structure
cloud-icons.mdAzure/AWS icon guide
style-guide.mdNode colors, edge styles

Scripts

ScriptDescription
scripts/validate_drawio.pyValidate mxCell structure

Troubleshooting

IssueSolution
Blank in draw.ioCheck content attribute
Edges not visibleVerify node IDs
Icons missingEnable Azure/AWS shapes