Mermaid MCP Server – Mermaid Help Center

The Mermaid MCP Server is an AI integration that lets AI assistants — Claude, Cursor, VS Code, Antigravity, and any other client that supports the Model Context Protocol (MCP) — generate, validate, and render Mermaid diagrams automatically, without copy-pasting code back and forth. This article explains what the MCP Server is, how to set it up with your AI assistant, and what you can do with it.

What is the Mermaid MCP Server?

MCP (Model Context Protocol) is a standard that lets AI assistants connect to external tools and services. The Mermaid MCP Server is a hosted backend that uses this protocol to give any MCP-enabled AI assistant direct access to Mermaid's diagram generation capabilities.

When you ask your AI assistant something like "Create a sequence diagram for user login," the MCP Server:

Validates the Mermaid syntax
Renders the diagram as a high-quality PNG and SVG
Generates a shareable link that opens the diagram in the Mermaid live editor for further editing
With authentication: saves the diagram directly to your Mermaid account and lets the AI manage your diagram library

Who it's for

Developers who use AI assistants heavily in their workflow and want diagrams without leaving their tool
Teams building apps or automations that generate diagrams programmatically
Anyone tired of the "ask AI for diagram code → copy → paste into Mermaid → hope it renders" workflow

Looking for the ChatGPT integration? See the Plugins article for information on Mermaid Chart GPT for ChatGPT.

Setup: Claude

Mermaid MCP Server is listed on the official Claude MCP directory. You can connect it through the Mermaid dashboard, or configure it manually.

Option 1: Connect from the Mermaid dashboard

Go to the Plugins page in your Mermaid dashboard, find the Claude Code plugin, and click Add. Follow the prompts to authorize Claude's access to your Mermaid account. Once connected, Claude can generate diagrams using the MCP Server immediately.

Option 2: Manual configuration

Add the following to your Claude MCP configuration file. Without a token, you'll have access to diagram validation and rendering. With a token (see Connect to your Mermaid account below), you'll also be able to save and manage diagrams in your Mermaid account.

{
  "mcpServers": {
    "mermaid-mcp": {
      "url": "https://mcp.mermaid.ai/mcp",
      "type": "http",
      "headers": {
        "Authorization": "YOUR_MERMAID_TOKEN_HERE"
      }
    }
  }
}

Restart Claude after saving your configuration.

Setup: other AI clients

The MCP Server supports a range of AI assistants and IDEs. For full configuration examples for each client, see the Mermaid MCP Server documentation. Supported clients include:

VS Code (with GitHub Copilot or other MCP extensions)
Cursor
Google Antigravity (requires the mcp-remote proxy)
Any other MCP-enabled client (new clients are being added regularly)

The server supports two transport modes — HTTP (https://mcp.mermaid.ai/mcp) and Server-Sent Events (https://mcp.mermaid.ai/sse). Use the one your client recommends.

Connect to your Mermaid account (authentication)

Without authentication, the MCP Server can validate syntax and render diagrams. To also save diagrams to your Mermaid account, list your existing projects, or update saved diagrams, you'll need to authenticate with an API token.

Generate an API token. Sign in to your Mermaid account and go to your account settings. Scroll to the Secure tokens for plugins section and click Create new token. A new token will appear with a default name. Click the eye icon to reveal the token value, then click the copy icon to copy it. You can rename the token by editing the name field (e.g., to "MCP Server").
Add the token to your MCP configuration. Include it in the Authorization header as shown in the setup examples. Replace YOUR_MERMAID_TOKEN_HERE with the token you just copied.
Restart your AI client. The server will now have access to your Mermaid account.

For the full list of authenticated operations (listing projects, creating diagrams, updating diagrams, etc.), see the MCP Server documentation.

Example prompts

Once connected, you can ask your AI assistant to generate diagrams in natural language. A few examples to try:

"Create a Mermaid diagram showing a modern web app architecture"
"Generate a Mermaid sequence diagram for user login"
"Create a Mermaid flowchart for subscription access logic"
"Generate a Mermaid diagram representing a team workflow"
"Create a Mermaid diagram showing data flow for an AI feature"

For every request, you'll receive a rendered PNG and SVG, clean Mermaid code you can copy and modify, and a shareable link that opens the diagram in the Mermaid live editor.

Troubleshooting

If the MCP Server isn't working as expected:

Check your configuration. Make sure your MCP client configuration matches the format shown in the setup examples. A single typo in the JSON will prevent the connection from working.
Restart your AI client. Configuration changes usually require a restart of Claude, Cursor, VS Code, or whatever client you're using.
Authentication errors. If you're getting permission errors, verify your Mermaid API token is valid and properly formatted in the Authorization header. Regenerate the token if needed.
Server URL not reachable. Make sure your network allows outbound connections to mcp.mermaid.ai. Corporate firewalls or VPNs may block the connection.
Client-specific issues. Each AI client (Claude, Cursor, VS Code, Antigravity) has its own MCP setup quirks. Check your client's MCP documentation for additional troubleshooting steps.
Questions about cost, rate limits, or AI credit usage. Credit and usage behavior can vary by operation and AI client, and is actively evolving. For the current authoritative details, see the MCP Server documentation. For questions specific to your plan or account, contact us.

For issues the steps above don't resolve, contact us via our Contact Us page.

Learn more

For the complete reference — all available tools, transport modes, advanced configuration options, and full client setup examples — see the Mermaid MCP Server documentation.