Back

Setup MCP

Integrate AI Diagram Maker with Cursor, Claude Desktop, Claude Code, or any MCP-compatible client.

Get your API key

Create an API key from your AI Diagram Maker account. We have a full guide with screenshots in the User Guide.

  1. Go to Settings (gear icon on the left navbar or from the user dropdown).
  2. Open Integrations → API Keys.
  3. Click Create API key, give it a name (e.g. "MCP Server"), and click Create.
  4. Copy the key immediately — it will not be shown again. Store it securely.

See our guide for how to create an API key (with screenshots).

Installation

You need Node.js 18+. Choose one option below.

Option A — run directly with npx (recommended)

Nothing to install. Skip straight to the MCP configuration step

The command below is just 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

Option B — global install

Prefer a globally installed binary? Install the ai-diagram-maker-mcp@latest package once:

npm install -g ai-diagram-maker-mcp@latest

MCP client configuration

Add the AI Diagram Maker MCP server to your client. Replace your_api_key_here with the API key you created in step 1.

Cursor

Add to your Cursor MCP settings (~/.cursor/mcp.json or via Settings → MCP):

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

To enable debug logging, add "ADM_DEBUG": "1" to the env object. View output in Cursor → Output panel → MCP or ai-diagram-maker channel.

We provide an example setup in Cursor AI tools. Follow these steps:

Step 1

Go to Cursor settings, find Tools and MCP and click Add Custom MCP.

Cursor Settings — Tools & MCP with Add Custom MCP button

Step 2

Copy and paste the JSON above into mcp.json and replace your_api_key_here with your API key (created in our app). Then save the file.

mcp.json file with ai-diagram-maker config and ADM_API_KEY

Step 3

After successful setup, you'll see the list of installed servers — the AI Diagram Maker MCP will appear there.

Installed MCP Servers list showing ai-diagram-maker with 5 tools enabled

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

For details, see the Claude Code MCP documentation.

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

Create a diagram with a prompt

Restart your MCP client (e.g. Cursor) after saving the config. Then in the chat, use a natural language prompt. The AI will use the MCP tools to generate a diagram and return a link (and optionally an inline PNG).

Example prompts you can try:

  • "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"

Type your prompt in the chat and click Send. The diagram will be generated and you will get a URL to open it in AI Diagram Maker.

Step 1 — Enter your prompt

Enter your prompt in the chat window of Cursor (or the AI you're using) and click Send.

Cursor chat with prompt and Send button

Step 2 — Diagram and link

The diagram is created visually using the MCP and a link is generated that you can open for customization.

Generated diagram and link in Cursor chat

Step 3 — Open in browser

Click the link to open it in your browser and edit the diagram.

Opening diagram link in browser

Step 4 — Edit the diagram

You can now edit the diagram that was generated using the MCP tool (e.g. change labels, layout, or add nodes).

Editing the generated diagram in AI Diagram Maker

Trigger keywords

The AI will often pick 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 ...

More resources