This MCP server exposes a single tool named generate that renders Mermaid diagram code into a PNG image or an SVG file. It uses a headless browser (via Puppeteer) to render Mermaid diagrams with selectable themes (default, forest, dark, neutral) and an adjustable background color. Depending on the environment variable CONTENT_IMAGE_SUPPORTED, the server can return the generated image/SVG directly in the MCP response or save it to disk when you supply a name and a folder. Use this to integrate Mermaid diagram rendering into AI assistants or other MCP clients, enabling dynamic diagram generation from textual prompts.

To use it, call the generate tool through MCP with parameters such as code ( Mermaid syntax ), theme, backgroundColor, outputFormat (png or svg), and optional name/folder if you’re saving to disk. If CONTENT_IMAGE_SUPPORTED is true (default), you’ll receive the image or SVG in the response. If false, you must provide a folder path and a file name so the server can write the output to disk and return the path. This makes it compatible with clients that don’t support inline binary content.

Example usage involves sending an MCP message that invokes generate with the needed fields, then handling the response accordingly. The server also includes options for running with an inspector for debugging and can be used in Docker environments with guidance around Puppeteer and Chrome dependencies.

Prerequisites:

• Node.js (v14+ recommended) and npm or pnpm
• Basic knowledge of MCP client usage

1. Install Node.js and npm if not already installed. For example, on macOS with Homebrew: brew install node

2. Install or run the Mermaid MCP server using npx (as shown in the README example):

   npx -y @peng-shawn/mermaid-mcp-server

   This will install the server package temporarily and launch it to listen for MCP messages on standard IO.

3. (Optional) If you prefer to install locally before running, you can install the package globally or in your project:

   npm install -g @peng-shawn/mermaid-mcp-server

   or in a project

   npm install @peng-shawn/mermaid-mcp-server

4. Confirm dependencies and environment:

   • Puppeteer will attempt to use Chromium. In Docker or minimal environments, you may need to install Chrome/Chromium or configure Puppeteer to use the bundled browser.
   • If running in Docker or Smithery environments, consider the Puppeteer chrome path and dependencies as described in the README to avoid browser errors.

5. Start the server and verify it’s listening for MCP messages (as per your integration). You can also run the inspector tool for debugging if needed.

6. (Optional) If you’re integrating via Smithery, use the provided Smithery commands from the README to install and connect the client side.

Tips and notes:

• CONTENT_IMAGE_SUPPORTED controls whether images are returned directly or saved to disk. If you’re using clients that support inline content, keep this as true; otherwise set false and provide name/folder to save.
• The generate tool supports themes: default, forest, dark, neutral, and a backgroundColor option for customization.
• When running in Docker, Puppeteer will try to use the bundled Chromium by default, but you may need to install Chromium or configure PUPPETEER_EXECUTABLE_PATH if issues arise.
• For debugging in development, you can run the inspector tool as shown in the README to step through MCP messages.
• Saving to disk is useful for environments that don’t support inline images yet (e.g., some Cursor setups). In that case, ensure you provide an absolute folder path and a file name.
• The server exposes a single tool named generate; you can extend clients to pass code, theme, backgroundColor, outputFormat, name, and folder to customize output.