How to add MCP Mermaid to Windsurf

Generate Mermaid diagrams and charts with AI dynamically, exporting to SVG, PNG, base64, file, or shareable URLs. Paste the config into ~/.codeium/windsurf/mcp_config.json and restart Windsurf.

Last updated June 14, 2026 · 588★ · stdio · no auth

Windsurf config for MCP Mermaid

npx -y mcp-mermaid

{
  "mcpServers": {
    "mcp-mermaid": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-mermaid"
      ]
    }
  }
}

Setup steps

1Open Windsurf → Cascade → the hammer/MCP icon → Configure (or edit ~/.codeium/windsurf/mcp_config.json).
2Paste the MCP Mermaid config below.
3Fill in placeholder secrets, then save.
4Click Refresh in the MCP panel.
5MCP Mermaid's tools become available to Cascade.

Before you start

Node.js with npx (or a global `npm install -g mcp-mermaid`)
Optional: Docker, to run the published susuperli/mcp-mermaid image

What MCP Mermaid can do in Windsurf

generate_mermaid_diagram

Generate a Mermaid diagram or chart from Mermaid syntax. Supports configuring backgroundColor and theme, and exporting to base64, svg, mermaid, file, svg_url, or png_url. Use outputType: "file" to save a PNG to disk, or the URL modes to produce shareable mermaid.ink links. Mermaid source is validated to support multi-round correction. (Tool functionality described in the README; exact tool name is not literally stated there.)

Security

Output modes svg_url and png_url upload/share diagrams via public mermaid.ink links; avoid them for sensitive content and prefer file, svg, or base64 output.

MCP Mermaid + Windsurf FAQ

Where is the Windsurf config file?

Windsurf reads MCP servers from ~/.codeium/windsurf/mcp_config.json. Paste the MCP Mermaid config there under the "mcpServers" key and restart the client.

Is MCP Mermaid safe to use with Windsurf?

Output modes svg_url and png_url upload/share diagrams via public mermaid.ink links; avoid them for sensitive content and prefer file, svg, or base64 output.

Which output formats are supported?

base64, svg, mermaid, file, and the remote-friendly svg_url and png_url. Use outputType: "file" to automatically save PNG diagrams to disk.

What transports does it support?

stdio by default, plus SSE (default endpoint /sse, port 3033) and Streamable HTTP (default endpoint /mcp, port 1122). Transport, port, and endpoint are configurable via the -t, -p, and -e CLI options.

Can I run it with Docker?

Yes. Pull susuperli/mcp-mermaid:latest and run it with --transport sse (default) or --transport streamable --port 1122.

View repo Full MCP Mermaid page