Skip to main content
Glama
jagadeesh52423

Mermaid SVG MCP Server

by jagadeesh52423
OverviewSchemaSourceRelated ServersScoreDiscussionsAdmin
TypeScript
Local

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

Related MCP server: Markdown + Mermaid to PDF MCP Server

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

Available Tools

1 tool
generate_mermaid_svgB

Generate SVG content from Mermaid diagram syntax and save it to a file. This tool renders Mermaid diagrams to SVG format with customizable themes and background colors, always saving the result as an SVG file.

ParametersJSON Schema
NameRequiredDescriptionDefault
mermaidYesThe mermaid diagram syntax to be rendered as SVG
themeNoTheme for the diagramdefault
backgroundColorNoBackground color for the diagram (CSS color value)white
filenameNoOptional filename for the SVG file (without extension)

TDQS

B3.4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It mentions that the tool 'always saving the result as an SVG file', which is a useful behavioral trait, but lacks details on error handling, performance, or side effects like file overwriting. It partially compensates for missing annotations but leaves gaps.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is appropriately sized and front-loaded, with the core purpose stated first. It uses two sentences efficiently, though the second sentence could be slightly more concise by combining ideas. Overall, it avoids unnecessary details and is well-structured.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the complexity (a file-saving tool with 4 parameters), no annotations, and no output schema, the description is moderately complete. It covers the main action and output format but lacks details on error cases, file naming conventions beyond the 'filename' parameter, or what happens if the file already exists. It's adequate but has clear gaps for a tool that modifies the filesystem.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema fully documents all parameters. The description adds minimal value beyond the schema by mentioning 'customizable themes and background colors', which aligns with the 'theme' and 'backgroundColor' parameters but doesn't provide additional semantics. Baseline 3 is appropriate as the schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose with specific verbs ('Generate SVG content', 'save it to a file') and resources ('from Mermaid diagram syntax'), and distinguishes it by mentioning the output format (SVG) and customization options (themes, background colors). It explicitly states the action and result format.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives, prerequisites, or exclusions. It mentions the tool's functionality but lacks context for decision-making, such as when to choose this over other rendering methods or file formats.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. 1 tool updatev0.2.1
    • First observedgenerate_mermaid_svg
Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

B3.4/5.0

Scored across 1 tool

Disambiguation5/5

With only one tool, there is no possibility of ambiguity or overlap with other tools, as there are no other tools to compare it to. The tool's purpose is clearly defined and distinct by default.

Naming Consistency5/5

The single tool name 'generate_mermaid_svg' follows a clear verb_noun pattern, and since there are no other tools, consistency is inherently perfect with no deviations or mixed conventions.

Tool Count2/5

A single tool for a server focused on Mermaid diagram generation feels thin and under-scoped, as it only covers SVG generation without related operations like validation, theme management, or diagram listing. This is borderline too few for the apparent domain.

Completeness2/5

The tool surface is severely incomplete for the Mermaid diagram domain, as it only provides generation to SVG without supporting operations like creating, updating, deleting diagrams, or handling other formats (e.g., PNG, PDF), leading to significant gaps in coverage.

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

  • Mermaid Chart MCP

    pickstar-2002
    A
    license
    B
    quality
    D
    maintenance
    Enables AI assistants to generate and render Mermaid diagrams (flowcharts, sequence diagrams, etc.) as PNG/SVG images with local file saving and HTTP access URLs. Supports batch processing and intelligent caching for efficient diagram creation.
    1
    21
    1
    MIT

  • md-mermaid-to-pdf-mcp

    skmprb
    F
    license
    Not graded
    quality
    D
    maintenance
    Converts Markdown files and raw content into professionally styled PDFs with full support for Mermaid diagrams and syntax highlighting. It offers customizable page formats, margins, and modern typography for high-quality document generation.
    11
    -

  • Vizdown-MCP

    rutika196
    A
    license
    A
    quality
    D
    maintenance
    Converts Markdown files into professional diagrams such as flowcharts, mind maps, and architecture diagrams using Mermaid.js and custom SVG renderers. It enables users to list, render, and export visualizations in multiple formats including SVG, PNG, and PDF.
    3
    MIT

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/jagadeesh52423/mermaid-svg-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server