Mermaid SVG MCP Server

A simplified Model Context Protocol (MCP) server that generates SVG files from Mermaid diagram syntax. This is a streamlined version focused solely on SVG generation, without the complexity of multiple export formats.

Features

• Single Focus: Only generates SVG output - no base64, PNG, or file outputs

• Theme Support: Supports 5 built-in Mermaid themes (default, base, forest, dark, neutral)

• Background Colors: Customizable background colors for diagrams

• Custom Filenames: Optional filename parameter for controlling output file names

• Clean API: Simple, focused tool interface

• Puppeteer-Based: Uses headless browser for reliable rendering

Installation

From npm (Recommended)

From source

Usage

As MCP Server

Add to your MCP client configuration (typically in mcp.json or Claude Desktop config):

Using npx (recommended - no global install needed):

Using global install:

Using local development version:

Tool Interface

The server provides a single tool: generate_mermaid_svg

Parameters:

• mermaid (required): The Mermaid diagram syntax

• theme (optional): Theme name - one of: default, base, forest, dark, neutral

• backgroundColor (optional): CSS color value for background (default: "white")

• filename (optional): Custom filename for the SVG file (without extension)

Example:

Returns:

• Saves SVG file to disk with specified or auto-generated filename

• Returns confirmation message with file path

Supported Diagram Types

All standard Mermaid diagram types are supported:

• Flowcharts

• Sequence diagrams

• Class diagrams

• State diagrams

• ER diagrams

• User journey

• Gantt charts

• Pie charts

• And more...

Development

Comparison with Original MCP

This simplified version removes:

• Multiple output formats (base64, file, URL generation)

• File system operations

• Complex configuration options

• PNG rendering options

And focuses on:

• Clean SVG-only output

• Simple parameter interface

• Reliable rendering

• Minimal dependencies

License

MIT