AI Diagram Maker MCP Server

MCP server for AI Diagram Maker — generate beautiful software engineering diagrams directly inside Cursor, Claude Desktop, Claude Code, or any MCP-compatible AI agent.

- ai-diagram-maker-mcp 🌐 ☁️ - Generate professional software diagrams from plain English descriptions.

Features

- 5 tools covering every input type: natural language text, JSON, ASCII art, images, and Mermaid
- Inline rendering — diagrams appear directly in the chat using MCP Apps UI, no downloads
- Diagram URL in responses — open it in your browser to view and edit the diagram
- 5 diagram types: flowchart, sequence, ERD, system architecture, UML
- Supports both stdio (local) and HTTP/Streamable HTTP (remote) transports

Prerequisites

1. Node.js 18+
2. An AI Diagram Maker account and API key

Installation

Option A — remote server (recommended)

Use our hosted MCP server — nothing to install. Add the config below to your MCP client (see step 3).

{
  "mcpServers": {
    "ai-diagram-maker": {
      "url": "https://mcp.aidiagrammaker.com/mcp",
      "headers": {
        "X-ADM-API-Key": "<your api key>"
      }
    }
  }
}

Replace <your api key> with your API key from step 1.

Option B — run directly with npx

Run the MCP server locally. Nothing to install permanently — npx runs it on demand.

The command below is a standalone example to test the server works with any MCP-compatible client:

ADM_API_KEY=your_api_key npx ai-diagram-maker-mcp@latest

MCP Client Configuration

Cursor

Remote server (recommended)

Use the hosted MCP server on Railway with your API key sent in the X-ADM-API-Key header. Add to ~/.cursor/mcp.json or Settings → MCP:

{
  "mcpServers": {
    "ai-diagram-maker": {
      "url": "https://mcp.aidiagrammaker.com/mcp",
      "headers": {
        "X-ADM-API-Key": "your_api_key_here"
      }
    }
  }
}

Replace your_api_key_here with your AI Diagram Maker API key. No environment variables are required for this setup.

Local (stdio)

To run the server locally instead, use:

{
  "mcpServers": {
    "ai-diagram-maker": {
      "command": "npx",
      "args": ["-y", "ai-diagram-maker-mcp"],
      "env": {
        "ADM_API_KEY": "your_api_key_here"
      }
    }
  }
}

To enable debug logging (request params and API payload), add "ADM_DEBUG": "1" to the env object. View output in Cursor → Output panel, then select the MCP or ai-diagram-maker channel so you see the server’s stderr logs.

Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):

{
  "mcpServers": {
    "ai-diagram-maker": {
      "command": "npx",
      "args": ["-y", "ai-diagram-maker-mcp"],
      "env": {
        "ADM_API_KEY": "your_api_key_here"
      }
    }
  }
}

Claude Code

claude mcp add ai-diagram-maker \
  --command "npx" \
  --args "-y,ai-diagram-maker-mcp" \
  --env ADM_API_KEY=your_api_key_here

HTTP transport (remote / hosted)

A hosted instance runs at https://mcp.aidiagrammaker.com/mcp. Configure your MCP client with the server URL and pass the API key in request headers (not as an env var):

- X-ADM-API-Key: <api_key> (recommended), or
- Authorization: Bearer <api_key>

See the Cursor remote config above for a ready-to-use example.

To run your own HTTP server locally:

npx ai-diagram-maker-mcp --transport http

The server listens on $PORT (or 3001). Send the API key in every request to /mcp via the headers above.

Environment Variables

| Variable | Required | Default | Description |
|---|---|---|---|
| ADM_API_KEY | Yes (stdio only) | — | Your AI Diagram Maker API key (used only for stdio transport) |
| ADM_BASE_URL | No | https://app.aidiagrammaker.com | Override for local/staging API; also used as the base for diagram URLs in tool responses |
| ADM_DEBUG | No | — | Set to 1, true, or yes to log request parameters from the AI agent and the request payload sent to the AI Diagram Maker API. Logs go to stderr. |

