Stop Hand‑Drawing Diagrams: One‑Sentence Architecture Generation with Claude Code + Drawio MCP

Drawio MCP Core Features

Open XML diagram : Load native draw.io/mxGraph XML.

Import CSV data : Convert tabular data into org charts, flowcharts, etc.

Render Mermaid.js : Transform Mermaid syntax into editable draw.io diagrams.

Custom display : Supports lightbox mode, dark mode, and other UI options.

Installation (Spring Boot 3.5.0 environment)

npx (recommended) npx @drawio/mcp Global npm install

npm install -g @drawio/mcp

drawio-mcp

From source

git clone https://github.com/jgraph/drawio-mcp.git

cd drawio-mcp/mcp-tool-server

npm install

npm start

Claude Configuration

Add the following block to the Claude Desktop configuration file (

~/.Library/Application Support/Claude/claude_desktop_config.json

on macOS or %APPDATA%\Claude\claude_desktop_config.json on Windows):

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@drawio/mcp"]
    }
  }
}

Alternatively, register the MCP via Claude Code command: claude mcp add drawio -- npx -y @drawio/mcp Or edit .claude/settings.json directly:

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "@drawio/mcp"]
    }
  }
}

Available Tools

open_drawio_xml

content (string, required): Draw.io XML content.

lightbox (boolean, optional, default false): Read‑only preview mode.

dark (string, optional, default "auto"): "auto" / "true" / "false" to control dark mode.

open_drawio_csv

content (string, required): CSV formatted data.

lightbox (boolean, optional, default false): Read‑only preview mode (editable when false).

dark (string, optional, default "auto"): "auto" / "true" / "false".

open_drawio_mermaid

content (string, required): Mermaid.js syntax.

lightbox (boolean, optional, default false): Read‑only preview mode.

dark (string, optional, default "auto"): "auto" / "true" / "false".

Practical Usage

In Claude Code, verify the MCP works; the tool opens the official draw.io URL ( https://app.diagrams.net/) in a browser and displays the generated diagram. The base URL can be overridden by adding an environment variable:

{
  "drawio": {
    "command": "npx",
    "args": ["@drawio/mcp"],
    "env": {"DRAWIO_BASE_URL": "http://localhost:7007"}
  }
}

Example prompt in Claude Code: draw a sequence diagram for a user login flow The resulting diagram opens automatically. Screenshots from the verification step:

Skills (Export Options)

Draw.io provides SKILLS to generate native .drawio files and optionally export them as PNG, SVG, or PDF. The workflow:

Generate draw.io‑compatible XML based on the diagram request.

Write the XML to a .drawio file in the current directory.

Depending on the requested format, either invoke the draw.io desktop CLI for image export or compress the XML into a URL (e.g., https://app.diagrams.net/#create=...) and open it in a browser.

Installing a Skill

mkdir -p ~/.claude/skills/drawio

cp drawio/SKILL.md ~/.claude/skills/drawio/SKILL.md

Using the Skill

Default usage creates a .drawio file and opens it in draw.io. To export directly, specify the format in the request:

/drawio png flowchart for user login       → login-flow.drawio.png

/drawio svg: ER diagram for e-commerce   → er-diagram.drawio.svg

/drawio pdf architecture overview        → architecture-overview.drawio.pdf

/drawio url flowchart for user login    → opens app.diagrams.net in browser, keeps login-flow.drawio locally

These commands generate the diagram, export it in the chosen format, and optionally open a shareable URL.