ntaksh42 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解析エラーの場合、
--がコメント内にないか確認