Mermaid SVG

You can render clean, SVG diagrams from Mermaid syntax by running a focused MCP server that outputs only SVG. It leverages a headless browser to reliably render diagrams and lets you choose a Mermaid theme and a background color, with an optional custom filename for the output.

How to use

To use this server, add it to your MCP client configuration so you can generate SVGs from Mermaid diagrams on demand. The server exposes a single tool named generate_mermaid_svg. You provide the Mermaid diagram text, an optional theme, an optional background color, and an optional filename. The server saves the resulting SVG to disk and returns a confirmation with the file path.

How to install

Prerequisites: you need Node.js and npm installed on your machine.

Install the MCP server globally using npm.

Install commands

npm install -g mermaid-svg-mcp

Or install from source and build a local version.

git clone <repository-url>
cd mermaid-svg-mcp
npm install
npm run build

If you prefer running it without a global install, you can use npx to run the MCP server directly.

# Using npx (recommended – no global install needed)
{
  "mcpServers": {
    "mermaid-svg": {
      "command": "npx",
      "args": ["-y", "mermaid-svg-mcp"]
    }
  }
}

If you have the server installed globally, you can run it with a simple command configuration.

{
  "mcpServers": {
    "mermaid-svg": {
      "command": "mermaid-svg-mcp"
    }
  }
}

For a local development version, you can point to a local build you’ve produced.

{
  "mcpServers": {
    "mermaid-svg": {
      "command": "node",
      "args": ["/path/to/mermaid-svg-mcp/dist/index.js"]
    }
  }
}

Available tools

generate_mermaid_svg

Generates an SVG from Mermaid diagram syntax. Accepts mermaid text, optional theme (default, base, forest, dark, neutral), optional backgroundColor, and optional filename. Saves the SVG to disk and returns a confirmation with the file path.