MCP Mermaid

An MCP server that generates mermaid diagrams and charts with syntax validation and svg, png and file export

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add mcp/mcp-mermaid

Detects the agents on your machine, checks the risk and pins the version.

Other ways to install

Run in a terminal

claude mcp add --transport stdio mcp-mermaid -- npx -y mcp-mermaid

Or add to the file .mcp.json, in the project

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

If the file already exists, add the server inside the mcpServers key.

Install in Cursor

The button opens the agent and offers to add the server. If nothing happens, copy the config below.

Add to the file ~/.cursor/mcp.json, for all projects

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

If the file already exists, add the server inside the mcpServers key. For a single project, put the same block into .cursor/mcp.json.

Install in VS Code

The button opens the agent and offers to add the server. If nothing happens, copy the config below.

Run in a terminal

code --add-mcp '{"name":"mcp-mermaid","type":"stdio","command":"npx","args":["-y","mcp-mermaid"]}'

Or add to the file .vscode/mcp.json, in the project

{
  "servers": {
    "mcp-mermaid": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "mcp-mermaid"
      ]
    }
  }
}

If the file already exists, add the server inside the servers key.

Run in a terminal

codex mcp add mcp-mermaid -- npx -y mcp-mermaid

Or add to the file ~/.codex/config.toml, for all projects

[mcp_servers.mcp-mermaid]
command = "npx"
args = ["-y", "mcp-mermaid"]

If the file already exists, append the block to the end.

Add to the file ~/.gemini/settings.json, for all projects

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

If the file already exists, add the server inside the mcpServers key.

Add to the file ~/.config/devin/mcp_config.json, for all projects

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

If the file already exists, add the server inside the mcpServers key. Legacy Cascade keeps the MCP config in ~/.codeium/windsurf/mcp_config.json.

Formerly Windsurf.

Add to the file cline_mcp_settings.json, for all projects

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

If the file already exists, add the server inside the mcpServers key. Open the settings file in Cline: MCP Servers tab, Configure MCP Servers.

Add to the file .roo/mcp.json, in the project

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

If the file already exists, add the server inside the mcpServers key.

A fork of Roo Code, same .roo folders.

Add to the file opencode.json, in the project

{
  "mcp": {
    "mcp-mermaid": {
      "type": "local",
      "command": [
        "npx",
        "-y",
        "mcp-mermaid"
      ]
    }
  }
}

If the file already exists, add the server inside the mcp key.

Add to the file ~/.config/zed/settings.json, for all projects

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

If the file already exists, add the server inside the context_servers key.

Add to the file .codeassistant/mcp.json, in the project

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

If the file already exists, add the server inside the mcpServers key.

You will need: Node.js

Checked against the repository on Sep 25, 2026, commit 1349706.

Text for your agent

Add the MCP server to your client with the command npx -y mcp-mermaid. For http mode install globally via npm install -g mcp-mermaid and run mcp-mermaid -t sse or -t streamable.

Other ways from the author

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

Generic snippet for desktop clients. On Windows wrap the launch with cmd /c.

This is third-party code. Review the repository files before installing.

What it does

The server gives an agent mermaid diagram generation: flowcharts, sequence diagrams, entity relations and other types. You can set the background and theme so the model returns styled diagrams. Output comes as base64, svg, raw mermaid, a file on disk or a link to svg and png. Built-in validation lets the model fix a syntax error over a few rounds and get a correct diagram. It supports stdio, sse and streamable-http transports and ships a Docker image.

Who it is for. For developers, technical writers and product managers who need diagrams straight from an agent.

Good fit when

You need a flowchart or sequence diagram from a description
You need a diagram as svg, png or a file
You need mermaid syntax validation before pasting into a doc

Not a fit when

You need diagram formats mermaid does not support
You cannot send data outward but need the mermaid.ink link mode

Example request

Build a flowchart of the signup process and return it as an svg file with a light theme

Limitations

Diagrams are limited to mermaid syntax. The svg_url and png_url modes build public links via mermaid.ink, so for sensitive diagrams use base64, svg or file. The file output mode saves png to disk. The sse and streamable transports open local ports, 3033 and 1122 by default.

How to disable. Remove the server entry from your MCP client config. If installed globally, uninstall the mcp-mermaid package with your package manager.

MCP

Transport: stdio, sse, http
Authentication: not required

Security check

Can write png files to disk
Link modes send the diagram to the external mermaid.ink service

README in short

The README shows a config for desktop clients via npx, separate for macOS and Windows, and running with sse or streamable transport after a global install. It lists output formats, CLI options for transport, port and endpoint, and a Docker run. Related projects mcp-server-chart and Infographic are noted. MIT licensed.

FAQ

In which formats is the diagram returned?

base64, svg, raw mermaid, a file on disk, and svg_url and png_url links via mermaid.ink.

Does the server validate syntax?

Yes, mermaid validation lets the model fix an error over a few rounds.

MarkItDown

Official

Microsoft's utility and MCP server that turn PDF, Word, Excel, PowerPoint, HTML and other files into Markdown for models

MCP serverMedium riskNo VPN needed187.4K

Anthropic skills

Skills

Editors’ pick

Anthropic's official skill examples: docx, pdf, pptx and xlsx documents, design, MCP builder and the Agent Skills spec

SkillMedium risk178.8K

PPT Master

Editors’ pick

A skill that builds editable PPTX decks from PDF, DOCX, URLs and Markdown with native shapes, charts and animations

SkillMedium risk56.8K

Diagram Design

Editors’ pick

A skill that draws editorial diagrams as standalone HTML and SVG files: architecture, flowcharts, ER, funnels and about forty more types

SkillMedium riskNo VPN needed42.6K