Servidor MCP de Draw.io

Hagamos diagramas con estilo usando la herramienta de diagramación más extendida llamada Draw.io (Diagrams.net).

Aspectos destacados

• Importación y exportación de diagramas desde/hacia XML, SVG (con XML incrustado) o PNG (con XML incrustado)

• Control de geometría de bordes con puntos de referencia y enrutamiento automático de conectores

• Relaciones padre-hijo para formas anidadas y agrupación

• Servidor y extensión unificados en el mismo mono-repositorio

• Editor de Draw.io integrado: no requiere extensión de navegador

• Servidor MCP que permite a los agentes de IA controlar diagramas de Draw.io

• Creación, inspección y modificación programática de diagramas mediante herramientas MCP

• Gestión de capas para diagramas complejos

• Funciona con cualquier cliente MCP (Claude Desktop, Claude Code, Zed, Codex, etc.)

Introducción

El servidor MCP de Draw.io aporta capacidades de diagramación de Draw.io a los agentes de IA. Proporciona herramientas MCP que pueden crear, leer, actualizar y eliminar elementos de diagramas, permitiendo a los asistentes de IA construir diagramas de arquitectura, diagramas de flujo y documentación visual automáticamente.

Dos formas de usarlo:

1. Editor integrado - El servidor aloja Draw.io directamente, accesible en su navegador

2. Extensión de navegador - Conéctese a Draw.io ejecutándose en su navegador mediante una extensión

Requisitos

• Node.js (v20 o superior) - Entorno de ejecución para el servidor MCP

• Cliente MCP - Claude Desktop, Claude Code, Zed, Codex, OpenCode o cualquier host compatible con MCP

Para el editor integrado

No se requieren requisitos adicionales: funciona directamente con la bandera --editor.

Para la extensión de navegador

• Extensión de navegador - drawio-mcp-extension

• Draw.io abierto en su navegador

Opcional

• pnpm - Gestor de paquetes preferido (npm también funciona bien)

Inicio rápido

1. Configure su host MCP

Añada el servidor a la configuración de su cliente MCP:

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

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "drawio-mcp-server", "--editor"]
    }
  }
}

claude mcp add-json drawio '{"type":"stdio","command":"npx","args":["-y","drawio-mcp-server","--editor"]}'

Añada a ~/.config/zed/settings.json:

{
  "context_servers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "drawio-mcp-server", "--editor"],
      "env": {}
    }
  }
}

Edite ~/.codex/config.toml:

[mcp_servers.drawio]
command = "npx"
args = ["-y", "drawio-mcp-server", "--editor"]

Añada a opencode.json en la raíz de su proyecto o en ~/.config/opencode/opencode.json:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "drawio": {
      "type": "local",
      "command": ["npx", "-y", "drawio-mcp-server", "--editor"],
      "enabled": true
    }
  }
}

Para otros clientes MCP y configuración detallada (incluyendo opciones de pnpm), consulte Configuración.

2. Abra el editor

Después de reiniciar su host MCP, abra: http://localhost:3000/

3. Empiece a diagramar

Ejemplos de prompts que puede probar:

"Crea un diagrama de arquitectura basada en eventos que muestre una cola de mensajes con productores, consumidores y tres servicios backend"

"Dibuja un diagrama de API CRUD con una base de datos, una puerta de enlace de API y cuatro microservicios con sus puntos finales"

"Añade una nueva capa llamada 'Fondo' y mueve todos los elementos decorativos a ella, luego crea una nueva capa para anotaciones"

Su asistente de IA ahora puede controlar el diagrama usando herramientas MCP.

Características

El servidor proporciona herramientas MCP para:

• Inspección de diagramas - leer formas, capas y propiedades de celdas

• Modificación de diagramas - añadir/editar/eliminar formas, bordes y etiquetas

• Gestión de capas - crear, cambiar y organizar capas

Consulte la Referencia de herramientas para obtener la lista completa de herramientas disponibles.

Instalación

El servidor se ejecuta como parte de su host MCP. La configuración detallada para todos los clientes compatibles (Claude Desktop, Claude Code, Zed, Codex, oterm), incluyendo opciones de npm y pnpm, está disponible en Configuración.

Alternativa: Extensión de navegador

En lugar del editor integrado, puede usar la extensión de navegador para conectarse a Draw.io ejecutándose en su navegador. Esto funciona con o sin la bandera --editor.

1. Abra Draw.io en su navegador

2. Instale la extensión de navegador Draw.io MCP:

   • Chrome Web Store

   • Complementos de Firefox

3. Asegúrese de que la extensión esté conectada (superposición de señal verde en el icono)

Configuración sin --editor:

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

Consulte la documentación de la extensión para más detalles.

Recursos relacionados

Configuración - Banderas de CLI y opciones avanzadas

Referencia de herramientas - Documentación completa de herramientas MCP

Solución de problemas

Ejemplos de prompts

Contribución

Arquitectura

Desarrollo

Historial de estrellas

Evaluaciones