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 — pide un diagrama de flujo, una topología de red, o un organigrama y obtenlo en el lienzo al instante
Construir 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 el 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 a partir de una imagen — entrégale a la IA una imagen de referencia y construirá una plantilla y un estilo personalizados equivalentes
Exportar — genera salida SVG, PNG, Visio (.vsdx), o Mermaid bajo demanda

Requisitos

Diagrammix PRO (compra única)
Diagrammix debe estar en ejecución con el servidor MCP habilitado
Si no hay ningún documento abierto, el asistente puede crear uno nuevo
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 ayudante nativo para los clientes que lo requieren.

Configuración

1. Habilitar el Servidor MCP

Abre Diagrammix
Ve a Diagrammix > Settings (o presiona Cmd+,)
Cambia a la pestaña AI Integration
En la sección MCP Server, activa Enable MCP Server

Status muestra Running una vez que el servidor está activo. El servidor escucha en http://localhost:8420/mcp.

2. Configurar Claude Desktop

Claude Desktop se conecta mediante stdio. Diagrammix incluye un ayudante stdio nativo dentro del paquete de la app, así que no se requiere Node.js, npx, ni mcp-remote.

Haz clic en Copy Config en la Configuración de Diagrammix — esto completa la ruta exacta al ayudante incluido para tu instalación
Abre el archivo de configuración de Claude Desktop: ~/Library/Application Support/Claude/claude_desktop_config.json
Pega la configuración. Se ve así — la ruta command apunta al ayudante dentro de donde 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 ayudante dentro de tu paquete de app real, que Diagrammix mantiene firmado y actualizado.

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

3. Configurar Claude Code (CLI)

Claude Code admite Streamable HTTP de forma nativa — no se necesita un puente. Agrega un servidor MCP de tipo HTTP que apunte a:

http://localhost:8420/mcp

Consulta la documentación MCP de Claude Code para el comando o archivo de configuración a usar.

4. Configurar Codex

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

Opción A — config.toml. Haz clic en Copy Config en la sección Codex de la Configuración de Diagrammix y pégalo 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 la Configuración 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 admite conexiones localhost directamente.

Herramientas Destacadas

Diagrammix expone un amplio conjunto de herramientas MCP. Algunas de las más útiles:

Herramienta	Qué hace
`batch_create`	Crea muchos símbolos y conectores en un solo paso de deshacer
`apply_diagram_plan` / `preview_diagram_plan`	Valida un plan de diagrama estructurado, luego lo aplica como un solo paso deshacible
`get_elements` / `update_element`	Lee y cambia elementos existentes
`apply_layout`	Ejecuta el diseño automático
`create_mindmap`	Construye un mapa mental a partir de un árbol anidado o un esquema Markdown
`import_mermaid`	Inserta un diagrama a partir de texto Mermaid
`generate_radial_diagram`	Genera una infografía radial — anillo segmentado, círculos, o pétalos — con etiquetas y colores
`combine_shapes`	Operaciones booleanas (unión, sustracción, intersección, exclusión)
`create_artboard`	Agrega una mesa de trabajo para exportar
`set_document_palette` / `apply_palette`	Almacena una paleta de color de documento y vuelve a aplicar el tema al diagrama con ella
`create_style` / `apply_style`	Crea y aplica estilos personalizados
`export_svg`, `export_png`, `export_vsdx`, `export_mermaid`	Exporta el diagrama o la selección; `export_vsdx` convierte cada mesa de trabajo en una página de Visio
`undo` / `redo`	Retrocede y avanza a través de los cambios

Ejemplos de Uso

Crear un Diagrama de Flujo

"Crea un diagrama de flujo con Start, Decision, Process A, Process B, y End. Conecta Start con Decision, Decision con Process A (Yes) y Process B (No), y ambos procesos con End."

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 un diseño de arriba hacia abajo con 60px de espaciado entre filas."

La IA llama a apply_layout con la dirección y el espaciado que prefieras.

Replicar un Aspecto a partir de una Imagen

"Aquí tienes 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 podrá generar figuras y puntas de flecha SVG equivalentes, ensamblarlas en una plantilla personalizada, y definir un estilo personalizado equivalente. Usa herramientas como create_custom_template, add_custom_shape, add_custom_arrowhead, y create_style, así que el resultado es un paquete reutilizable — no un dibujo puntual.

Consejos

Empieza con una descripción — cuanto más específico seas, mejor será el resultado
Itera — pídele a la IA que ajuste colores, etiquetas o el diseño después de la creación inicial
Deshaz libremente — todos los cambios de la IA admiten deshacer con Cmd+Z
Usa símbolos de notación — pídele 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 solo paso para que deshacer revierta todo a la vez