What can you do with this server?

The Mermaid SVG MCP Server generates SVG files from Mermaid diagram syntax via a single generate_mermaid_svg tool, saving output to disk. * Convert Mermaid syntax to SVG: Supports all standard diagram types — flowcharts, sequence, class, state, ER, user journey, Gantt, pie charts, and more * Apply built-in themes: Choose from 5 themes: default, base, forest, dark, or neutral * Customize background color: Set any CSS color value as the diagram background * Control output filenames: Specify a custom filename or let the server auto-generate one * Inject custom CSS: Style specific elements like nodes, edges, labels, and clusters with fine-grained control * Inject SVG \ markup: Add gradients, patterns, filters, or markers for advanced styling * Reliable rendering: Uses Puppeteer-based headless browser rendering for consistent results

Which integrations are available for this server?

Generates SVG files from Mermaid diagram syntax, supporting all standard Mermaid diagram types (flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, etc.) with customizable themes and background colors Generates SVG vector graphics files from Mermaid diagrams with customizable themes and background colors, saving files to disk with configurable filenames

How do I use Mermaid SVG MCP Server?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Mermaid SVG MCP Server create a flowchart showing user login process with dark theme" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

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
Custom CSS Styling: Inject custom CSS to style nodes, edges, labels, and more
SVG Defs Injection: Add custom gradients, patterns, filters, and markers via the <defs> block
Clean API: Simple, focused tool interface
Puppeteer-Based: Uses headless browser for reliable rendering

Installation

From npm (Recommended)

npm install -g mermaid-svg-mcp

From source

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

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):

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

Using global install:

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

Using local development version:

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

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)
customCSS (optional): Custom CSS styles injected into the SVG's <style> block for fine-grained control over diagram appearance
svgDefs (optional): Raw SVG markup injected into the <defs> block — use for gradients, patterns, filters, markers, etc. Reference them in customCSS via url(#id)

Example:

{ "mermaid": "graph TD\\n A[Start] --> B{Decision}\\n B -->|Yes| C[Success]\\n B -->|No| D[Try Again]\\n D --> A", "theme": "dark", "backgroundColor": "#f0f0f0", "filename": "my-flowchart" }

Example with Custom CSS:

{ "mermaid": "graph TD\\n A[Start] --> B[End]", "customCSS": ".node rect { fill: #ff6347; stroke: #333; } .edgeLabel { font-size: 14px; font-weight: bold; }" }

Example with Gradient Borders (svgDefs + customCSS):

{ "mermaid": "graph TD\\n A[Start] --> B{Decision}\\n B -->|Yes| C[Success]\\n B -->|No| D[Retry]", "svgDefs": "<linearGradient id=\"borderGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#ff6347\"/><stop offset=\"100%\" stop-color=\"#4CAF50\"/></linearGradient>", "customCSS": ".node rect, .node polygon { stroke: url(#borderGrad); stroke-width: 3px; }" }

Returns:

Saves SVG file to disk with specified or auto-generated filename
Returns confirmation message with file path

Common CSS Selectors

When using customCSS, these selectors target common Mermaid diagram elements:

Selector	Target
`.node rect`	Flowchart node backgrounds
`.node circle`	Circular nodes
`.node polygon`	Diamond/decision nodes
`.label`	Node label text
`.edgeLabel`	Text on edges/arrows
`.edgePath path`	Edge/arrow lines
`.cluster rect`	Subgraph backgrounds
`.messageText`	Sequence diagram messages
`.taskText`	Gantt chart task labels
`.entityBox`	ER diagram entity boxes

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

npm run dev # Run in development mode npm run build # Build for production npm start # Run built version

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

Install Server

A

security – no known vulnerabilities

F

license - not found

A

quality - confirmed to work

How are these scores calculated?

Resources

Need Help?

Report Issue

Related Servers

Tools

generate_mermaid_svg

Mermaid SVG MCP Server

Mermaid SVG MCP Server

Features

Installation

From npm (Recommended)

From source

Usage

As MCP Server

Using npx (recommended - no global install needed):

Using global install:

Using local development version:

Tool Interface

Common CSS Selectors

Supported Diagram Types

Development

Comparison with Original MCP

License

Resources

Tools

Latest Blog Posts

MCP directory API