DrawIO Diagram Skill Skill

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

Determine the best input format based on the diagram type (see Decision Guide below)
Generate the diagram content
Execute the CLI to open in Draw.io editor
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注意点:

XMLコメント内に -- (ダブルハイフン) を使わないこと（XMLパーサーが壊れる）
style 属性でスタイルを制御（セミコロン区切り）
座標は mxGeometry の x, y, width, height で指定

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

CLI起動に失敗した場合、npx @drawio/mcp の存在を確認
タイムアウトの場合、--timeout を増やす（デフォルト30秒）
XML解析エラーの場合、-- がコメント内にないか確認

Agent Skills: DrawIO Diagram Skill

Install this agent skill to your local

Skill Files