Drawio
Generate and edit draw.io diagrams from your agent via the Next AI Draw.io MCP server (npx).
Overview
drawio is an agent skill most often used in Build (also Validate, Launch) that connects agents to draw.io through the Next AI Draw.io MCP server for editable diagrams.
Install
npx skills add https://github.com/bahayonghang/drawio-skills --skill drawioWhat is this skill?
- Wires draw.io through MCP: npx @next-ai-drawio/mcp-server
- Produces mxGraphModel / .drawio XML agents can iterate on
- Styled flow elements (start, credentials, decision rhombus) with consistent palette
- CLI-friendly mxfile host for version-controlled diagrams
- Pairs with agent sessions for architecture and user-journey visuals
- MCP package pin example: @next-ai-drawio/mcp-server@0.4.13
Adoption & trust: 4.8k installs on skills.sh; 204 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need trustworthy architecture or flow diagrams in repo docs but hand-drawing in the browser breaks your agent workflow.
Who is it for?
Indie builders documenting APIs, auth flows, and infra with agent-editable draw.io sources.
Skip if: High-fidelity marketing creative, pixel-perfect UI mocks, or environments that block npx/network MCP installs.
When should I use this skill?
Agent or user needs draw.io diagrams via MCP (npx draw.io server configuration in skill).
What do I get? / Deliverables
Your agent emits and revises versionable draw.io XML through MCP so diagrams stay in sync with specs and READMEs.
- draw.io-compatible mxfile or XML fragment
- Updated diagram graphs for flows and architecture
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Architecture and flow diagrams usually ship with the product docs during build, then reuse at launch and operate. Diagrams clarify APIs, auth flows, and ops runbooks—canonical docs shelf for visual system documentation.
Where it fits
Add a service topology diagram next to your API README before merging.
Sketch user login and decision branches for a stakeholder review call.
Refresh a public how-it-works flowchart for a launch post.
Update an incident runbook diagram after a routing change.
How it compares
MCP-backed diagram source files—not a standalone whiteboard app or generic markdown-only docs skill.
Common Questions / FAQ
Who is drawio for?
Solo builders using MCP-enabled agents who want draw.io diagrams generated and updated from chat or codebase context.
When should I use drawio?
In Build for architecture docs; in Validate to visualize prototype flows; in Launch when publishing technical explainers or onboarding graphics.
Is drawio safe to install?
It runs an npx-fetched MCP server—review the Security Audits panel on this Prism page and pin package versions in production setups.
SKILL.md
READMESKILL.md - Drawio
{ "mcpServers": { "drawio": { "command": "npx", "args": ["--yes", "@next-ai-drawio/mcp-server@0.4.13"] } } } <?xml version="1.0" encoding="UTF-8"?> <mxfile host="cli" modified="" agent="drawio-skill-cli" version="21.0.0"> <diagram name="Page-1"> <mxGraphModel dx="1120" dy="720" grid="1" gridSize="8" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1112" pageHeight="272" math="1" background="#FFFFFF"><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" value="Start" style="rounded=1;arcSize=50;html=1;whiteSpace=wrap;fillColor=#F0FDF4;strokeColor=#166534;strokeWidth=1.5;fontColor=#14532D;fontSize=13;fontFamily=Inter, Roboto, system-ui, -apple-system, sans-serif;verticalAlign=middle;align=center" vertex="1" parent="1"><mxGeometry x="64" y="104" width="80" height="40" as="geometry"/></mxCell><mxCell id="3" value="Enter Credentials" style="rounded=1;arcSize=20;html=1;whiteSpace=wrap;fillColor=#D1FAE5;strokeColor=#059669;strokeWidth=1.5;fontColor=#14532D;fontSize=13;fontFamily=Inter, Roboto, system-ui, -apple-system, sans-serif;verticalAlign=middle;align=center" vertex="1" parent="1"><mxGeometry x="176" y="104" width="120" height="60" as="geometry"/></mxCell><mxCell id="4" value="Valid?" style="rhombus;html=1;whiteSpace=wrap;fillColor=#FEF9C3;strokeColor=#CA8A04;strokeWidth=1.5;fontColor=#14532D;fontSize=13;fontFamily=Inter, Roboto, system-ui, -apple-system, sans-serif;verticalAlign=middle;align=center" vertex="1" parent="1"><mxGeometry x="328" y="104" width="120" height="60" as="geometry"/></mxCell><mxCell id="5" value="MFA Required?" style="rhombus;html=1;whiteSpace=wrap;fillColor=#FEF9C3;strokeColor=#CA8A04;strokeWidth=1.5;fontColor=#14532D;fontSize=13;fontFamily=Inter, Roboto, system-ui, -apple-system, sans-serif;verticalAlign=middle;align=center" vertex="1" parent="1"><mxGeometry x="480" y="104" width="120" height="60" as="geometry"/></mxCell><mxCell id="6" value="Verify MFA" style="rounded=1;arcSize=20;html=1;whiteSpace=wrap;fillColor=#D1FAE5;strokeColor=#059669;strokeWidth=1.5;fontColor=#14532D;fontSize=13;fontFamily=Inter, Roboto, system-ui, -apple-system, sans-serif;verticalAlign=middle;align=center" vertex="1" parent="1"><mxGeometry x="632" y="104" width="120" height="60" as="geometry"/></mxCell><mxCell id="7" value="Login Success" style="rounded=1;arcSize=50;html=1;whiteSpace=wrap;fillColor=#F0FDF4;strokeColor=#166534;strokeWidth=1.5;fontColor=#14532D;fontSize=13;fontFamily=Inter, Roboto, system-ui, -apple-system, sans-serif;verticalAlign=middle;align=center" vertex="1" parent="1"><mxGeometry x="784" y="104" width="80" height="40" as="geometry"/></mxCell><mxCell id="8" value="Login Failed" style="rounded=1;arcSize=50;html=1;whiteSpace=wrap;fillColor=#F0FDF4;strokeColor=#166534;strokeWidth=1.5;fontColor=#14532D;fontSize=13;fontFamily=Inter, Roboto, system-ui, -apple-system, sans-serif;verticalAlign=middle;align=center" vertex="1" parent="1"><mxGeometry x="896" y="104" width="80" height="40" as="geometry"/></mxCell><mxCell id="9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#14532D;strokeWidth=2;endArrow=block;endFill=1;jumpStyle=arc;jumpSize=8" edge="1" parent="1" source="2" target="3"><mxGeometry relative="1" as="geometry"/></mxCell><mxCell id="10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#14532D;strokeWidth=2;endArrow=block;endFill=1;jumpStyle=arc;jumpSize=8" edge="1" parent="1" source="3" target="4"><mxGeometry relative="1" as="geometry"/></mxCell><mxCell id="11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#14532D;strokeWidth=2;endArrow=block;endFill=1;jumpStyle=arc;jumpSize=8" edge="1" parent="1" source="4" target="5"><mxGeometry relative="1" as="geometry"/></mxCell><mxCell id="12" value="Yes" style="edgeLabel;html=1;align=center;verticalAlign=middle;fontSize=11;fontColor=#16