AI Integration (MCP Server)

Diagrammix includes a built-in MCP (Model Context Protocol) server that lets AI assistants like Claude and Codex read and modify your diagrams directly. Describe what you need in plain language, and the AI places symbols, connectors, and layouts on the canvas for you.

What Can AI Do?

Create diagrams from a description — ask for a flowchart, network topology, or org chart and get it on canvas instantly
Read your document — AI sees your current shapes, connectors, layers, and styles
Modify existing elements — update text, colors, positions, or connector routing
Batch operations — create entire diagrams with symbols and connectors in a single step
Auto-layout and alignment — organize elements with natural language commands
Export — generate SVG output on demand

Requirements

Diagrammix PRO subscription
Diagrammix must be running with the MCP server enabled
At least one diagram document must be open
AI client and Diagrammix must be on the same machine (localhost)
Node.js 18+ required for Claude Desktop (for the mcp-remote bridge)

Setup

1. Enable the MCP Server

Open Diagrammix
Go to Diagrammix > Settings (or press Cmd+,)
Switch to the AI Integration tab
Toggle Enable AI Integration (MCP Server) on

The server starts on http://localhost:8420/mcp.

2. Configure Claude Desktop

Claude Desktop uses stdio transport, so it requires the mcp-remote bridge (Node.js 18+).

Click Copy Config in Diagrammix Settings to copy the configuration to clipboard
Open the Claude Desktop config file: ~/Library/Application Support/Claude/claude_desktop_config.json
Paste the config, or add manually:

{
  "mcpServers": {
    "diagrammix": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "http://localhost:8420/mcp"]
    }
  }
}

Note: If you use nvm, the Copy Config button detects your Node.js installation and generates a config with the full path to npx and the correct PATH environment variable.

Restart Claude Desktop. Diagrammix tools will appear in the chat.

3. Configure Claude Code (CLI)

Add to your project's .mcp.json or globally in ~/.claude/mcp.json:

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

Claude Code supports Streamable HTTP natively — no bridge needed.

4. Configure Codex

Open Codex settings > MCP servers
Click Connect to a custom MCP
Set Name to Diagrammix
Select the Streamable HTTP tab
Enter URL: http://localhost:8420/mcp
Click Save

5. Other MCP Clients

Any MCP-compatible client can connect using:

Transport: Streamable HTTP
Endpoint: http://localhost:8420/mcp
Protocol: JSON-RPC 2.0 over HTTP POST

Note: ChatGPT Desktop requires HTTPS and does not support localhost connections directly.

Usage Examples

Create a Flowchart

"Create a flowchart with Start, Decision, Process A, Process B, and End. Connect Start to Decision, Decision to Process A (Yes) and Process B (No), and both processes to End."

The AI will use batch_create to place all symbols and connectors in a single undo step.

Modify Existing Diagram

"Change the fill color of all rectangles to blue and make the text bold."

The AI reads your elements with get_elements, then updates each one with update_element.

Auto-Layout

"Apply top-to-bottom layout with 60px spacing between rows."

The AI calls apply_layout with your preferred direction and spacing.

Tips

Start with a description — the more specific you are, the better the result
Iterate — ask AI to adjust colors, labels, or layout after the initial creation
Undo freely — all AI changes support Cmd+Z undo
Use notation symbols — ask the AI to use specific notation packs for consistent styling
Batch is better — for new diagrams, AI creates everything in one step so undo reverts the whole thing