repository·main·Indexed 42 days ago
https://github.com/peng-shawn/mermaid-mcp-serverA Model Context Protocol (MCP) server version 0.2.0 that converts Mermaid diagram code into PNG or SVG images using Puppeteer. It provides a `generate` tool for AI assistants to render visual diagrams, with configurable output via the `CONTENT_IMAGE_SUPPORTED` environment variable to either return image data directly or save files to disk.
To automatically install the Mermaid Diagram Generator for Claude Desktop, use the Smithery CLI:
npx -y @smithery/cli install @peng-shawn/mermaid-mcp-server --client claude```bash
npx -y @smithery/cli install @peng-shawn/mermaid-mcp-server --client claude
```埋Since Cursor does not currently support inline images in responses, you must set CONTENT_IMAGE_SUPPORTED=false to force the server to save diagrams to disk instead of returning them directly. Run the server using:
env CONTENT_IMAGE_SUPPORTED=false npx -y @peng-shawn/mermaid-mcp-serverAdd the following configuration to your Claude Desktop MCP settings to use the server via npx:
{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": ["-y", "@peng-shawn/mermaid-mcp-server"]
}
}
}To test and debug the server, run it using the Model Context Protocol inspector. The server will start and listen on stdio for MCP protocol messages:
npx @modelcontextprotocol/inspector node dist/index.jsThe CONTENT_IMAGE_SUPPORTED environment variable determines how the generate tool returns results:
true (default): Images are returned directly in the MCP response (best for Claude Desktop).false: Images are saved to disk. This mode requires the name and folder parameters in the generate tool call (required for Cursor/Cline).When running in Docker or Smithery environments, you may need to manage Chrome/Puppeteer dependencies:
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true during build.PUPPETEER_EXECUTABLE_PATH at runtime to point to the installation.For Smithery users, the latest version is designed to work without additional configuration.
The server exposes a single tool, generate, which converts Mermaid diagram code into a PNG or SVG file.
code (required): The Mermaid diagram code to render.theme (optional): Theme for the diagram. Options: "default", "forest", "dark", "neutral".backgroundColor (optional): Background color (e.g., 'white', 'transparent', '#F0F0F0').outputFormat (optional): Output format. Options: "png" (default), "svg".name (required when CONTENT_IMAGE_SUPPORTED=false): Name for the generated file.folder (required when CONTENT_IMAGE_SUPPORTED=false): Absolute path to save the image/SVG.CONTENT_IMAGE_SUPPORTEDtrue (default): The tool returns the image/SVG data directly in the response.false: The tool saves the file to the specified folder and returns the file path.// Example: Generate a sequence diagram with forest theme and light gray background
{
"code": "sequenceDiagram\n Alice->>John: Hello John, how are you?\n John-->>Alice: Great!",
"theme": "forest",
"backgroundColor": "#F0F0F0"
}The server's behavior can be modified using the following environment variables:
| Variable | Default | Description |
|---|---|---|
MERMAID_LOG_VERBOSITY | 2 | Controls logging verbosity. 0 (EMERGENCY) to 5 (DEBUG). |
CONTENT_IMAGE_SUPPORTED | true | If false, images must be saved to disk via name and folder parameters. |
PUPPETEER_EXECUTABLE_PATH | undefined | Path to a specific Puppeteer/Chrome executable. |
The generate tool converts Mermaid markdown code into either a PNG image or an SVG file.
CONTENT_IMAGE_SUPPORTED environment variable:CONTENT_IMAGE_SUPPORTED=true (default): The tool returns the image data (PNG) or SVG text directly in the MCP response. If you also provide name and folder, the file will be saved to disk in addition to being returned.CONTENT_IMAGE_SUPPORTED=false: The tool cannot return images in the response. You must provide both name and folder parameters, and the tool will only return the file path of the saved image.{
"name": "generate",
"arguments": {
"code": "graph TD; A-->B;",
"theme": "default",
"backgroundColor": "white",
"outputFormat": "png",
"name": "my-diagram",
"folder": "/path/to/output"
}
}The generate tool accepts the following parameters in its input schema:
{
"properties": {
"code": {
"type": "string",
"description": "The mermaid markdown to generate an image from"
},
"theme": {
"type": "string",
"enum": ["default", "forest", "dark", "neutral"],
"description": "Theme for the diagram (optional)"
},
"backgroundColor": {
"type": "string",
"description": "Background color for the diagram, e.g. 'white', 'transparent', '#F0F0F0' (optional)"
},
"outputFormat": {
"type": "string",
"enum": ["png", "svg"],
"description": "Output format for the diagram (optional, defaults to 'png')"
},
"name": {
"type": "string",
"description": "Name of the diagram (optional, or required if CONTENT_IMAGE_SUPPORTED=false)"
},
"folder": {
"type": "string",
"description": "Absolute path to save the image to (optional, or required if CONTENT_IMAGE_SUPPORTED=false)"
}
},
"required": ["code"]
}Set the MERMAID_LOG_VERBOSITY environment variable to one of the following numeric values to control log output:
0: EMERGENCY - Only the most critical errors1: CRITICAL - Critical errors that require immediate attention2: ERROR - Error conditions (default)3: WARNING - Warning conditions4: INFO - Informational messages5: DEBUG - Debug-level messages