@lioneltay/mermaid-mcp

MCP server that renders Mermaid diagrams to PNG so AI agents can visually inspect them.

Install

Add the MCP server to Claude Code:

claude mcp add mermaid npx -y @lioneltay/mermaid-mcp

Or add it manually to your .mcp.json:

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "@lioneltay/mermaid-mcp"]
    }
  }
}

Claude Code Plugin

You can also install as a plugin to get the /diagram skill:

# 1. Add the marketplace
claude plugin marketplace add lioneltay/mermaid-mcp

# 2. Install the plugin
claude plugin install mermaid-mcp@mermaid-mcp

Note: There is a known issue where plugin MCP servers may not start correctly. If the MCP server fails, add it manually with claude mcp add as shown above.

Tools

render

Renders Mermaid diagram code to a PNG image.

Input: code (string) — Mermaid diagram source

Returns: The rendered PNG image inline, plus a saved copy in $TMPDIR/mermaid-mcp/renders/.

License

MIT