skills.rest
obispobruno
obispobrunoCOMMUNITY
Explore all skills by this author →
GitHub

drawio

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

1|Updated Aug 1, 2024
Search Tags:#mermaid#flowchart#visualization#xml#export#diagram#drawio
One-click install
npx skills add https://github.com/obispobruno/dotfiles --skill drawio-obispobruno
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: drawio
Source: https://github.com/obispobruno/dotfiles/tree/main/dot_agents/skills/drawio
Command: npx skills add https://github.com/obispobruno/dotfiles --skill drawio-obispobruno

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating diagrams by hand-positioning shapes in draw.io is slow and error-prone, and exporting editable diagram files from the command line requires knowing the draw.io Desktop CLI's quirks. This Skill automates authoring diagrams as Mermaid or mxGraphModel XML, converting them to native .drawio files, applying ELK auto-layouts, and exporting to PNG, SVG, PDF, or shareable browser URLs. ## Core Features & Use Cases - Mermaid or XML authoring: Write concise Mermaid for standard diagram types (flowcharts, sequence, ER, class, state, gantt, C4) and let the draw.io CLI convert and lay it out, or author raw mxGraphModel XML for custom styling and shape libraries like AWS and Azure. - ELK auto-layout and export: Apply layout presets (verticalFlow, horizontalFlow, tree, radial, organic) or orthogonal edge routing to XML diagrams, then export to PNG/SVG/PDF with the diagram XML embedded so the output stays editable in draw.io. - Browser URL output: Compress the diagram XML with Node.js zlib and generate an app.diagrams.net URL that opens the diagram directly in the browser, with platform-specific handling for macOS, Linux, Windows, and WSL2. - Use Case: Ask for a PNG flowchart of a login process; the Skill writes Mermaid, converts it to a .drawio file via the 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 drawio -x -f xml -o diagram.drawio diagram.mmd 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, ER, and gantt diagrams when the draw.io Desktop CLI is installed, since it handles layout automatically. Use XML for custom styling, precise positioning, shape libraries like AWS or Azure, or when the CLI is not available.

Can I export draw.io diagrams to PNG, SVG, or PDF from the command line?▼

Yes, the draw.io Desktop CLI exports with drawio -x -f png -e -b 10 -o output.drawio.png input.drawio. The -e flag embeds the diagram XML so the exported PNG, SVG, or PDF remains editable when reopened in draw.io.

Why does exporting Mermaid directly to PNG fail in draw.io?▼

Direct .mmd to PNG export with the -e 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.

Does this work without the draw.io Desktop app installed?▼

Without the desktop app, Mermaid conversion, ELK layouts, and image export are unavailable. The fallback is authoring the diagram directly as mxGraphModel XML and delivering a .drawio file or a browser URL that opens it at app.diagrams.net.

Why does a draw.io browser URL open an empty diagram on Windows?▼

cmd.exe treats ampersands as command separators and strips the #create fragment containing the diagram payload. Write a temporary .url shortcut file and open that instead of passing the URL directly to cmd.exe start.

Related Skills

Explore More Design & Creative Skills→
zzafergokzzafergok

c4-architecture

Generate C4 model architecture diagrams in Mermaid syntax from codebase analysis.

Community
Intermediate
i9wa4i9wa4
11

draw-io

Edit .drawio diagram XML and export transparent 2x PNGs.

Community
Advanced
ribeec20ribeec20

diagrams

Generate technical diagrams in Mermaid, PlantUML, D2, and Graphviz formats.

Community
Advanced
gao-hongnangao-hongnan
3

drawio

Generate .drawio files and visual exports from Mermaid or XML.

Community
Advanced