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
  • 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
  • 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)
  • Se requiere Node.js 18+ para Claude Desktop (para el puente mcp-remote)

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 usa transporte stdio, por lo que requiere el puente mcp-remote (Node.js 18+).

  1. Haz clic en Copy Config en los Ajustes de Diagrammix para copiar la configuración al portapapeles
  2. Abre el archivo de configuración de Claude Desktop: ~/Library/Application Support/Claude/claude_desktop_config.json
  3. Pega la configuración, o agrégala manualmente:
{
  "mcpServers": {
    "diagrammix": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "http://localhost:8420/mcp"]
    }
  }
}

Nota: Si usas nvm, el botón Copy Config detecta tu instalación de Node.js y genera una configuración con la ruta completa a npx y la variable de entorno PATH correcta.

  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

  1. Abre la configuración de Codex > MCP servers
  2. Haz clic en Connect to a custom MCP
  3. Establece Name como Diagrammix
  4. Selecciona la pestaña Streamable HTTP
  5. Ingresa la URL: http://localhost:8420/mcp
  6. Haz clic en Save

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.

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