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
Decision gist · record as of 2026-07-24
drawio creates and exports diagrams as native .drawio files using Mermaid or XML authoring. 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.
Use it when
- Yes.
- drawio exports diagrams to PNG, SVG, and PDF formats.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
jgraph/drawio-mcp/drawio · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
plugins/claude-code/skills/drawio/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create and design diagrams (flowcharts, architecture, ER, sequence, class, network)”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Drawio generates native `.drawio` diagram files in mxGraphModel XML format and optionally exports to PNG, SVG, or PDF with embedded XML for continued editing. Built for flowcharts, architecture diagrams, ER schemas, sequence diagrams, and GRC workflows with conventions for swimlanes, control IDs, and compliance-focused styling.
drawio-skill creates polished diagrams—architecture, UML, ER, flowcharts, BPMN, and more—from text descriptions or code imports. It generates .drawio XML and exports locally via the draw.io desktop CLI to PNG, SVG, PDF, or JPG, with optional embedding for editability. Use it for precise, styled diagrams with rich shape libraries and swimlanes; for casual sketches or Markdown-embedded diagrams, consider mermaid or excalidraw instead.
Turn code into editable diagrams. This skill converts Mermaid, XML, or CSV into draw.io diagrams that open directly in your browser—perfect for flowcharts, architecture diagrams, org charts, UML, and any visual layout you need. Users get a clickable link to view and modify each diagram instantly.
Turn descriptions, images, or spreadsheets into professional draw.io diagrams ready for editing and documentation. The skill orchestrates a multi-step workflow to produce native .drawio files with support for Azure and AWS cloud icons, quality gates, and output in SVG or PNG formats alongside the editable source.
Create polished diagrams—flowcharts, organizational hierarchies, UML schematics, and network layouts—as draw.io-compatible XML files. The skill handles diagram structure, styling, and layout, then outputs files you can open directly in draw.io's desktop or web application.
Dashmotion generates professional animated technical diagrams as single self-contained HTML+SVG files. Use it for flowcharts, workflows, architecture diagrams, and system topologies—especially when you want connectors that visibly flow and requests that travel as light dots through the system. Output is lightweight, loops forever, and opens in any browser without dependencies.
More skills Drawio To Png (unlicensed) · wechat-article-writer (Apache-2.0) · Agents Bruce Drawio (unlicensed) · Drawio (unlicensed) · Grc System Boundary Diagram (NOASSERTION) · Grc Data Flow Diagram (NOASSERTION) · Grc Audit Workflow Diagram (NOASSERTION)