drawio
drawio generates native .drawio diagram files from either Mermaid syntax or draw.io XML, supporting flowcharts, architecture diagrams, ER diagrams, sequence diagrams, and more. Export to PNG, SVG, or PDF with embedded XML for editing, or open directly in the draw.io editor via browser URL. XML diagrams can be auto-laid out using ELK layout presets.
drawio creates and exports diagrams as native .drawio files using Mermaid or XML authoring.
AI-generated summary based on this skill's SKILL.md
Install
jgraph/drawio-mcp/drawio · repository language: JavaScript
git clone https://github.com/jgraph/drawio-mcp
cp -r drawio-mcp/plugins/claude-code/skills/drawio ~/.claude/skills/drawioFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What types of diagrams can drawio create?
drawio generates native .drawio diagram files for flowcharts, architecture diagrams, ER diagrams, sequence diagrams, class diagrams, network diagrams, org charts, state machines, and UML diagrams. Each diagram type is fully editable and can be exported or opened in the draw.io editor.
Can I create a flowchart with drawio?
Yes. drawio creates flowcharts by accepting either Mermaid syntax or draw.io XML as input. The generated .drawio files are native diagram files that can be exported to PNG, SVG, or PDF, or opened directly in the draw.io browser editor for further editing.
What export formats does drawio support?
drawio exports diagrams to PNG, SVG, and PDF formats. All exports retain embedded XML, allowing you to re-import and edit the diagram later. You can also generate shareable browser URLs that open your diagram directly in the draw.io editor.
How does drawio handle diagram layout?
drawio supports auto-layout using ELK (Eclipse Layout Kernel) presets, which automatically position diagram elements for cleaner, more readable results. This is especially useful for complex architecture and network diagrams that benefit from algorithmic arrangement.
What input formats does drawio accept?
drawio accepts Mermaid syntax and draw.io XML as input formats. Both are converted into native .drawio files. Mermaid syntax is ideal for quick text-based diagram creation, while XML provides fine-grained control over diagram structure and styling.
Can I share diagrams created with drawio?
Yes. drawio generates shareable browser URLs that allow others to open and edit your diagrams directly in the draw.io editor without downloading files. Exported PNG, SVG, and PDF files with embedded XML also preserve editability when re-imported.
SKILL.md
rendered from the published skill — quoted content, verbatim
Draw.io Diagram Skill
Generate draw.io diagrams as native .drawio files. Author each diagram either as Mermaid (concise text that the draw.io desktop CLI converts and lays out for you) or as draw.io XML directly. Optionally auto-layout XML-authored diagrams with ELK, export to PNG/SVG/PDF with the diagram XML embedded (so the exported file stays editable in draw.io), or generate a browser URL that opens the diagram directly in the draw.io editor.
Authoring: Mermaid or XML?
The desktop CLI can convert Mermaid to a native .drawio file, so prefer Mermaid for the diagram types it handles well — its parser lays the diagram out automatically, which is far more reliable than hand-positioning cells in XML.
| Author as | Best for | Needs desktop CLI? |
|---|---|---|
| Mermaid | Flowcharts, sequence, class, |
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
plugins/claude-code/skills/drawio/SKILL.md