Log inSubmit server
MCP Mermaid logo

MCP Mermaid

by hustcc

Generates Mermaid diagrams and charts from AI-provided syntax, with validation, styling, and multiple export formats.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install MCP Mermaid

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "hustcc-mcp-mermaid": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-mermaid"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

We couldn’t confirm it starts correctly

The install command started, but didn't respond the way we expected when we tried to talk to it.

npx -y mcp-mermaid

initialize succeeded but no response to tools/list.

This is an experimental automated check and can have false negatives — missing environment variables, a slow cold install, etc. It doesn’t necessarily mean something’s wrong. Last checked 1mo ago.

Overview

The hustcc/mcp-mermaid MCP server turns Mermaid syntax into rendered diagrams and charts through a single MCP tool. It supports Mermaid features, configurable themes and background colors, syntax validation, and outputs including SVG, base64, files, and URLs. Use it when an AI client needs to create architecture diagrams, flowcharts, or other Mermaid-compatible visuals dynamically. It runs locally over stdio, SSE, or streamable HTTP and does not require a separate API key in the documented setup.

Use cases

  • Generate architecture diagrams from a written system description
  • Create flowcharts for technical documentation
  • Render Mermaid syntax as SVG or PNG output
  • Validate and revise AI-generated Mermaid diagrams
  • Share generated diagrams through Mermaid-compatible URLs

Key features

  • Mermaid diagram and chart generation
  • Theme and background color configuration
  • Mermaid syntax validation
  • SVG, PNG, base64, file, and URL outputs
  • stdio, SSE, and streamable HTTP transports

Tools1

What MCP Mermaid lets your agent do. Expand a tool for its parameters.

Verified live~329 tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked 1d ago

Recent health check succeeded.

7/7 checks healthy over the last 79d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 1

Scanned 8d ago via OSV.dev · mcp-mermaid (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars646Stargazers on the source repository.
npm downloads20kPackage downloads in the last 30 days.
Last commit5mo agoMost recent push to the default branch.
Install checkInconclusiveStarted but did not complete the MCP handshake in our test.
Tools exposed1Callable tools this server registers over MCP.
Directory activity1 upvotesConfig copies, upvotes, and views on AllMCPs.

How MCP Mermaid works

What hustcc/mcp-mermaid MCP server does

The hustcc/mcp-mermaid MCP server exposes Mermaid diagram generation through the generate_mermaid_diagram MCP tool. An AI client can provide Mermaid text definitions and receive a rendered diagram or chart. Mermaid uses Markdown-inspired text syntax, so the server is suited to workflows where an agent generates or revises diagram definitions as part of documentation, planning, or explanation tasks.

The implementation is intended to cover Mermaid syntax and features. It also accepts visual configuration for backgroundColor and theme, allowing generated diagrams to include styling choices alongside their structural definition.

How it works

The client invokes generate_mermaid_diagram with Mermaid content and output options. The server validates Mermaid syntax and can return several representations: base64, svg, mermaid, file, svg_url, or png_url. File output saves a PNG diagram to disk for an AI agent, while URL outputs provide links suitable for sharing through Mermaid’s public rendering service.

The hustcc/mcp-mermaid MCP server can operate with stdio for desktop MCP clients or with HTTP-based transports for clients and services that connect over a network. SSE uses /sse by default on port 3033. Streamable HTTP uses /mcp; the documented default is port 1122 for local development, while the global CLI example uses port 3033.

Setup and configuration

For a desktop client, install and run the npm package through npx:

config.json
{
  "mcpServers": {
    "mcp-mermaid": {
      "command": "npx",
      "args": ["-y", "mcp-mermaid"]
    }
  }
}

The documented configuration is shown for Claude and can also be used with clients such as Cline. The package supports a CLI with three transport values: stdio, sse, and streamable. Use --port to change the HTTP port and --endpoint to change the transport path.

For a locally installed package, run mcp-mermaid -t sse or mcp-mermaid -t streamable. Source-based development uses npm install, npm run build, and the supplied start scripts. Docker images are also documented under susuperli/mcp-mermaid, including commands for exposing SSE on port 3033 or streamable HTTP on port 1122.

Tools and capabilities

  • generate_mermaid_diagram: Generates Mermaid diagrams and charts from Mermaid syntax.
  • Supports Mermaid diagram and chart syntax.
  • Applies backgroundColor and theme configuration.
  • Validates Mermaid output during generation.
  • Returns base64, SVG, Mermaid text, file, SVG URL, or PNG URL output.
  • Supports stdio, SSE, and streamable HTTP transports.

The hustcc/mcp-mermaid MCP server is a focused choice for Mermaid-based visuals.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about MCP Mermaid

Run it through npm with `npx -y mcp-mermaid`, or install it globally with `npm install -g mcp-mermaid`.

Yes. The README provides a Claude desktop MCP configuration using `npx -y mcp-mermaid`.

The documented output types are base64, SVG, Mermaid text, file, SVG URL, and PNG URL.

Yes. It supports SSE and streamable HTTP. The documented access points are `http://localhost:3033/sse` and `http://localhost:1122/mcp`.

Related MCP servers

All in Data Visualization All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewMCP Mermaid AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/hustcc-mcp-mermaid?style=directory)](https://allmcps.com/mcp/hustcc-mcp-mermaid)
HTML Embed
<a href="https://allmcps.com/mcp/hustcc-mcp-mermaid"><img src="https://allmcps.com/api/badge/hustcc-mcp-mermaid?style=directory" alt="MCP Mermaid on AllMCPs" /></a>