drawio

Generate draw.io diagrams from Mermaid or XML and export to PNG, SVG, or PDF.

Updated Dec 9, 2025
One-click install
npx skills add https://github.com/Aki2022/skills --skill drawio-aki2022
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: drawio
Source: https://github.com/Aki2022/skills/tree/main/drawio
Command: npx skills add https://github.com/Aki2022/skills --skill drawio-aki2022

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating diagrams manually in a visual editor is slow and hard to reproduce. This Skill generates native .drawio diagram files programmatically from Mermaid text or mxGraphModel XML, with automatic layout and export to shareable formats. ## Core Features & Use Cases - Mermaid or XML authoring: Write concise Mermaid for standard diagram types (flowchart, sequence, class, ER, gantt, C4) and let the draw.io CLI convert and lay it out, or author XML directly for custom shapes and precise control. - ELK auto-layout: Apply layered, tree, radial, or organic layouts to XML-authored diagrams so you only define nodes and edges, not coordinates. - Multiple output formats: Deliver .drawio files, export to PNG/SVG/PDF with embedded editable XML, or generate a browser URL that opens the diagram at app.diagrams.net. - Use Case: Ask for a PNG flowchart of a login process; the Skill writes Mermaid, converts it to .drawio via the desktop CLI, exports an editable PNG, and opens the result. ## Quick Start Create a flowchart of 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 Mermaid?

Write the Mermaid source to a .mmd file, then run the draw.io desktop CLI with -x -f xml to convert it into a native .drawio file. The CLI's Mermaid parser lays out the diagram automatically, so no manual positioning is needed.

Should I author diagrams as Mermaid or draw.io XML?

Prefer Mermaid for standard types like flowcharts, sequence, class, and ER diagrams when the desktop CLI is installed, since it handles layout automatically. Use XML for custom styling, precise positioning, specific shape libraries like AWS or Azure, or when the CLI is not available.

Can I export draw.io diagrams to PNG, SVG, or PDF?

Yes, the draw.io desktop CLI exports .drawio files to PNG, SVG, and PDF using the -x -f flags. Adding -e embeds the diagram XML in the exported file, so it stays editable when reopened in draw.io.

Does this work without the draw.io desktop app installed?

Without the desktop CLI, you can still author diagrams directly as mxGraphModel XML and deliver a .drawio file or a browser URL that opens at app.diagrams.net. Mermaid conversion, ELK layout, and image export all require the desktop app.

Why does exporting Mermaid directly to PNG fail?

Direct .mmd to PNG export with the embed flag is broken in current draw.io Desktop because the embedded-XML step crashes. Convert the Mermaid to a .drawio file first, then export that file to PNG for a reliable result.

How do I auto-layout a hand-written draw.io XML diagram?

Pass --layout with a preset like verticalFlow, horizontalFlow, verticalTree, or organic to the CLI, and ELK will position the nodes automatically. You only need to define the graph structure of nodes and edges, not coordinates.