Mermaid MCP Server

A Model Context Protocol (MCP) server that converts Mermaid diagrams to PNG images

Catalog onlyCatalog onlySTDIO

Overview

Mermaid MCP Server is a Model Context Protocol (MCP) server that converts Mermaid diagrams into PNG images, enabling applications to generate visual diagrams from textual descriptions using the Mermaid markdown syntax.

To use the server, install it via Smithery or run it directly with npx commands. You can generate diagrams by sending Mermaid code to the server, which will return the rendered PNG image.

Converts Mermaid diagram code to PNG images - Supports multiple diagram themes (default, forest, dark, neutral) - Customizable background colors - High-quality rendering using Puppeteer - Implements MCP protocol for integration with AI assistants - Flexible output options: return images directly or save to disk - Detailed error handling

Generating flowcharts and sequence diagrams for documentation.
Creating visual representations of complex systems for presentations.
Integrating with AI assistants to automate diagram generation from text.

Add to your AI client

Use these steps to connect Mermaid MCP Server in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "mermaid-mcp-server-peng-shawn": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mermaid-mcp-server-peng-shawn"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "mermaid-mcp-server-peng-shawn": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mermaid-mcp-server-peng-shawn"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "mermaid-mcp-server-peng-shawn": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mermaid-mcp-server-peng-shawn"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "mermaid-mcp-server-peng-shawn": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mermaid-mcp-server-peng-shawn"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mermaid-mcp-server-peng-shawn": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mermaid-mcp-server-peng-shawn"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "mermaid-mcp-server-peng-shawn": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mermaid-mcp-server-peng-shawn"
      ]
    }
  }
}

FAQ

Does it support all Mermaid diagram types?

Yes, it supports various types of diagrams defined in the Mermaid syntax.

Can I customize the appearance of the diagrams?

Yes, you can choose themes and background colors for your diagrams.

Is there a limit to the size of diagrams I can generate?

The server can handle standard diagram sizes, but very large diagrams may require optimization.

Developer tools