Mermaid MCP Server

Mermaid MCP Server is an MCP server that converts textual Mermaid diagram code into PNG images or SVG files. It connects AI assistants and developer tools to a headless Chromium browser powered by Puppeteer, which executes the Mermaid.js rendering engine directly. Software developers, system architects, and technical writers use it to generate visual architecture diagrams, flowcharts, sequence diagrams, and class structures straight from conversational prompts. The server exposes a dedicated generate tool that lets users customize rendering parameters including color themes, background colors, and output formats. It supports returning rendered assets inline to supported clients or writing image files directly to the local filesystem when working in client environments that lack inline image preview support. By delegating chart layout and graphical rendering to a local headless environment, Mermaid MCP Server enables AI coding agents to produce clean, reproducible technical illustrations on demand.

Category: Design, Media & Creative

Tags: diagrams, mermaid, png, svg, visualization

Visit Mermaid MCP Server

How to install and configure Mermaid MCP Server

1. To use with Claude Desktop, add the server to your configuration file: json { "mcpServers": { "mermaid": { "command": "npx", "args": ["-y", "@peng-shawn/mermaid-mcp-server"] } } } 2. To install automatically in Claude Desktop using Smithery, run: bash npx -y @smithery/cli install @peng-shawn/mermaid-mcp-server --client claude 3. For clients that do not support inline images such as Cursor or Cline, set CONTENT_IMAGE_SUPPORTED=false and run: bash env CONTENT_IMAGE_SUPPORTED=false npx -y @peng-shawn/mermaid-mcp-server 4. For manual debugging with the MCP inspector, execute: bash npx @modelcontextprotocol/inspector node dist/index.js

What you can do with Mermaid MCP Server

• Rendering sequence diagrams and flowcharts directly inside Claude Desktop responses using custom themes like forest or dark. - Exporting state machine designs to disk as clean SVG vector graphics for technical documentation. - Generating class diagrams from code bases within Cursor and saving them directly into a project repository folder. - Customizing diagram visual presentation with transparent or hex-coded background colors for presentation slides. - Automating system architecture visualizations from natural language design discussions during coding agent workflows.

Key facts

• https://github.com/peng-shawn/mermaid-mcp-server
• Design, Media & Creative, Developer Tools & Code Intelligence
• diagrams, mermaid, png, svg, visualization

Part of MCP Servers

What can Mermaid MCP Server do?

Mermaid MCP Server converts Mermaid markdown syntax into rendered PNG or SVG diagram files. It uses a headless Puppeteer browser to render diagrams, letting you customize themes, set background colors, and either stream images back into chat responses or save files directly to designated folders on your local disk.

Which MCP clients work with Mermaid MCP Server?

The server works with Claude Desktop, Cursor, Cline, and any other client supporting the Model Context Protocol. When using clients like Cursor that lack inline image rendering, you can set the CONTENT_IMAGE_SUPPORTED environment variable to false to write generated diagrams directly to disk.

How do I install Mermaid MCP Server?

You can add Mermaid MCP Server to Claude Desktop by registering an npx entry pointing to @peng-shawn/mermaid-mcp-server. Alternatively, install it automatically via Smithery CLI using the command npx -y @smithery/cli install @peng-shawn/mermaid-mcp-server --client claude.

Why does Claude Desktop need this server if it has Canvas?

While Claude Desktop includes built-in diagram capabilities, Mermaid MCP Server provides programmatic control over diagram themes such as neutral, dark, and forest, supports custom background colors, and exports standalone SVG or PNG files across various MCP-compatible clients.

Is Mermaid MCP Server open source?

Yes, Mermaid MCP Server is open source and distributed under the MIT license on GitHub.