Mermaid MCP Server
by peng-shawn
A Model Context Protocol (MCP) server that converts Mermaid diagrams to PNG images. This server allows AI assistants and other applications to generate visual diagrams from textual descriptions using the Mermaid markdown syntax.
Last updated: N/A
What is Mermaid MCP Server?
The Mermaid MCP Server is a tool that converts Mermaid diagram code into PNG images using a headless browser. It implements the Model Context Protocol (MCP) for seamless integration with AI assistants and other applications.
How to use Mermaid MCP Server?
The server can be used with various tools like Claude Desktop, Cursor, and Cline. It accepts Mermaid code as input and returns a PNG image, either directly or by saving it to disk. Configuration can be done via environment variables and command-line arguments. Installation can be automated via Smithery.
Key features of Mermaid MCP Server
Converts Mermaid diagram code to PNG images
Supports multiple diagram themes (default, forest, dark, neutral)
Customizable background colors
Uses Puppeteer for high-quality headless browser rendering
Implements the MCP protocol
Flexible output options: return images directly or save to disk
Error handling with detailed error messages
Use cases of Mermaid MCP Server
Generating diagrams for AI assistant responses
Creating visual representations of data flows
Generating documentation with embedded diagrams
Integrating diagram generation into web applications
FAQ from Mermaid MCP Server
Doesn't Claude desktop already support mermaid via canvas?
Doesn't Claude desktop already support mermaid via canvas?
Yes, but it doesn't support the theme and backgroundColor options. Plus, having a dedicated server makes it easier to create mermaid diagrams with different MCP clients.
Why do I need to specify CONTENT_IMAGE_SUPPORTED=false when using with Cursor?
Why do I need to specify CONTENT_IMAGE_SUPPORTED=false when using with Cursor?
Cursor doesn't support inline images in responses yet.
How do I install Mermaid Diagram Generator for Claude Desktop automatically?
How do I install Mermaid Diagram Generator for Claude Desktop automatically?
Use Smithery: npx -y @smithery/cli install @peng-shawn/mermaid-mcp-server --client claude
How do I handle Chrome dependencies when running in Docker?
How do I handle Chrome dependencies when running in Docker?
Option 1: Set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true and install Chrome in your Docker container. Option 2: Ensure your Docker container has the necessary dependencies for Puppeteer's bundled Chrome.
What parameters does the generate tool accept?
What parameters does the generate tool accept?
code, theme (optional), backgroundColor (optional), name (required when CONTENT_IMAGE_SUPPORTED=false), and folder (required when CONTENT_IMAGE_SUPPORTED=false).