Draw.io

Integra las capacidades de diagramación de Draw.io con agentes de IA, permitiendo el control y análisis programático de diagramas.

GitHub

1.5k

Prueba este MCPPatrocinado

Documentación

Servidor MCP de Draw.io

Hagamos algo de "Vibe Diagramming" con la herramienta de diagramación más extendida llamada Draw.io (Diagrams.net).

Aspectos Destacados

Plugin para Claude Code: /plugin marketplace add lgazo/drawio-mcp-server y luego /plugin install drawio, con los comandos de barra /drawio-open y /drawio-status
npx drawio-mcp-server install <host> escribe la configuración de MCP para claude-code, claude-desktop, codex, zed, opencode o all
Herramientas de persistencia de documentos: set-document-title y save-document
Mecanismo de compatibilidad de versiones de la API de la librería de Draw.io
Habilita Draw.io MCP en IFrames
Plantillas de AWS, GCP, Azure, Cisco19 y CiscoSafe detectadas automáticamente en tiempo de ejecución desde la barra lateral de drawio
Segmentación de múltiples documentos con selectores list-documents y target_document para flujos de trabajo con múltiples pestañas
Segmentación de múltiples páginas con selectores target_page obligatorios para herramientas con ámbito de página
Serialización FIFO por documento para operaciones en vivo, de modo que varios agentes puedan trabajar en diferentes archivos de forma segura
Herramientas de gestión de páginas: list-pages, get-current-page, create-page, copy-page, rename-page
Importa, incrusta o expande diagramas de Mermaid
El soporte para Firefox ha vuelto; el modo TLS es necesario
El servidor admite el modo TLS y opcionalmente genera certificados autofirmados
Importa y exporta diagramas desde/hacia XML, SVG (con XML incrustado) o PNG (con XML incrustado)
Control de geometría de aristas con puntos de paso y enrutamiento automático de auto-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 se 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, lo que permite a los asistentes de IA construir diagramas de arquitectura, diagramas de flujo y documentación visual de forma automática.

Dos formas de uso:

Editor integrado: el servidor aloja Draw.io directamente, accesible en tu navegador
Extensión de navegador: conéctate a Draw.io ejecutándose en tu navegador mediante la extensión

Experimental: la integración con la aplicación de escritorio draw.io (Electron) está en curso, pero actualmente bloqueada por un problema de CSP aguas arriba; consulta DESKTOP.md.

Requisitos

Node.js (v22 o superior; probado con v22 LTS y v24 LTS): 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 de inmediato con la bandera --editor.

Para la Extensión de Navegador

Extensión de navegador: drawio-mcp-extension
Draw.io abierto en tu navegador

Opcional

pnpm: gestor de paquetes preferido (npm también funciona bien)

Inicio Rápido

1. Configura tu host MCP

Ruta más rápida:

Claude Code: /plugin marketplace add lgazo/drawio-mcp-server y luego /plugin install drawio.
Cualquier otro host: npx drawio-mcp-server install <host> donde <host> es claude-code, claude-desktop, codex, zed, opencode o all.

Consulta docs/PLUGINS.md para la referencia completa, banderas y desinstalación, y docs/release.md para saber cómo se realizan los lanzamientos.

Instalación manual (fragmento JSON, ejemplo de Claude Desktop)

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

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

Para otros clientes MCP y configuración detallada (incluidas las opciones de pnpm), consulta Configuración.

2. Abre el editor

Después de reiniciar tu host MCP, abre: http://localhost:3000/

3. Comienza a diagramar

Ejemplos de indicaciones que puedes probar:

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

"Crea un diagrama de arquitectura basada en eventos de tres páginas. Usa tres agentes en paralelo para la topología de servicios, el flujo de mensajes y el manejo de reintentos/fallos, con cada agente asignado a una página de destino separada."

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

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

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

Características

El servidor proporciona herramientas MCP para:

Descubrimiento de documentos: lista las instancias de documentos de Draw.io conectadas y enruta llamadas posteriores a una instancia de pestaña/archivo específica
Inspección de diagramas: lee formas, páginas, capas y propiedades de celdas
Modificación de diagramas: agrega/edita/elimina formas, aristas y etiquetas en una página de destino
Gestión de páginas: lista páginas, inspecciona la página actual, crea páginas, copia páginas y renombra páginas sin forzar un cambio de página visible en entornos compatibles
Gestión de capas: crea, cambia y organiza capas
Cobertura de formas de proveedores: plantillas de AWS, GCP, Azure, Cisco19 y CiscoSafe detectadas automáticamente en tiempo de ejecución desde la barra lateral de drawio, de modo que los agentes puedan colocar iconos como mxgraph.gcp2.cloud_run o mxgraph.cisco19.router sin catálogos curados manualmente
TLS integrado: HTTPS + WSS opcional con clave/certificado manual o material autofirmado generado automáticamente mediante una CA local por usuario. Consulta CONFIG.md → TLS.

Consulta la Referencia de Herramientas para la lista completa de herramientas disponibles.

Instalación

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

Alternativa: Extensión de Navegador

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

Abre Draw.io en tu navegador
Instala la Extensión de Navegador Draw.io MCP:
- Chrome Web Store
- Complementos de Firefox
Asegúrate 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"]
    }
  }
}

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

Experimental: Draw.io Desktop

La integración con la aplicación de escritorio draw.io (Electron) es experimental y actualmente está bloqueada de extremo a extremo por un problema de CSP aguas arriba. El plugin se carga dentro de draw.io desktop, pero su conexión WebSocket de vuelta al servidor MCP es rechazada por la política connect-src 'self' codificada de draw.io.

Consulta DESKTOP.md para los pasos completos de configuración y la limitación actual.