draw.io

Claude Code

1. Ejecútalo en un terminal, en la carpeta de tu proyecto:

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

1. Inicia Claude Code y escribe /mcp. drawio debería aparecer como conectado.

Añade --scope user para que esté disponible en todos los proyectos, no solo en este.

Claude Desktop

1. Abre Settings → Connectors y haz clic en Add custom connector.
2. Llámalo draw.io y pega esta URL:

https://mcp.draw.io/mcp

1. Haz clic en Add. Sus herramientas aparecen en el menú de herramientas del chat.

El archivo de configuración JSON de Claude Desktop solo inicia servidores locales. Los servidores remotos van por Connectors, y los conectores que añades en claude.ai también aparecen aquí.

claude.ai

1. Abre el formulario de conectores en claude.ai. Este botón rellena el nombre y la URL por ti:

Añadir a claude.ai (se abre en una pestaña nueva)

1. Comprueba que la URL es https://mcp.draw.io/mcp y haz clic en Add.
2. Actívalo en un chat desde el menú de herramientas.

Los planes gratuitos permiten un conector personalizado. En los planes Team y Enterprise lo añade un propietario en Organization settings → Connectors.

ChatGPT

1. En chatgpt.com, abre Settings → Security and login y activa Developer mode.
2. Ve a chatgpt.com/plugins y haz clic en + para crear una app para un servidor MCP remoto.
3. Pega https://mcp.draw.io/mcp como URL del servidor y elige No authentication.

El modo de desarrollador está disponible en la web para las cuentas Plus, Pro, Business, Enterprise y Education.

Cursor

Añadir a Cursor (se abre en una pestaña nueva)

O añádelo a mano en ~/.cursor/mcp.json (todos los proyectos) o en .cursor/mcp.json (este proyecto):

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

VS Code

Instalar en VS Code (se abre en una pestaña nueva)

O desde un terminal:

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

O haz commit en el repositorio en .vscode/mcp.json:

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

Devin Desktop

1. Añádelo a ~/.config/devin/mcp_config.json (macOS y Linux) o a %APPDATA%\devin\mcp_config.json (Windows):

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

1. Actualiza la lista de servidores MCP en Cascade.

Devin Desktop es el nuevo nombre de Windsurf. Para los servidores remotos lee serverUrl (o url).

Codex

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

O edita directamente ~/.codex/config.toml:

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

Gemini CLI

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

Así lo añades al proyecto actual. Añade -s user para usarlo en todas partes.

Cualquier cliente

La mayoría de los clientes aceptan esta forma. Algunos llaman de otra manera al campo de la URL: serverUrl en Devin Desktop, httpUrl en el archivo de ajustes de Gemini CLI.

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

Zed pone los servidores bajo context_servers en sus ajustes. Cline necesita "type": "streamableHttp"; si no, supone SSE.

¿Tu cliente solo inicia servidores locales? Conéctalo con npx -y mcp-remote https://mcp.draw.io/mcp.

Insignia para README

[![draw.io on mcp.tc](https://mcp.tc/i/drawio/badge.svg)](https://mcp.tc/i/drawio)

<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>

Sigue el modo claro u oscuro de quien lee. Añade ?theme=light o ?theme=dark para fijarlo, o ?style=compact para mostrar el símbolo sin la palabra.

Tarjeta para web

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

La tarjeta aparece donde esté la etiqueta. Añade data-theme="dark" o data-size="compact" a la etiqueta para cambiarla. El archivo contiene todo lo que necesita, así que no hace otras solicitudes ni instala cookies.

iframe

<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>

Úsalo en páginas que no permiten scripts. Añade ?theme=light o ?theme=dark a la dirección para fijar los colores.

JSON

La ficha como datos para tus propias páginas y herramientas: nombre, descripción corta, la URL propia del servidor, herramientas y los enlaces «Add to». Cualquier web puede leerla (CORS abierto).

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

Qué significa cada campo