How-to · Design & Creative · By Agents365

How to use Draw.io Diagrams in your AI agent

Install and use the Draw.io Diagrams skill in Claude Code, Cursor, Codex, Gemini CLI, OpenCode, and Windsurf — with sample prompts.

What you'll get

This skill creates and edits diagrams as editable draw.io files rather than flat images. Describe what you need, like a flowchart, swimlane process, mind map, timeline, org-style chart, or system overview, and it lays it out, checks it visually for overlaps, and exports PNG, SVG, or PDF. It also has deep features for turning technical system files into architecture diagrams.

Step 1 — Get the skill source URL

The Draw.io Diagrams skill lives at:

Open ↗

Step 2 — Add it to your AI agent

Copy one of these prompts and paste it into your AI tool. The agent will fetch and install the skill for you.

Claude Code

Add the agent skill from https://github.com/Agents365-ai/drawio-skill/tree/main/skills/drawio-skill to my project.

Cursor

Install this agent skill: https://github.com/Agents365-ai/drawio-skill/tree/main/skills/drawio-skill

Codex

Add this skill to .codex/skills/: https://github.com/Agents365-ai/drawio-skill/tree/main/skills/drawio-skill

Gemini CLI

Add the skill at https://github.com/Agents365-ai/drawio-skill/tree/main/skills/drawio-skill to my .gemini/skills/ directory.

OpenCode

Install this agent skill from https://github.com/Agents365-ai/drawio-skill/tree/main/skills/drawio-skill

Windsurf

Add this skill: https://github.com/Agents365-ai/drawio-skill/tree/main/skills/drawio-skill

Step 3 — Try these prompts

Once the skill is installed, ask your AI things like:

  • You need a process or workflow diagram for an SOP or team doc
  • You want a swimlane chart showing who does what across teams
  • You need a diagram you can keep editing in draw.io later, not a static image
  • Mapping how your company's systems or tools connect

What this skill does

  • Turns a plain-language description into an editable draw.io diagram
  • Handles flowcharts, swimlanes, business process maps, mind maps, timelines, and system diagrams
  • Checks the drawing for overlapping boxes, crossed lines, and unreadable labels
  • Exports to PNG, SVG, or PDF while keeping the file editable
  • Makes targeted edits to an existing diagram without wrecking its layout
SkillDraw.io Diagrams
Made byAgents365
CategoryDesign & Creative
SourceView original ↗