mermaid-mcp
README.md
# mermaid-mcp
An [MCP](https://modelcontextprotocol.io) server that renders [Mermaid](https://mermaid.js.org)
diagram markup to **PNG** images, using [`@mermaid-js/mermaid-cli`](https://github.com/mermaid-js/mermaid-cli)
(Puppeteer/Chromium) under the hood.
Give it AI-generated Mermaid — flowcharts, sequence, class, ER, gantt, state diagrams — and get
back a rendered image, returned inline so the host can preview it and/or written to a file on disk.
## Tool
### `render_mermaid`
| Parameter | Type | Required | Description |
| ----------------- | -------- | -------- | ----------- |
| `diagram` | string | yes | Mermaid diagram source, e.g. `graph TD; A-->B;` |
| `outputPath` | string | no | Absolute path ending in `.png` to also save the image to. Omit to only return inline. |
| `theme` | enum | no | `default` \| `dark` \| `forest` \| `neutral` (default `default`) |
| `backgroundColor` | string | no | e.g. `white`, `transparent`, `#ffffff` (default `white`) |
| `width` | number | no | Output width in pixels |
| `height` | number | no | Output height in pixels |
| `scale` | number | no | Device scale factor; higher = sharper/larger PNG (default `1`) |
Returns a short text summary plus the PNG as inline MCP `image` content. When `outputPath` is
supplied, the file is written there and the path is included in the summary.
## Install & build
```bash
npm install
npm run build
```
## Browser requirement
Mermaid renders inside a real browser (it needs a DOM for layout), so **Google Chrome / Chromium is
required**. Puppeteer resolves it, in this order:
1. **`PUPPETEER_EXECUTABLE_PATH`** — an explicit Chrome/Chromium binary you point it at.
2. **Puppeteer's bundled Chromium** — downloaded by `@mermaid-js/mermaid-cli` during `npm install`.
3. **A system-installed Google Chrome** — used as a fallback (`channel: "chrome"`) if the bundled
browser can't be launched.
If none can be launched, the tool returns an actionable error: install Chrome, run
`npx puppeteer browsers install chrome`, or set `PUPPETEER_EXECUTABLE_PATH`.
> If Puppeteer's automatic Chromium download is blocked (a locked-down network, or — on some Windows
> machines — a stalled extraction), just install Google Chrome and the renderer falls back to it.
## Test
```bash
npm test
```
Integration tests using Node's built-in test runner (`node:test`). They exercise the renderer
(input validation, inline render, render-to-file) and a full MCP stdio round-trip (spawn the server,
list tools, call `render_mermaid`). The render tests launch headless Chromium, so they need the
Chromium install above and take a few seconds each.
## Configure in an MCP client
After `npm run build`, point your MCP client at the built entry over stdio.
### Claude Code
```bash
# From a local build:
claude mcp add mermaid -- node /absolute/path/to/mermaid-mcp/dist/index.js
# Or from the published package:
claude mcp add mermaid -- npx -y @volare-consulting/mermaid-mcp
```
### Claude Desktop / generic `mcpServers` config
```json
{
"mcpServers": {
"mermaid": {
"command": "node",
"args": ["/absolute/path/to/mermaid-mcp/dist/index.js"]
}
}
}
```
## Development
```bash
npm run dev # run the server from TypeScript source via tsx
```
## Releasing
Published to the public npm registry as
[`@volare-consulting/mermaid-mcp`](https://www.npmjs.com/package/@volare-consulting/mermaid-mcp)
via a tag-driven GitHub Actions release (`.github/workflows/publish.yml`), which calls the org's
shared `publish-npm-public` reusable workflow.
1. Bump `version` in `package.json` on a PR and merge to `main`.
2. Tag the merge commit and push the tag:
```bash
git tag v0.1.0 && git push origin v0.1.0
```
The tag **must** equal the `package.json` version or the job fails. Pushing a `v*` tag builds and
publishes the package (tests are skipped — they need headless Chromium the publish runner doesn't
provide). Authentication uses the org-level `NPM_TOKEN` secret.
## License
MIT
TDQS
A3.9/5.0
Scored across 1 tool
Disambiguation5/5
Only one tool exists, so there is no ambiguity in purpose. The tool clearly renders Mermaid diagrams to PNG.
Naming Consistency5/5
The tool name 'render_mermaid' follows a clear verb_noun pattern, consistent with the single tool in the set.
Tool Count3/5
A single tool feels thin for a server, but it may be justified if the sole purpose is rendering. It borders on the lower end of acceptable scope.
Completeness4/5
The tool covers the core rendering functionality across many diagram types. Minor gaps like syntax validation or listing available diagram types are not critical.
Maintenance
ActivityStale
ResponsivenessNo issues