drawio-diagram-forge

Original：🇺🇸 English
Translated
1 scriptsChecked / no sensitive code detected

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.

9installs
Sourceaktsmm/agent-skills
Added on

NPX Install

npx skill4agent add aktsmm/agent-skills drawio-diagram-forge

Tags

Translated version includes tags in frontmatter
drawio-diagram-generationai-agent-workflowcloud-architecture-diagramseditable-diagramsazure-aws-icons

SKILL.md Content

View Translation Comparison →

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

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

Output Formats

ExtensionDescriptionWhen to Use
*.drawio
Native formatRecommended
*.drawio.svg
SVG + metadataMarkdown/Web
*.drawio.png
PNG + metadataImage with edit
Output: 
outputs/

Workflow

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.py
Validate mxCell structure

Troubleshooting

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

Done Criteria

  • .drawio
    or 
    .drawio.svg
    file generated
  • Diagram opens correctly in VS Code Draw.io extension
  • All nodes and edges visible
  • Quality gate score ≥ 85