Mermaid

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

javascript

223

GitHub Stars

javascript

Language

6 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

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

You can run the Mermaid MCP Server to convert Mermaid diagram code into PNG or SVG outputs via MCP, enabling AI assistants and apps to render diagrams from text.

How to use

Use the Mermaid MCP Server with an MCP client to render diagrams from Mermaid code. You can return the image directly in responses or save it to disk depending on how you configure CONTENT_IMAGE_SUPPORTED. You can specify a theme, a background color, and the desired output format (png by default, or svg). When saving to disk, provide a name and a folder path.

How to install

Prerequisites: you need Node.js and npm installed on your machine.

# Check Node.js and npm versions
node -v
npm -v

# Run the Mermaid MCP Server directly with npx
npx -y @peng-shawn/mermaid-mcp-server

Additional notes and tips

If you want the server to return images or SVG directly in responses, ensure CONTENT_IMAGE_SUPPORTED is set to true. If you prefer to save outputs to disk, set CONTENT_IMAGE_SUPPORTED to false and provide a name and folder for the generated file.

To run the server with debugging capabilities, you can start the inspector alongside the server to observe MCP protocol messages during operation.

Available tools

generate

Converts Mermaid diagram code to a PNG image or SVG file with optional theme, backgroundColor, and outputFormat parameters.