Integración con IA (Servidor MCP)

Diagrammix incluye un servidor MCP (Model Context Protocol) integrado que permite a asistentes de IA como Claude y Codex leer y modificar tus diagramas directamente. Describe lo que necesitas en lenguaje natural, y la IA coloca símbolos, conectores y diseños en el lienzo por ti.

¿Qué Puede Hacer la IA?

  • Crear diagramas a partir de una descripción — solicita un diagrama de flujo, topología de red u organigrama y obtenlo en el lienzo al instante
  • Crear mapas mentales — describe un tema y obtén un mapa mental estructurado
  • Leer tu documento — la IA ve tus figuras, conectores, capas y estilos actuales
  • Modificar elementos existentes — actualiza texto, colores, posiciones o enrutamiento de conectores
  • Operaciones por lotes — crea diagramas completos con símbolos y conectores en un solo paso
  • Diseño automático y alineación — organiza elementos con comandos en lenguaje natural
  • Replicar un aspecto desde una imagen — dale a la IA una imagen de referencia y construirá una plantilla y un estilo personalizados que coincidan
  • Exportar — genera salida SVG bajo demanda

Requisitos

  • Diagrammix PRO (compra única)
  • Diagrammix debe estar ejecutándose con el servidor MCP habilitado
  • Al menos un documento de diagrama debe estar abierto
  • El cliente de IA y Diagrammix deben estar en la misma máquina (localhost)

No se necesita Node.js, npx ni mcp-remote — Diagrammix incluye un asistente nativo para los clientes que lo requieran.

Configuración

1. Habilitar el Servidor MCP

  1. Abre Diagrammix
  2. Ve a Diagrammix > Settings (o presiona Cmd+,)
  3. Cambia a la pestaña AI Integration
  4. Activa Enable AI Integration (MCP Server)

El servidor se inicia en http://localhost:8420/mcp.

2. Configurar Claude Desktop

Claude Desktop se conecta mediante stdio. Diagrammix incluye un asistente stdio nativo dentro del paquete de la aplicación, por lo que no se requiere Node.js, npx ni mcp-remote.

  1. Haz clic en Copy Config en los Ajustes de Diagrammix — esto rellena la ruta exacta al asistente incluido para tu instalación
  2. Abre el archivo de configuración de Claude Desktop: ~/Library/Application Support/Claude/claude_desktop_config.json
  3. Pega la configuración. Se ve así — la ruta de command apunta al asistente dentro de donde sea que esté instalado Diagrammix.app:
{
  "mcpServers": {
    "diagrammix": {
      "command": "/Applications/Diagrammix.app/Contents/MacOS/diagrammix-mcp-stdio",
      "args": ["--url", "http://localhost:8420/mcp"]
    }
  }
}

Nota: Usa Copy Config en lugar de escribir la ruta a mano — apunta al asistente dentro de tu paquete de aplicación real, que Diagrammix mantiene firmado y actualizado.

  1. Reinicia Claude Desktop. Las herramientas de Diagrammix aparecerán en el chat.

3. Configurar Claude Code (CLI)

Agrega al archivo .mcp.json de tu proyecto o globalmente en ~/.claude/mcp.json:

{
  "mcpServers": {
    "diagrammix": {
      "type": "url",
      "url": "http://localhost:8420/mcp"
    }
  }
}

Claude Code soporta Streamable HTTP de forma nativa — no se necesita puente.

4. Configurar Codex

Codex (la aplicación, la CLI y la extensión del IDE comparten una sola configuración MCP) se conecta mediante Streamable HTTP. Configúralo de cualquiera de las dos formas:

Opción A — config.toml. Haz clic en Copy Config en la sección de Codex de los Ajustes de Diagrammix y pega en ~/.codex/config.toml:

[mcp_servers.diagrammix]
url = "http://localhost:8420/mcp"
enabled = true
default_tools_approval_mode = "prompt"
startup_timeout_sec = 20
tool_timeout_sec = 60

Opción B — CLI. Haz clic en Copy Command en los Ajustes de Diagrammix, o ejecuta:

codex mcp add diagrammix --url http://localhost:8420/mcp

5. Otros Clientes MCP

Cualquier cliente compatible con MCP puede conectarse usando:

  • Transporte: Streamable HTTP
  • Endpoint: http://localhost:8420/mcp
  • Protocolo: JSON-RPC 2.0 sobre HTTP POST

Nota: ChatGPT Desktop requiere HTTPS y no soporta conexiones localhost directamente.

Ejemplos de Uso

Crear un Diagrama de Flujo

"Crea un diagrama de flujo con Inicio, Decisión, Proceso A, Proceso B y Fin. Conecta Inicio a Decisión, Decisión a Proceso A (Sí) y Proceso B (No), y ambos procesos a Fin."

La IA usará batch_create para colocar todos los símbolos y conectores en un solo paso de deshacer.

Modificar un Diagrama Existente

"Cambia el color de relleno de todos los rectángulos a azul y pon el texto en negrita."

La IA lee tus elementos con get_elements, luego actualiza cada uno con update_element.

Diseño Automático

"Aplica diseño de arriba a abajo con 60px de espaciado entre filas."

La IA llama a apply_layout con tu dirección y espaciado preferidos.

Replicar un Aspecto desde una Imagen

"Aquí hay una captura de pantalla del estilo de diagrama de nuestra marca. Recrea estas figuras y colores como una plantilla y un estilo personalizados que pueda reutilizar."

Dale al asistente una imagen de referencia y puede generar figuras SVG y puntas de flecha que coincidan, ensamblarlas en una plantilla personalizada y definir un estilo personalizado que también coincida. Usa herramientas como create_custom_template, add_custom_shape, add_custom_arrowhead y create_style, de modo que el resultado es un paquete reutilizable — no un dibujo puntual.

Consejos

  • Comienza con una descripción — cuanto más específico seas, mejor será el resultado
  • Itera — pide a la IA que ajuste colores, etiquetas o el diseño después de la creación inicial
  • Deshaz libremente — todos los cambios de IA soportan Cmd+Z para deshacer
  • Usa símbolos de notación — pide a la IA que use paquetes de notación específicos para un estilo consistente
  • Por lotes es mejor — para diagramas nuevos, la IA crea todo en un paso para que deshacer revierta todo el conjunto