AI Diagram Maker MCP

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, code, ASCII diagram, 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

Contents

• Prerequisites
• Hosted MCP server
• Installation
• MCP client configuration
• Environment variables
• Tools
• Trigger keywords
• Local developer setup
• License

Prerequisites

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

Hosted MCP server

The public MCP endpoint is https://mcp.aidiagrammaker.com/mcp (Streamable HTTP). Nothing to install for this option.

Authentication (HTTP)

For remote HTTP clients, send your API key on every request — not via environment variables:

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

Use the API key from your AI Diagram Maker account (see Prerequisites).

Remote server JSON example

Merge this into your client’s MCP config (replace the API key placeholder):

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

Installation

Option A — hosted server (recommended)

Use the remote server JSON example above and wire it into your client using MCP client configuration. No global install.

Option B — run locally with npx

Nothing to install permanently — npx runs the package on demand. The package name is ai-diagram-maker-mcp; append @latest if you want every invocation to resolve the newest release (recommended for one-off runs and claude mcp add).

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

MCP client configuration

Cursor

Remote (recommended)

Add to ~/.cursor/mcp.json or Settings → MCP using the remote server JSON example. No environment variables are required for this setup.

Local (stdio)

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

Optional: add "ADM_DEBUG": "1" to env for debug logging — see Environment variables.

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@latest"],
      "env": {
        "ADM_API_KEY": "your_api_key_here"
      }
    }
  }
}

Claude Code

macOS

claude mcp add ai-diagram-maker -t stdio -e ADM_API_KEY=<api_key> -- npx -y ai-diagram-maker-mcp@latest

Windows

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

HTTP transport (local or self-hosted)

To run an HTTP server yourself (same header-based auth as Authentication (HTTP)):

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

The server listens on $PORT or 3001. Point clients at /mcp and send the API key with each request using the headers above.

Environment variables

Tools

generate_diagram_from_text

Generate a diagram from a natural language description.

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).

generate_diagram_from_ascii

Convert ASCII art into a polished diagram.

generate_diagram_from_image

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

generate_diagram_from_mermaid

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

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 (same headers as Authentication (HTTP)):

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).

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.

For debug logging, add "ADM_DEBUG": "1" to env — see Environment variables.

License

MIT