skills.rest
matsumuratk
matsumuratkCOMMUNITY
Explore all skills by this author →
GitHub

drawio

Generates draw.io diagrams as native .drawio XML files with optional PNG, SVG, or PDF export.

1|Updated Jul 12, 2026
Search Tags:#flowchart#xml#export#diagram#drawio#mxgraph#architecture diagram
One-click install
npx skills add https://github.com/matsumuratk/elmo-aws --skill drawio-matsumuratk
Or copy as Structured Prompt for Agentâ–¼
Please help me install this Agent Skill.
Skill: drawio
Source: https://github.com/matsumuratk/elmo-aws/tree/main/.claude/skills/drawio
Command: npx skills add https://github.com/matsumuratk/elmo-aws --skill drawio-matsumuratk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating diagrams manually in draw.io is slow, and text-based formats like Mermaid cannot be saved as native editable draw.io files. This Skill generates mxGraphModel XML directly, producing .drawio files that open immediately in draw.io, with optional export to PNG, SVG, or PDF while keeping the diagram editable. ## Core Features & Use Cases - Native .drawio generation: Writes mxGraphModel XML for flowcharts, ER diagrams, sequence diagrams, architecture diagrams, wireframes, and more, with correct edge routing, containers, and dark-mode color handling. - CLI export with embedded XML: Uses the draw.io desktop CLI across macOS, Linux, Windows, and WSL2 to export PNG, SVG, or PDF with the diagram XML embedded, so exported files remain editable. - Use Case: Ask for an architecture overview of your microservices and receive an editable architecture-overview.drawio.pdf, or request a login flowchart and get a login-flow.drawio file opened directly in draw.io. ## Quick Start Ask the assistant to create a flowchart for the user login process and export it as a PNG file.

Frequently Asked Questions about drawio

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

FAQPage Schema
How do I create a draw.io diagram from a text description?â–¼

Describe the diagram you want, such as a flowchart or ER diagram, and the Skill generates mxGraphModel XML written to a .drawio file in your current directory. The file opens directly in draw.io for editing.

How do I export a draw.io diagram to PNG, SVG, or PDF?â–¼

Mention the format in your request, for example asking for a PNG flowchart. The Skill runs the draw.io desktop CLI with the --embed-diagram flag, producing a .drawio.png, .drawio.svg, or .drawio.pdf file that stays editable in draw.io.

Does draw.io export work without the desktop app installed?â–¼

No, PNG, SVG, and PDF export requires the draw.io desktop CLI. Without it, the Skill keeps the native .drawio file, which you can open and edit directly in draw.io once installed.

Can I use draw.io export on WSL2?â–¼

Yes, the Skill detects WSL2 via /proc/version and invokes the Windows draw.io executable through /mnt/c/Program Files/draw.io/draw.io.exe. It uses wslpath to convert paths when opening the exported file.

Why are my draw.io edges not rendering correctly?â–¼

Edges fail to render when the edge mxCell is self-closing without a child mxGeometry element. Every edge must include <mxGeometry relative="1" as="geometry" /> as a child element to be valid.

Can draw.io files be generated from Mermaid or CSV formats?â–¼

No, Mermaid and CSV require draw.io server-side conversion and cannot be saved as native files. The Skill generates mxGraphModel XML directly, which works offline and is immediately editable.

Related Skills

Explore More Software Engineering Skills→
jaimedhenriquesjaimedhenriques

excalidraw-diagram-generator

Generate Excalidraw diagrams from natural language descriptions.

Community
Advanced
466852675466852675

fireworks-tech-graph

Generate validated SVG technical diagrams and export PNG images.

Community
Advanced
LKB-99LKB-99

database-schema

Design database schemas and generate ER diagrams in PlantUML or Mermaid.

Community
Advanced
qprjack86qprjack86

excalidraw

Create hand-drawn whiteboard diagrams and wireframes as editable Excalidraw JSON.

Community
Intermediate