Skip to content
Get packs

Draw.io Diagram Studio

Creates and edits editable draw.io diagrams from descriptions, code, or infrastructure files.

Source Download skill
Repository
Agents365-ai/drawio-skill
Stars
10,519
Licence
MIT
Files
15 files

What it does

Once installed, the agent can produce editable draw.io (diagrams.net) files instead of flat pictures. It can draw architecture, UML, ERD, sequence, BPMN, network and swimlane diagrams from a plain-language description, or build them automatically from code, Terraform, Kubernetes, SQL or API schemas. It can also update existing diagrams, run rule checks, export PNG or other formats, and convert screenshots into editable diagrams.

Great for

  • Developers who want architecture or infrastructure diagrams generated from their code or Terraform
  • Architects and product teams who need diagrams they can keep editing in draw.io
  • Teams that want diagram checks (architecture policies, visual diffs) in CI

Skip it if

  • Simple flowcharts where Mermaid or PlantUML as text is enough (the skill itself recommends those), since draw.io files are harder to diff and version
  • Environments where you cannot install Python 3 or run local scripts, since most features depend on them
  • Sensitive infrastructure: scanning live clusters or cloud state and sending it to a network-enabled workflow may expose internal details

Try asking

  • “Turn this Terraform folder into an editable draw.io architecture diagram grouped by region”
  • “Update my existing architecture.drawio to reflect the changes in the infra directory without losing my manual layout”
  • “Review this diagram against our architecture policy file and list the violations”
  • “Convert this whiteboard photo into an editable draw.io diagram”
Step-by-step guide: how to use Draw.io Diagram StudioInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 15 original files, the MIT licence and an attribution note.

    drawio-skill.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip drawio-skill.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip drawio-skill.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Be specific about the diagram type and audience, for example 'deployment view for the on-call team', so the agent picks the right route
  • For large graphs, give the agent the source files (Terraform, compose, OpenAPI) rather than describing every node by hand
  • Review the generated .drawio file in draw.io; semantic findings are inferred and should be verified before being treated as fact

What's inside

  • agents/openai.yaml
  • data/databricks-icons.json
  • data/diagram-ir.schema.json
  • data/lobe-icons.json
  • data/SHAPE-INDEX-NOTICE.md
  • references/autolayout.md
  • references/ci-gate.md
  • references/cookbook.md
  • references/databricks.md
  • references/derasterize.md
  • references/diagram-ir.md
  • references/diagram-types.md
  • references/live-infra.md
  • references/mcp.md
  • SKILL.md

Redistributed unmodified from Agents365-ai/drawio-skill under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.