gbsoss/ai-drawio
Overview
This skill generates draw.io (diagrams.net) diagrams from natural language and renders them in a browser. It produces precise draw.io XML, wraps it into a full mxfile, and serves an HTML preview with an embedded viewer so you can inspect the result instantly.
How this skill works
Describe the diagram you want, and the skill converts that description into a set of mxCell elements following draw.io conventions and layout constraints. It assembles a complete mxfile XML, URL-encodes it into a viewer iframe, writes an HTML preview, starts a local HTTP server, and opens the page in a browser for immediate rendering and optional screenshot capture.
When to use it
- Create flowcharts, decision trees, or process diagrams from plain English.
- Generate architecture diagrams (including AWS shapes) quickly from a textual spec.
- Produce mind maps or brainstorming maps without manually drawing nodes.
- Automate diagram generation in documentation pipelines or demos.
- Preview and iterate on diagram layouts programmatically before sharing.
Best practices
- Provide a concise, ordered description of nodes, labels, and connections for predictable layouts.
- Specify desired canvas constraints (approximate width/height or viewport) to keep elements visible.
- Name element types (Start, Process, Decision, End) to apply correct styles automatically.
- Ask for explicit edge labels and connection sides if you need precise routing.
- Group related nodes and use consistent color semantics for clarity and accessibility.
Example use cases
- Turn a login flow description into a flowchart with Start, Enter Credentials, Validate, Success/Failure, End.
- Generate an AWS architecture diagram listing components (API Gateway -> Lambda -> RDS -> S3) using AWS shape styles.
- Create a decision tree for QA triage with diamond decision nodes and labeled edges.
- Produce a mind map from a list of topics and subtopics to visualize relationships.
- Automate diagram snapshots for release notes by generating XML and capturing a browser screenshot.
FAQ
Yes — request specific shape styles, fill and stroke colors, or use semantic roles (Start, Process, Decision) and the skill will apply the matching palette.
How do I get the diagram in an editable draw.io file?
The skill outputs a full mxfile XML embedded in the iframe URL. You can copy the XML into diagrams.net or decode the iframe URL to import and edit the diagram.
