TL;DR - Quick Setup

Want to generate diagrams directly in Claude? Here is the fast track configuration for your claude_desktop_config.json:

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

Restart Claude Desktop, and then ask: “Create a flowchart for a user login system.”

Why Draw.io with Claude?

If you are like me, explaining architecture or complex flows in text can get wordy and confusing. “Component A talks to B, which then signals C…” is much harder to parse than a simple arrow connecting boxes.

The Official Draw.io MCP Server (@drawio/mcp) bridges this gap. It allows Claude to:

  1. Generate Diagrams: Create flowcharts, sequence diagrams, and system architectures from scratch.
  2. Edit Existing Diagrams: Update diagrams based on new requirements.
  3. Render Visuals: See the diagram directly in the chat interface (depending on the client support).

This is a game-changer for documentation, brainstorming, and technical specs.

Prerequisites

Before we start, ensure you have the following:

  • Claude Desktop App: Installed on your Mac or Linux machine.
  • Node.js: Version 18 or higher.
    • Check your version: node -v
    • If missing, I recommend using nvm (Node Version Manager) to install it.

Step-by-Step Setup Guide

1. Locate Configuration File

You need to edit the highly specific claude_desktop_config.json file.

On macOS: Open your terminal and run:

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

(Or use nano, vim, or open -e if you don’t use VS Code)

On Linux: The file is typically located at:

~/.config/Claude/claude_desktop_config.json

2. Add the Draw.io Server

Add the following entry to the mcpServers object in your config file. If the file is empty, wrap it in curly braces.

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

What is this doing?

  • It tells Claude to run the npx command.
  • The -y flag automatically creates the environment without prompting.
  • @drawio/mcp is the official package containing the server logic.

3. Restart Claude

For the changes to take effect:

  1. Close the Claude Desktop interface completely.
  2. Re-open it.

You should see a generic “MCP” icon or indicator (depending on your version) showing that tools are loaded.

Alternative: Setup with Claude Code CLI

If you prefer using the Claude Code CLI (command line interface) instead of the Desktop app, you can add the server directly using the claude mcp add command.

This is particularly useful if you want to scope the tool to a specific project or your user account without editing JSON files manually.

One-Line Setup

Run this command in your terminal:

claude mcp add drawio --scope user -- npx -y @drawio/mcp

Breakdown of the command:

  • claude mcp add drawio: Tells Claude to add a new MCP server named “drawio”.
  • --scope user: Installs it globally for your user account (use --scope project to install for the current folder only).
  • --: Separator indicating the start of the actual server command.
  • npx -y @drawio/mcp: The command to run the Draw.io server.

Once added, you can verify it with:

claude mcp list

How to Use It

Once connected, you can converse with Claude naturally about diagrams.

Creating a New Diagram

Prompt:

“Create a sequence diagram for an OAuth 2.0 authentication flow involving a User, Client App, Authorization Server, and Resource Server.”

Claude will generate the XML or specific format required for Draw.io and often provide a link or a rendered view.

Editing a Diagram

If you have a diagram file (e.g., XML) in your project context, you can ask Claude to modify it.

Prompt:

“Update the attached architecture diagram to include a Redis cache layer between the API and the Database.”

Complex Visualizations

You aren’t limited to simple boxes. You can ask for:

  • Mind Maps: “Create a mind map for a marketing strategy.”
  • ER Diagrams: “Generate an Entity-Relationship diagram for an e-commerce database schema.”
  • Network Topologies: “Draw a high-availability AWS network setup with public and private subnets.”

Troubleshooting

“Command not found: npx”

If Claude complains it can’t find npx, you might need to provide the absolute path.

  1. Run which npx in your terminal. (e.g., /usr/local/bin/npx)
  2. Update your config:
    "drawio": {
  "command": "/usr/local/bin/npx",
  "args": ["-y", "@drawio/mcp"]
}

Server Error / Disconnection

If the server crashes, check your Node.js version. The Draw.io MCP server requires a modern Node environment. Ensure node -v returns v18.x.x or newer.

Resources