Mermaid Chart

mermaid-chart-mcp

typescript

1

GitHub Stars

typescript

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": {
    "pickstar-2002-mermaid-chart-mcp": {
      "command": "npx",
      "args": [
        "@pickstar-2002/mermaid-chart-mcp@latest"
      ]
    }
  }
}

You can render Mermaid diagram code into high-quality images using a dedicated MCP server. It supports PNG, SVG, and PDF outputs, with themed visuals, cloud storage options, instant online previews, and fast rendering, making it easy to share diagrams across tools and editors.

How to use

To render Mermaid diagrams, run your MCP client and point it at the Mermaid Chart MCP server configuration. You provide Mermaid code and receive a high-quality image in your preferred format. You can also enable cloud storage to host the generated image and share an online link.

How to install

# Prerequisites
# Make sure you have Node.js >= 18 installed
node -v
npm -v

# Quick start (latest release)
npx @pickstar-2002/mermaid-chart-mcp@latest

# Or install globally (optional)
npm install -g @pickstar-2002/mermaid-chart-mcp@latest

# For project dependency
npm install @pickstar-2002/mermaid-chart-mcp@latest

Configuration and usage notes

Configure each MCP client to use the Mermaid Chart MCP server. The following snippets show explicit configurations you can place in your client setup files.

Cloud storage and sharing

You can enable cloud storage so rendered images are uploaded to a cloud store and an online link is returned. This allows instant sharing across teams and devices.

Theme and output options

Choose from multiple themes (default, dark, forest, neutral) and output formats (png, svg, pdf). You can customize the image size and background color to fit your needs.

System requirements

Node.js 18 or newer
Supported OS: Windows, macOS, Linux
Sufficient memory for rendering (2 GB+ recommended)
Disk space for Puppeteer browser data (about 500 MB+)

Troubleshooting and tips

If you encounter rendering issues, check that the Mermaid code is valid and that the MCP client is using the correct server command and version. Ensure network access to any cloud storage endpoints if you enable upload features.

Available tools

render_mermaid_chart

Renders Mermaid diagram code into a high-quality image file, supporting formats PNG, SVG, and PDF with optional cloud upload and preview links.