Mermaid Chart

Claude Code

1. Run this in a terminal, in your project folder:

claude mcp add --transport http mermaid https://mcp.mermaidchart.com/mcp

1. Start Claude Code and type /mcp. mermaid should show as connected.

Add --scope user to make it available in every project, not just this one.

Claude Desktop

1. Open Settings → Connectors and click Add custom connector.
2. Name it Mermaid Chart and paste this URL:

https://mcp.mermaidchart.com/mcp

1. Click Add. Its tools appear in the chat’s tools menu.

Claude Desktop’s JSON config file only starts local servers. Remote servers go through Connectors, and connectors you add on claude.ai show up here too.

claude.ai

1. Open the connector form on claude.ai. This button fills in the name and URL for you:

Añadir a claude.ai (se abre en una pestaña nueva)

1. Check that the URL reads https://mcp.mermaidchart.com/mcp and click Add.
2. Turn it on in a chat from the tools menu.

Free plans allow one custom connector. On Team and Enterprise plans an owner adds it under Organization settings → Connectors.

ChatGPT

1. On chatgpt.com, open Settings → Security and login and turn on Developer mode.
2. Go to chatgpt.com/plugins and click + to create an app for a remote MCP server.
3. Paste https://mcp.mermaidchart.com/mcp as the server URL and choose No authentication.

Developer mode is available on the web for Plus, Pro, Business, Enterprise and Education accounts.

Cursor

Añadir a Cursor (se abre en una pestaña nueva)

Or add it by hand to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (this project):

{
  "mcpServers": {
    "mermaid": {
      "url": "https://mcp.mermaidchart.com/mcp"
    }
  }
}

VS Code

Install in VS Code (se abre en una pestaña nueva)

Or from a terminal:

code --add-mcp '{"name":"mermaid","type":"http","url":"https://mcp.mermaidchart.com/mcp"}'

Or commit it to the repo in .vscode/mcp.json:

{
  "servers": {
    "mermaid": {
      "type": "http",
      "url": "https://mcp.mermaidchart.com/mcp"
    }
  }
}

Devin Desktop

1. Add it to ~/.config/devin/mcp_config.json (macOS and Linux) or %APPDATA%\devin\mcp_config.json (Windows):

{
  "mcpServers": {
    "mermaid": {
      "serverUrl": "https://mcp.mermaidchart.com/mcp"
    }
  }
}

1. Refresh the MCP server list in Cascade.

Devin Desktop is the new name for Windsurf. It reads serverUrl (or url) for remote servers.

Codex

codex mcp add mermaid --url https://mcp.mermaidchart.com/mcp

Or edit ~/.codex/config.toml directly:

[mcp_servers.mermaid]
url = "https://mcp.mermaidchart.com/mcp"

Gemini CLI

gemini mcp add --transport http mermaid https://mcp.mermaidchart.com/mcp

This adds it to the current project. Add -s user to use it everywhere.

Any client

Most clients accept this shape. Some name the URL field differently: serverUrl in Devin Desktop, httpUrl in Gemini CLI’s settings file.

{
  "mcpServers": {
    "mermaid": {
      "type": "http",
      "url": "https://mcp.mermaidchart.com/mcp"
    }
  }
}

Zed puts servers under context_servers in its settings. Cline needs "type": "streamableHttp", or it assumes SSE.

Client only starts local servers? Bridge it with npx -y mcp-remote https://mcp.mermaidchart.com/mcp.

Insignia para README

[![Mermaid Chart on mcp.tc](https://mcp.tc/i/mermaid/badge.svg)](https://mcp.tc/i/mermaid)

<a href="https://mcp.tc/i/mermaid"><img src="https://mcp.tc/i/mermaid/badge.svg" alt="Mermaid Chart on mcp.tc" height="20"></a>

Sigue el modo claro u oscuro de quien lee. Añade ?theme=light o ?theme=dark para fijarlo, o ?style=compact para mostrar el símbolo sin la palabra.

Tarjeta para web

<script src="https://mcp.tc/w/mermaid.js" async></script>

La tarjeta aparece donde esté la etiqueta. Añade data-theme="dark" o data-size="compact" a la etiqueta para cambiarla. El archivo contiene todo lo que necesita, así que no hace otras solicitudes ni instala cookies.

iframe

<iframe src="https://mcp.tc/embed/mermaid" title="Mermaid Chart on mcp.tc" width="420" height="200" loading="lazy" allow="clipboard-write" style="border:0;border-radius:8px;max-width:100%"></iframe>

Úsalo en páginas que no permiten scripts. Añade ?theme=light o ?theme=dark a la dirección para fijar los colores.

JSON

La ficha como datos para tus propias páginas y herramientas: nombre, descripción corta, la URL propia del servidor, herramientas y los enlaces «Add to». Cualquier web puede leerla (CORS abierto).

https://mcp.tc/i/mermaid.json

Qué significa cada campo