Draw Io Diagram Generator
Generate draw.io (mxfile) architecture and system diagrams from conversation instead of hand-editing XML or fighting empty canvases.
Overview
draw-io-diagram-generator is an agent skill most often used in Build (also Ship, Operate) that produces draw.io mxfile XML architecture diagrams from natural-language system descriptions.
Install
npx skills add https://github.com/github/awesome-copilot --skill draw-io-diagram-generatorWhat is this skill?
- Emits valid draw.io mxfile XML with swimlanes, tiers, and labeled components
- Architecture template includes Client Layer tiering and titled system views
- Documents Cisco shape library usage with fallback rounded-box styles when shapes are unavailable
- Tuned for VS Code draw.io extension workflows (page geometry, grid, connectors)
Adoption & trust: 1.8k installs on skills.sh; 34.6k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You know your system design in words but lack a fast, consistent way to turn it into editable draw.io diagrams stakeholders and agents can reuse.
Who is it for?
Indie devs documenting layered architectures, client/API boundaries, and deployment sketches before or after implementation.
Skip if: Pixel-perfect UI mockups, auto-rendered PNG-only exports with no XML, or teams standardized on Mermaid-only docs with no draw.io toolchain.
When should I use this skill?
User wants a system architecture, component, or network diagram as draw.io / mxfile XML, especially with swimlanes or Cisco shapes.
What do I get? / Deliverables
You get paste-ready mxfile XML you can open in draw.io or VS Code, refine visually, and commit alongside README or ADR docs.
- mxfile XML diagram
- Layered architecture layout with labeled components
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
First shelf is Build → docs because the primary artifact is shareable system documentation diagrams, even though the same output supports review and ops communication later. Outputs are mxGraphModel XML for draw.io—not runnable code—so docs is the canonical home versus frontend implementation.
Where it fits
Turn a micro-SaaS API + worker layout into a tiered Client Layer diagram for the README.
Hand reviewers a single draw.io map of services before approving a release.
Refresh connection arrows after moving a queue or gateway in production.
How it compares
Use when you need editable draw.io XML diagrams, not when a one-line Mermaid snippet in markdown is enough.
Common Questions / FAQ
Who is draw-io-diagram-generator for?
Solo builders and small teams using Copilot-class agents who document systems in draw.io or the VS Code draw.io extension.
When should I use draw-io-diagram-generator?
In Build → docs for architecture write-ups, Ship → review when explaining design to reviewers, and Operate → infra when updating live topology diagrams after changes.
Is draw-io-diagram-generator safe to install?
It is documentation-oriented generation with no mandatory external calls in the excerpt; still check the Security Audits panel on this Prism page before installing in a locked-down org.
SKILL.md
READMESKILL.md - Draw Io Diagram Generator
<mxfile host="Electron" modified="2026-03-25T00:00:00.000Z" version="26.0.0"> <diagram id="architecture" name="Architecture"> <mxGraphModel dx="1422" dy="762" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0"> <root> <mxCell id="0" /> <mxCell id="1" parent="0" /> <!-- TITLE --> <mxCell id="2" value="System Architecture" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=18;fontStyle=1;" vertex="1" parent="1"> <mxGeometry x="330" y="30" width="500" height="40" as="geometry" /> </mxCell> <!-- ====== TIER 1: CLIENT LAYER ====== --> <mxCell id="tier1" value="Client Layer" style="swimlane;startSize=30;fillColor=#dae8fc;strokeColor=#6c8ebf;fontStyle=1;fontSize=13;" vertex="1" parent="1"> <mxGeometry x="60" y="100" width="1050" height="130" as="geometry" /> </mxCell> <!-- NOTE: Cells id="3" and id="4" use Cisco shape library. Enable it in VS Code draw.io extension: More Shapes > Networking > Cisco. If the library is unavailable, replace with: style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" --> <mxCell id="3" value="Web Browser" style="shape=mxgraph.cisco.computers_and_peripherals.pc;html=1;pointerEvents=1;dashed=0;fillColor=#dae8fc;strokeColor=#6c8ebf;sketch=0;aspect=fixed;" vertex="1" parent="tier1"> <mxGeometry x="60" y="40" width="100" height="70" as="geometry" /> </mxCell> <mxCell id="4" value="Mobile App" style="shape=mxgraph.cisco.computers_and_peripherals.mobile_phone;html=1;pointerEvents=1;dashed=0;fillColor=#dae8fc;strokeColor=#6c8ebf;sketch=0;aspect=fixed;" vertex="1" parent="tier1"> <mxGeometry x="220" y="40" width="60" height="80" as="geometry" /> </mxCell> <mxCell id="5" value="Third-party Client" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="tier1"> <mxGeometry x="370" y="50" width="160" height="60" as="geometry" /> </mxCell> <!-- ====== TIER 2: API GATEWAY ====== --> <mxCell id="tier2" value="API Gateway / Load Balancer" style="swimlane;startSize=30;fillColor=#fff2cc;strokeColor=#d6b656;fontStyle=1;fontSize=13;" vertex="1" parent="1"> <mxGeometry x="60" y="270" width="1050" height="130" as="geometry" /> </mxCell> <mxCell id="6" value="API Gateway" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;" vertex="1" parent="tier2"> <mxGeometry x="200" y="30" width="160" height="60" as="geometry" /> </mxCell> <mxCell id="7" value="Auth / JWT" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;" vertex="1" parent="tier2"> <mxGeometry x="440" y="30" width="160" height="60" as="geometry" /> </mxCell> <mxCell id="8" value="Rate Limiter" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;" vertex="1" parent="tier2"> <mxGeometry x="680" y="30" width="160" height="60" as="geometry" /> </mxCell> <!-- ====== TIER 3: SERVICES ====== --> <mxCell id="tier3" value="Services Layer" style="swimlane;startSize=30;fillColor=#d5e8d4;strokeColor=#82b366;fontStyle=1;fontSize=13;" vertex="1" parent="1"> <mxGeometry x="60" y="440" width="