How to use the Draw.io Diagram Generator agent skill

What the skill makes the agent do

When the skill is loaded, the agent knows how to write draw.io files in the mxGraph XML format. It follows a consistent colour palette, uses templates for flowcharts, system architecture, sequence, ER and UML class diagrams, and falls back to shape libraries for network topology and BPMN workflows. The skill also covers the full path from request to finished file: understanding the request, planning the layout, generating the XML, saving the file and telling you how to open it.

The output is a file with a .drawio, .drawio.svg or .drawio.png extension. The skill's documentation says these open in the draw.io VS Code extension (hediet.vscode-drawio), and you can also use the draw.io web or desktop app.

• Flowcharts with decisions and branches
• System architecture (multi-tier or layered services)
• Sequence diagrams with lifelines and timed messages
• ER diagrams with tables and relationships
• UML class diagrams with classes, interfaces, enums and relationships
• Network topology using shape libraries
• Editing an existing .drawio file

Install the skill from the ZIP download

Download the ZIP for draw-io-diagram-generator from this page, then unzip it. You can install the skill for yourself across projects or for a single project.

For a personal install, unzip it into ~/.claude/skills/. For a project install, unzip it into the project's .claude/skills/ folder. If you prefer the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

The skill is named draw-io-diagram-generator and its main instructions are in SKILL.md. Keep the references/ and scripts/ folders next to it so the agent can read them.

• Personal: ~/.claude/skills/
• Project: .claude/skills/ inside your repository
• Claude apps: Settings → Capabilities → Skills, then upload

Set up the optional VS Code extension and Python

To open generated files directly in VS Code, install the draw.io extension with the id hediet.vscode-drawio. The skill's prerequisites give this command for installing it from VS Code's command line.

The helper scripts need Python 3.8 or newer. Python is optional: the agent can still write diagrams without it, but the validation and shape-insertion scripts will not run.

Ask for a diagram in plain language

You do not need special syntax. The skill's trigger phrases include requests such as "create a diagram", "draw a flowchart", "generate an architecture diagram", "design a sequence diagram", "make a UML class diagram" and "build an ER diagram". Requests to add to or change an existing .drawio file also trigger it.

The agent works best when your request names the diagram type, the components, how they connect and where to save the file. If you leave something out, the skill tells the agent to infer the most sensible diagram type from context, for example treating "show the tables" as an ER diagram.

• Name the type: flowchart, architecture, sequence, ER, UML class, network
• List the components, actors, classes or tables
• Describe the connections and their direction
• Give an output path, such as docs/payments-flow.drawio
• For edits, name the existing file

Examples of requests

Here are requests that match the skill's described use. Each one names a diagram type and the parts it should contain.

• "Draw a sequence diagram of the checkout API call: browser, API gateway, orders service and payment provider. Save it as docs/checkout-sequence.drawio."
• "Generate an architecture diagram for our three-tier app: React frontend, Node API, PostgreSQL. Put it in docs/architecture.drawio."
• "Make an ER diagram from the tables in db/schema.sql and save it to docs/data-model.drawio."
• "Add a Redis cache box between the API and the database in docs/architecture.drawio."
• "Create a flowchart for password reset with a decision for expired links."

Check the output and use the validator

After writing the file, the skill tells the agent to run the validator, which is scripts/validate-drawio.py. Pass it the path to your file. The skill describes the validator as optional but recommended. It checks the diagram's structure. The scripts/README.md file and scripts/add-shape.py cover the shape-insertion helper.

Always open the file and look at it. The agent places shapes by coordinates and the layout is approximate, so you may need to move boxes or tidy edges.

Safety notes: scripts and network

The skill runs scripts: yes. Its bundled Python scripts are scripts/validate-drawio.py and scripts/add-shape.py. They are meant to check a diagram's structure and add shapes to an existing file. Read them before you run them in a sensitive repository, as you would with any code you install.

The skill's metadata states that it does not use the network. Confirm this yourself by reading the scripts if it matters to your environment.

• Scripts run locally on the files you point them at
• Review scripts/ before running them in sensitive projects
• Keep diagrams in version control so you can review changes

Tips for better results

Give the agent real names from your system, such as service names and table names, so the diagram matches your docs. Ask for one diagram per file when the topic is large, since the skill's layout guidance uses rows and tiers and dense diagrams get harder to read.

Keep the request specific about direction and relationships. If a result looks wrong, reply with the exact change you want rather than starting over, so the agent edits the existing file.

• Use your own component and table names
• One diagram per file for large systems
• Ask for specific changes to an existing file instead of regenerating
• Check arrows and labels by eye before sharing