drawio-skill

Generates draw.io diagrams from textual descriptions and exports them to multiple formats.

12|1|Updated Mar 15, 2026
One-click install
npx skills add https://github.com/jorgeasaurus/agent-skills --skill drawio-skill-jorgeasaurus
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: drawio-skill
Source: https://github.com/jorgeasaurus/agent-skills/tree/main/drawio-skill
Command: npx skills add https://github.com/jorgeasaurus/agent-skills --skill drawio-skill-jorgeasaurus

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires drawio, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps users create diagrams, flowcharts, and architecture visuals quickly and efficiently using the draw.io desktop app and Claude's vision capabilities.

Core Features & Use Cases

  • Diagram Generation: Generate diagrams, flowcharts, and architecture charts based on user descriptions.
  • Visual Self-Check: Utilize Claude's vision to perform self-checks on the generated diagrams for visual correctness.
  • Export to Multiple Formats: Export diagrams in various formats like PNG, SVG, PDF, and JPG with optional XML embedding for editability.

Quick Start

Generate a diagram of a simple network topology with two routers and a switch.

Frequently Asked Questions about drawio-skill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate flowcharts from text descriptions automatically?

You can generate flowcharts from text by providing a textual description to the diagram generation process, which creates a JSON render specification and outputs a visual diagram. This skill uses draw.io to render the final architecture visualization from your prompt.

Does draw.io work with Claude's vision model for diagram creation?

Yes, draw.io works with Claude's vision model to perform visual self-checks on generated diagrams. Claude's vision capabilities evaluate the visual correctness of the diagram generation output and refine the architecture visualization automatically.

What is the best way to export draw.io diagrams to multiple formats?

The best way to export draw.io diagrams to multiple formats is by using the draw.io desktop app CLI. You can export your generated diagrams to PNG, SVG, PDF, and JPG formats, with an option to embed XML for later editing.

Do I need the draw.io desktop app CLI to create architecture visualizations?

Yes, you need the draw.io desktop app CLI installed to create architecture visualizations with this skill. The diagram generation process requires the CLI to render JSON specifications into visual outputs and export them successfully.

Can I embed XML when exporting diagrams to PNG or SVG?

Yes, you can embed XML when exporting diagrams to formats like PNG and SVG. This optional XML embedding ensures the exported file remains editable later in draw.io while retaining the visual correctness checked by Claude's vision.

How does visual self-checking work for generated diagrams?

Visual self-checking works by passing the generated diagram to Claude's vision model to evaluate its visual correctness against the original text description. This mechanism ensures the diagram generation output accurately reflects the requested architecture visualization.