draw.io

listing.by

Create draw.io diagrams from XML or Mermaid and render them inline in chat, with search across 10,000+ shapes.

state.ok.long (state.ok.title)Streamable HTTP

listing.connect

listing.explain.none

https://mcp.draw.io/mcp

listing.note.none listing.note.none_direct

listing.share.h

listing.share.p

mcp.tc/i/drawio

listing.about

The official draw.io server lets an assistant create diagrams and show them as interactive draw.io views inside the conversation. create_diagram accepts draw.io XML or Mermaid syntax. search_shapes looks up exact style strings in about 10,000 built-in stencils (cloud, network, Kubernetes, BPMN, electrical) and the draw.io icon service.

It runs as a hosted endpoint at https://mcp.draw.io/mcp over streamable HTTP and needs no sign-in. Inline rendering needs a host that supports MCP Apps. Other hosts get the XML as text. A local alternative is available through npx @drawio/mcp, which opens diagrams in the draw.io editor.

listing.can

  • Create interactive diagrams from draw.io XML
  • Create diagrams from Mermaid syntax
  • Search about 10,000 built-in shapes by keyword
  • Find brand and concept icons through the icon service
  • Apply optional ELK auto-layout and libavoid edge routing
  • Open rendered diagrams in draw.io for editing

listing.tools 2

  • create_diagramlisting.hint.ro

    Create and display an interactive draw.io diagram from draw.io XML or Mermaid syntax.

  • search_shapeslisting.hint.ro

    Search the draw.io shape library by keyword and return style strings, sizes and titles.

listing.prov.live_on listing.prov.hints

listing.prompts

  • Draw a flowchart of our login and password reset process.

  • Create an AWS architecture diagram with a load balancer, EC2 and RDS.

  • Make a sequence diagram of an OAuth authorization code flow.

  • Find a Kubernetes pod shape and add it to my network diagram.

listing.setup.h

listing.setup.remote

Claude Code

  1. Run this in a terminal, in your project folder:
claude mcp add --transport http drawio https://mcp.draw.io/mcp
  1. Start Claude Code and type /mcp. drawio should show as connected.

Add --scope user to make it available in every project, not just this one.

Claude Desktop

  1. Open Settings → Connectors and click Add custom connector.
  2. Name it draw.io and paste this URL:
https://mcp.draw.io/mcp
  1. Click Add. Its tools appear in the chat's tools menu.

Claude Desktop's JSON config file only starts local servers. Remote servers go through Connectors, and connectors you add on claude.ai show up here too.

claude.ai

  1. Open the connector form on claude.ai. This button fills in the name and URL for you:
  1. Check that the URL reads https://mcp.draw.io/mcp and click Add.
  2. Turn it on in a chat from the tools menu.

Free plans allow one custom connector. On Team and Enterprise plans an owner adds it under Organization settings → Connectors.

ChatGPT

  1. On chatgpt.com, open Settings → Security and login and turn on Developer mode.
  2. Go to chatgpt.com/plugins and click + to create an app for a remote MCP server.
  3. Paste https://mcp.draw.io/mcp as the server URL and choose No authentication.

Developer mode is available on the web for Plus, Pro, Business, Enterprise and Education accounts.

Cursor

Or add it by hand to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (this project):

mcp.json
{
  "mcpServers": {
    "drawio": {
      "url": "https://mcp.draw.io/mcp"
    }
  }
}

VS Code

Or from a terminal:

code --add-mcp '{"name":"drawio","type":"http","url":"https://mcp.draw.io/mcp"}'

Or commit it to the repo in .vscode/mcp.json:

.vscode/mcp.json
{
  "servers": {
    "drawio": {
      "type": "http",
      "url": "https://mcp.draw.io/mcp"
    }
  }
}

Devin Desktop

  1. Add it to ~/.config/devin/mcp_config.json (macOS and Linux) or %APPDATA%\devin\mcp_config.json (Windows):
mcp_config.json
{
  "mcpServers": {
    "drawio": {
      "serverUrl": "https://mcp.draw.io/mcp"
    }
  }
}
  1. Refresh the MCP server list in Cascade.

Devin Desktop is the new name for Windsurf. It reads serverUrl (or url) for remote servers.

Codex

codex mcp add drawio --url https://mcp.draw.io/mcp

Or edit ~/.codex/config.toml directly:

config.toml
[mcp_servers.drawio]
url = "https://mcp.draw.io/mcp"

Gemini CLI

gemini mcp add --transport http drawio https://mcp.draw.io/mcp

This adds it to the current project. Add -s user to use it everywhere.

Any client

Most clients accept this shape. Some name the URL field differently: serverUrl in Devin Desktop, httpUrl in Gemini CLI's settings file.

{
  "mcpServers": {
    "drawio": {
      "type": "http",
      "url": "https://mcp.draw.io/mcp"
    }
  }
}

Zed puts servers under context_servers in its settings. Cline needs "type": "streamableHttp", or it assumes SSE.

Client only starts local servers? Bridge it with npx -y mcp-remote https://mcp.draw.io/mcp.

listing.faq

Can I paste mcp.tc/i/drawio into my MCP client?

No. mcp.tc links are pages, not server addresses. Connect with https://mcp.draw.io/mcp, so your client talks to draw.io directly. The quick link is for sharing: it opens this page, with setup steps for every client.

Does draw.io need an API key or a sign-in?

No. draw.io doesn't ask for an account or key.

Is draw.io a remote or a local server?

Remote. draw.io (JGraph) hosts it at https://mcp.draw.io/mcp, and it speaks Streamable HTTP. There's nothing to install.

What can draw.io do?

It has 2 tools: create_diagram and search_shapes. You can create interactive diagrams from draw.io XML, create diagrams from Mermaid syntax and search about 10,000 built-in shapes by keyword.

Which clients can use it?

Any client that supports remote MCP servers: Claude Code, Claude Desktop, claude.ai, ChatGPT in developer mode, Cursor, VS Code, Devin Desktop, Codex, Gemini CLI, Zed and others. The setup steps cover each one.

Who wrote this page?

mcp.tc's robot read draw.io's own metadata (its MCP handshake, tool list and public pages), and an AI model drafted the text from it. A person reviews anything the checks can't confirm. The text can still be wrong, so if you spot a mistake, use Report this listing on this page.

listing.em.h

listing.em.lead listing.em.how

listing.em.badge

em.prev_lightem.prev_dark
Markdown
[![draw.io on mcp.tc](https://mcp.tc/i/drawio/badge.svg)](https://mcp.tc/i/drawio)
HTML
<a href="https://mcp.tc/i/drawio"><img src="https://mcp.tc/i/drawio/badge.svg" alt="draw.io on mcp.tc" height="20"></a>

listing.em.badge_note

listing.em.widget

HTML
<script src="https://mcp.tc/w/drawio.js" async></script>

listing.em.widget_note

iframe

HTML
<iframe src="https://mcp.tc/embed/drawio" title="draw.io on mcp.tc" width="420" height="200" loading="lazy" allow="clipboard-write" style="border:0;border-radius:8px;max-width:100%"></iframe>

listing.em.iframe_note

JSON

listing.em.json

https://mcp.tc/i/drawio.json

listing.em.fields

listing.disclaimer_checked