Draw.io Diagram Skill Skill

Draw.io Diagram Skill

Create and edit professional diagrams with real-time browser preview.

MCP Server

This skill uses @next-ai-drawio/mcp-server. The .mcp.json in this skill directory configures it automatically.

Manual installation (if needed):

claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest

Quick Start

1. start_session           → Open browser preview
2. display_diagram(xml)    → Create new diagram
3. get_diagram + edit      → Modify existing
4. export_diagram(path)    → Save to file

MCP Tools Reference

| Tool | Parameters | Purpose | |------|------------|---------| | start_session | none | Open browser for real-time preview | | display_diagram | xml: string | Create new diagram (replaces existing) | | get_diagram | none | Get current diagram XML | | edit_diagram | operations: array | Modify diagram by cell ID | | export_diagram | path: string | Save as .drawio file |

Workflow

Creating New Diagram

1. Call start_session
2. Build mxfile XML with shapes and connections
3. Call display_diagram with XML
4. Iterate based on user feedback
5. Call export_diagram when done

Editing Existing Diagram

1. Call get_diagram (required within 30s before edit)
2. Parse XML to find cell IDs
3. Call edit_diagram with operations array

edit_diagram operations format:

{
  "operations": [
    {"operation": "add", "cell_id": "new-id", "new_xml": "<mxCell .../>"},
    {"operation": "update", "cell_id": "existing-id", "new_xml": "<mxCell .../>"},
    {"operation": "delete", "cell_id": "remove-id"}
  ]
}

XML Structure

Basic template:

<mxfile host="app.diagrams.net">
  <diagram name="Diagram" id="diagram-1">
    <mxGraphModel dx="1422" dy="794" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <!-- Add shapes and edges here, starting from id="2" -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Critical Rules:

IDs 0 and 1 are reserved (root cells)
Visual elements start from ID 2+
All shapes need vertex="1" and <mxGeometry>
All edges need edge="1" with source and target

Common Patterns

Rectangle Shape

<mxCell id="2" value="Label" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
</mxCell>

Rounded Rectangle

<mxCell id="3" value="Label" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="100" y="200" width="120" height="60" as="geometry"/>
</mxCell>

Arrow Connection

<mxCell id="4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=classic;" edge="1" parent="1" source="2" target="3">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

Decision Diamond

<mxCell id="5" value="Condition?" style="rhombus;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="100" y="300" width="80" height="80" as="geometry"/>
</mxCell>

References

XML Format Details: See references/xml-format.md for complete style reference
Diagram Patterns: See references/diagram-patterns.md for flowchart and architecture templates

Agent Skills: Draw.io Diagram Skill

Skill Files