drawio-diagram

DrawIO Diagram Skill

Create diagrams and open them in the Draw.io editor via the bundled CLI.

CLI Location

{SKILL_DIR}/scripts/drawio-cli.js

Execute with: node {SKILL_DIR}/scripts/drawio-cli.js <command> --content "<content>"

Available Commands

Command	Input	Use Case
open-drawio-xml	Draw.io XML (mxGraph format)	Full control over layout, styling, custom shapes
open-drawio-csv	CSV with draw.io directives	Org charts, hierarchies from tabular data
open-drawio-mermaid	Mermaid.js syntax	Quick flowcharts, sequence/class/state/ER diagrams

Workflow

1. Determine the best input format based on the diagram type (see Decision Guide below)
2. Generate the diagram content
3. Execute the CLI to open in Draw.io editor
4. Report the result to the user

Decision Guide

• Simple flowchart / sequence / class diagram → Mermaid (fastest, least verbose)
• Org chart / hierarchy from data → CSV
• Precise layout, custom styling, complex diagrams → XML

Command Usage

Mermaid (Recommended for most cases)

node {SKILL_DIR}/scripts/drawio-cli.js open-drawio-mermaid --content "graph TD; A[Start] --> B{Decision}; B -->|Yes| C[OK]; B -->|No| D[End];"

Supported Mermaid diagram types: flowchart, sequence, class, state, ER, gantt, pie, journey.

XML

node {SKILL_DIR}/scripts/drawio-cli.js open-drawio-xml --content '<mxfile><diagram name="Page-1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" value="Hello" style="rounded=1;whiteSpace=wrap;" vertex="1" parent="1"><mxGeometry x="120" y="60" width="120" height="60" as="geometry"/></mxCell></root></mxGraphModel></diagram></mxfile>'

XML notes:

• Do not use -- (double hyphen) inside XML comments (it breaks XML parsers)
• style Control styles with attributes (semicolon-separated)
• Coordinates are specified with mxGeometry の x, y, width, height Specify with

CSV

node {SKILL_DIR}/scripts/drawio-cli.js open-drawio-csv --content '## label: %name%
## style: shape=%shape%;fillColor=%fill%;strokeColor=%stroke%;
## namespace: csvimport-
## connect: {"from":"manager","to":"name","style":"curved=1;endArrow=blockThin;endFill=1;"}
## width: auto
## height: auto
## padding: 15
name,shape,fill,stroke,manager
CEO,mxgraph.basic.rect,#dae8fc,#6c8ebf,
CTO,mxgraph.basic.rect,#d5e8d4,#82b366,CEO
CFO,mxgraph.basic.rect,#d5e8d4,#82b366,CEO'

Options

Flag	Description
--lightbox true	Read-only view mode
--dark auto|true|false	Dark mode (default: auto)
--timeout <ms>	Timeout in ms (default: 30000)

XML Style Reference

For XML diagrams, see references/xml-styles.md for common shape styles and color palettes.

Error Handling

• If CLI startup fails,npx @drawio/mcp check for the existence of
• In case of timeout,--timeout increase (default 30 seconds)
• In case of XML parsing error,-- check whether it is not inside a comment