drawio-diagram-forge
26
总安装量
26
周安装量
#7715
全站排名
安装命令
npx skills add https://github.com/aktsmm/agent-skills --skill drawio-diagram-forge
Agent 安装分布
claude-code
20
codex
15
opencode
15
gemini-cli
14
github-copilot
14
trae
12
Skill 文档
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
| Tool | Required |
|---|---|
| VS Code | Yes |
| Draw.io Integration | Yes |
| GitHub Copilot | Yes |
Quick Start
Create a login flow diagram
Generate an Azure Hub-Spoke architecture diagram
From inputs/requirements.md, create a system diagram
Output Formats
| Extension | Description | When to Use |
|---|---|---|
*.drawio |
Native format | Recommended |
*.drawio.svg |
SVG + metadata | Markdown/Web |
*.drawio.png |
PNG + metadata | Image with edit |
Output: outputs/
Workflow
USER INPUT â ORCHESTRATOR â MANIFEST GATEWAY â SVG FORGE â COMPLETED
Quality Gates
| Score | Action |
|---|---|
| 90-100 | Proceed |
| 70-84 | Fix and retry |
| 50-69 | Simplify |
| 0-29 | Ask user |
Limits
| Limit | Value |
|---|---|
| Manifest revision | 2 |
| SVG revision | 2 |
| Total timeout | 45min |
Cloud Icons
Enable in VS Code
- Open
.drawiofile - Click “+ More Shapes” (bottom-left)
- Enable: Azure, AWS
- Apply
Azure Format (Critical)
<!-- WRONG -->
<mxCell style="shape=mxgraph.azure.front_door;..." />
<!-- CORRECT -->
<mxCell style="aspect=fixed;image=img/lib/azure2/networking/Front_Doors.svg;..." />
References
| File | Description |
|---|---|
| mxcell-structure.md | mxCell XML structure |
| cloud-icons.md | Azure/AWS icon guide |
| style-guide.md | Node colors, edge styles |
Scripts
| Script | Description |
|---|---|
scripts/validate_drawio.py |
Validate mxCell structure |
Troubleshooting
| Issue | Solution |
|---|---|
| Blank in draw.io | Check content attribute |
| Edges not visible | Verify node IDs |
| Icons missing | Enable Azure/AWS shapes |
Done Criteria
-
.drawioor.drawio.svgfile generated - Diagram opens correctly in VS Code Draw.io extension
- All nodes and edges visible
- Quality gate score ⥠85