Mermaid MCP Server

A Model Context Protocol (MCP) server that converts Mermaid diagrams to PNG images

Local serverstdioGo

What is the Mermaid MCP server?

A Model Context Protocol (MCP) server that converts Mermaid diagrams to PNG images. The mermaid mcp server wraps that behind the Model Context Protocol, so an assistant can use it through 7 defined tools rather than through you.

What it actually does

A Model Context Protocol (MCP) server that converts Mermaid diagrams to PNG images or SVG files. This server allows AI assistants and other applications to generate visual diagrams from textual descriptions using the Mermaid markdown syntax.

  • Converts Mermaid diagram code to PNG images or SVG files
  • Supports multiple diagram themes (default, forest, dark, neutral)
  • Customizable background colors
  • Uses Puppeteer for high-quality headless browser rendering
  • Implements the MCP protocol for seamless integration with AI assistants
  • Flexible output options: return images/SVG directly or save to disk

Adding it to your client

tsc on npm is all you need. Most clients run it directly, so configuration is a few lines and a restart.

Its toolset

Everything the assistant can do here goes through one of these:

  • generate — Converts Mermaid diagram code to a PNG image or SVG file
  • Parameters — - code: The Mermaid diagram code to render
  • theme — (optional) Theme for the diagram. Options: "default", "forest", "dark", "neutral"
  • backgroundColor — (optional) Background color for the diagram, e.g. 'white', 'transparent', '#F0F0F0'
  • outputFormat — (optional) Output format for the diagram. Options: "png", "svg" (defaults to "png")
  • name — Name for the generated file (required when CONTENT_IMAGE_SUPPORTED=false)
  • folder — Absolute path to save the image/SVG to (required when CONTENT_IMAGE_SUPPORTED=false)

Configuration

You will need one environment variable: PUPPETEER_EXECUTABLE_PATH. Keep credentials in your client's env block or a secrets manager rather than in a file you might commit.

Caveats

  • It runs with your machine's permissions. That is convenient and also the reason to think about what you point it at before you approve a tool call.
  • MCP clients confirm each tool call by default. Leave that on until you have watched what the mermaid mcp server does with a few real requests.

When to reach for it

This sits in the developer tooling group, where several servers overlap in what they claim to do but differ sharply once you actually set them up. Mermaid's toolset — generate, Parameters, theme and 4 more — is a fair guide to whether it matches your workflow. It is maintained by shapeng; worth a glance at recent repository activity before you build anything load-bearing on it.

We check each listing at SyncDev against the project's documentation before it goes live — if something here drifts out of date, it is a bug worth reporting.

Available tools

ToolWhat it does
generateConverts Mermaid diagram code to a PNG image or SVG file
Parameters- code: The Mermaid diagram code to render
theme(optional) Theme for the diagram. Options: "default", "forest", "dark", "neutral"
backgroundColor(optional) Background color for the diagram, e.g. 'white', 'transparent', '#F0F0F0'
outputFormat(optional) Output format for the diagram. Options: "png", "svg" (defaults to "png")
nameName for the generated file (required when CONTENT_IMAGE_SUPPORTED=false)
folderAbsolute path to save the image/SVG to (required when CONTENT_IMAGE_SUPPORTED=false)

How to install the Mermaid MCP server

## Usage

### Use with Claude desktop

```json
{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "@peng-shawn/mermaid-mcp-server"]
    }
  }
}

Configuration as documented by the project. Restart the client after saving.

Configuration

VariableDescriptionRequired
PUPPETEER_EXECUTABLE_PATHFilesystem location the server is allowed to use.Optional

Example prompts to try

  • Use Mermaid to generate.
  • Use Mermaid to Parameters.
  • Use Mermaid to theme.

Frequently asked questions

It connects Mermaid to MCP-compatible AI assistants such as Claude and Cursor, exposing 7 tools (generate, Parameters, theme, and more) that the assistant can call on your behalf. Instead of copying data back and forth by hand, the assistant works with Mermaid directly.