An MCP (Model Context Protocol) server that enables LLMs to create and open diagrams in draw.io. Supports native draw.io XML, Mermaid.js syntax, and CSV data formats.

When an LLM calls one of the tools, the server compresses the diagram content, builds a draw.io URL with the #create hash parameter, and opens it in your default browser — the diagram appears instantly in the draw.io editor, ready to edit and export.

git clone https://github.com/mingrath/drawio-mcp.git
cd drawio-mcp
npm install
npm run build

Or install globally:

npm install -g drawio-mcp

Add to your ~/.claude/settings.json:

{
  "mcpServers": {
    "drawio-mcp": {
      "command": "node",
      "args": ["/absolute/path/to/drawio-mcp/dist/index.js"]
    }
  }
}

Add to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json on macOS):

{
  "mcpServers": {
    "drawio-mcp": {
      "command": "node",
      "args": ["/absolute/path/to/drawio-mcp/dist/index.js"]
    }
  }
}

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="2" value="Service A" style="rounded=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
      <mxGeometry x="100" y="100" width="140" height="60" as="geometry"/>
    </mxCell>
    <mxCell id="3" value="Service B" style="rounded=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
      <mxGeometry x="320" y="100" width="140" height="60" as="geometry"/>
    </mxCell>
    <mxCell id="4" style="endArrow=block;endFill=1;" edge="1" source="2" target="3" parent="1">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

sequenceDiagram
    participant Client
    participant API
    participant DB

    Client->>API: POST /users
    API->>DB: INSERT user
    DB-->>API: OK
    API-->>Client: 201 Created

# label: %name%
# style: whiteSpace=wrap;html=1;rounded=1;fillColor=#dae8fc;strokeColor=#6c8ebf;
# connect: {"from":"manager","to":"name","invert":true,"style":"endArrow=blockThin;endFill=1;"}
# layout: auto
name,manager
CEO,
CTO,CEO
CFO,CEO
VP Engineering,CTO
VP Product,CTO

All three tools accept these optional parameters:

1. The LLM calls a tool with diagram content (XML, Mermaid, or CSV).
2. The server URI-encodes and deflate-compresses the content.
3. A draw.io URL is constructed with the compressed data in a #create= hash fragment.
4. The URL opens in your default browser — draw.io reads the hash and renders the diagram.

Because the data lives in the URL hash fragment, it is never sent to any server.

npm run dev    # Watch mode — recompiles on changes
npm run build  # One-time build
npm start      # Run the compiled server

• Node.js >= 18
• A browser (for opening diagrams)

MIT - Mingrath Mekavichai