Tools

generate_diagram_from_text

Generate a diagram from a natural language description.

| Parameter | Type | Required | Description |
|---|---|---|---|
| content | string | Yes | Natural language description of the diagram |
| diagramType | enum | No | flowchart, sequence, erd, system_architecture, network_architecture, uml, mindmap, workflow |
| prompt | string | No | Additional styling/layout instruction |

Example prompts:
- "Create a microservices architecture with API gateway, auth service, user service, and PostgreSQL database"
- "Draw a sequence diagram for user login flow with JWT token generation"
- "adm show the CI/CD pipeline for a Next.js app deployed to Vercel"

---

generate_diagram_from_json

Convert a JSON structure into a diagram (great for API responses, database schemas, config files).

| Parameter | Type | Required | Description |
|---|---|---|---|
| content | string | Yes | JSON string to visualise |
| prompt | string | No | How to interpret the JSON |
| diagramType | enum | No | Preferred diagram type |

---

generate_diagram_from_ascii

Convert ASCII art into a polished diagram.

| Parameter | Type | Required | Description |
|---|---|---|---|
| content | string | Yes | Raw ASCII art diagram |
| prompt | string | No | Rendering instructions |
| diagramType | enum | No | Preferred diagram type |

---

generate_diagram_from_image

Convert a whiteboard photo, screenshot, or any image into a clean diagram.

| Parameter | Type | Required | Description |
|---|---|---|---|
| content | string | Yes | Public image URL or base64 data URI |
| prompt | string | No | What to extract or how to render |
| diagramType | enum | No | Preferred output diagram type |

---

generate_diagram_from_mermaid

Convert a Mermaid diagram definition to D2 and return a PNG image.

| Parameter | Type | Required | Description |
|---|---|---|---|
| content | string | Yes | Mermaid diagram source (e.g. flowchart, sequenceDiagram, erDiagram) |
| prompt | string | No | Optional layout or styling instruction |
| diagramType | enum | No | Preferred diagram type for the converted output |

Trigger Keywords

The AI agent will automatically select the right tool when you use phrases like:

- adm ...
- ai diagram maker ...
- create a diagram of ...
- show me a flowchart / sequence diagram / ERD / architecture ...
- visualise / draw / diagram ...

Local developer setup

Use these steps to clone the repo, build locally, and run the MCP server with Node.

1. Clone the repository

git clone https://github.com/erajasekar/ai-diagram-maker-mcp.git
cd ai-diagram-maker-mcp

2. Install dependencies

npm install

3. (Optional) Regenerate API client

If you change the AI Diagram Maker OpenAPI spec or config, regenerate the client:

npm run generate

4. Build

npm run build

This compiles TypeScript and builds the MCP app UI into dist/. The server entrypoint is dist/index.js.

5. Run the local MCP server

stdio (default) — for use with Cursor, Claude Desktop, etc.:

ADM_API_KEY=your_api_key node dist/index.js

Or use the npm script:

ADM_API_KEY=your_api_key npm start

HTTP transport — for remote clients or testing:

ADM_API_KEY=your_api_key node dist/index.js --transport http

Or:

ADM_API_KEY=your_api_key npm run start:http

The HTTP server listens on $PORT (default 3001). Send the API key in request headers: X-ADM-API-Key or Authorization: Bearer <key>.

6. Use the local server in Cursor

Point Cursor at your built server via Settings → MCP (or ~/.cursor/mcp.json):

{
  "mcpServers": {
    "ai-diagram-maker": {
      "command": "node",
      "args": ["/absolute/path/to/ai-diagram-maker-mcp/dist/index.js"],
      "env": {
        "ADM_API_KEY": "your_api_key_here"
      }
    }
  }
}

Replace /absolute/path/to/ai-diagram-maker-mcp with the actual path to your cloned repo. After changing the config, restart Cursor or reload the MCP servers.

Add "ADM_DEBUG": "1" to env to see request logs in Cursor → Output (MCP channel).

License

MIT