hustcc

mcp mermaid

Built by hustcc 493 stars

What is mcp mermaid?

❤️ Generate mermaid diagram and chart with AI MCP dynamically.

How to use mcp mermaid?

1. Install a compatible MCP client (like Claude Desktop). 2. Open your configuration settings. 3. Add mcp mermaid using the following command: npx @modelcontextprotocol/mcp-mermaid 4. Restart the client and verify the new tools are active.
🛡️ Scoped (Restricted)
npx @modelcontextprotocol/mcp-mermaid --scope restricted
🔓 Unrestricted Access
npx @modelcontextprotocol/mcp-mermaid

Key Features

Native MCP Protocol Support
Real-time Tool Activation & Execution
Verified High-performance Implementation
Secure Resource & Context Handling

Optimized Use Cases

Extending AI models with custom local capabilities
Automating system workflows via natural language
Connecting external data sources to LLM context windows

mcp mermaid FAQ

Q

Is mcp mermaid safe?

Yes, mcp mermaid follows the standardized Model Context Protocol security patterns and only executes tools with explicit user-granted permissions.

Q

Is mcp mermaid up to date?

mcp mermaid is currently active in the registry with 493 stars on GitHub, indicating its reliability and community support.

Q

Are there any limits for mcp mermaid?

Usage limits depend on the specific implementation of the MCP server and your system resources. Refer to the official documentation below for technical details.

Official Documentation

View on GitHub

<img src="https://mermaid.js.org/favicon.svg" height="24"/> MCP Mermaid build npm Version smithery badge npm License Trust Score

Generate <img src="https://mermaid.js.org/favicon.svg" height="14"/> mermaid diagram and chart with AI MCP dynamically. Also you can use:

  • <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ZFK8SrovcqgAAAAAAAAAAAAAemJ7AQ/original" height="14"/> mcp-server-chart to generate chart, graph, map.
  • <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*EdkXSojOxqsAAAAAQHAAAAgAemJ7AQ/original" height="14"/> Infographic to generate infographic, such as Timeline, Comparison, List, Process and so on.

✨ Features

  • Fully support all features and syntax of Mermaid.

  • Support configuration of backgroundColor and theme, enabling large AI models to output rich style configurations.

  • Support exporting to base64, svg, mermaid, file, and remote-friendly svg_url, png_url formats, with validation for Mermaid to facilitate the model's multi-round output of correct syntax and graphics. Use outputType: "file" to automatically save PNG diagrams to disk for AI agents, or the URL modes to share diagrams through public mermaid.ink links.

<img width="720" alt="mcp-mermaid" src="https://mermaid.js.org/header.png" />

🤖 Usage

To use with Desktop APP, such as Claude, VSCode, Cline, Cherry Studio, and so on, add the MCP server config below. On Mac system:

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

On Window system:

{
  "mcpServers": {
    "mcp-mermaid": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "mcp-mermaid"
      ]
    }
  }
}

Also, you can use it on aliyun, modelscope, glama.ai, smithery.ai or others with HTTP, SSE Protocol.

Access Points:

  • SSE: http://localhost:3033/sse
  • Streamable: http://localhost:1122/mcp

Available Docker Tags:

  • susuperli/mcp-mermaid:latest - Latest stable version
  • View all available tags at Docker Hub

🚰 Run with SSE or Streamable transport

Option 1: Global Installation

Install the package globally:

npm install -g mcp-mermaid

Run the server with your preferred transport option:

# For SSE transport (default endpoint: /sse)
mcp-mermaid -t sse

# For Streamable transport with custom endpoint
mcp-mermaid -t streamable

Option 2: Local Development

If you're working with the source code locally:

# Clone and setup
git clone https://github.com/hustcc/mcp-mermaid.git
cd mcp-mermaid
npm install
npm run build

# Run with npm scripts
npm run start:sse        # SSE transport on port 3033
npm run start:streamable # Streamable transport on port 1122

Access Points

Then you can access the server at:

  • SSE transport: http://localhost:3033/sse
  • Streamable transport: http://localhost:1122/mcp (local) or http://localhost:3033/mcp (global)

🎮 CLI Options

You can also use the following CLI options when running the MCP server. Command options by run cli with -h.

MCP Mermaid CLI

Options:
  --transport, -t  Specify the transport protocol: "stdio", "sse", or "streamable" (default: "stdio")
  --port, -p       Specify the port for SSE or streamable transport (default: 3033)
  --endpoint, -e   Specify the endpoint for the transport:
                    - For SSE: default is "/sse"
                    - For streamable: default is "/mcp"
  --help, -h       Show this help message

🔨 Development

Install dependencies:

npm install

Build the server:

npm run build

Start the MCP server

Using MCP Inspector (for debugging):

npm run start

Using different transport protocols:

# SSE transport (Server-Sent Events)
npm run start:sse

# Streamable HTTP transport
npm run start:streamable

Direct node commands:

# SSE transport on port 3033
node build/index.js --transport sse --port 3033

# Streamable HTTP transport on port 1122
node build/index.js --transport streamable --port 1122

# STDIO transport (for MCP client integration)
node build/index.js --transport stdio

🐳 Docker Usage

Run MCP Mermaid with Docker:

# Pull the image
docker pull susuperli/mcp-mermaid:latest

# Run with SSE transport (default)
docker run -p 3033:3033 susuperli/mcp-mermaid:latest --transport sse

# Run with streamable transport
docker run -p 1122:1122 susuperli/mcp-mermaid:latest --transport streamable --port 1122

📄 License

MIT@hustcc.

Global Ranking

-
Trust ScoreMCPHub Index

Based on codebase health & activity.

Manual Config

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