diagram-generator_skill

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.