Mermaid Diagram GeneratorBLOCK
A Model Context Protocol (MCP) server that converts Mermaid diagrams to PNG images
Overview
From the repository's own README, as read at the audited commit. Badges and raw HTML are left out.
A Model Context Protocol (MCP) server that converts Mermaid diagrams to PNG images or SVG files. This server allows AI assistants and other applications to generate visual diagrams from textual descriptions using the Mermaid markdown syntax.
Features
- Converts Mermaid diagram code to PNG images or SVG files
- Supports multiple diagram themes (default, forest, dark, neutral)
- Customizable background colors
- Uses Puppeteer for high-quality headless browser rendering
- Implements the MCP protocol for seamless integration with AI assistants
- Flexible output options: return images/SVG directly or save to disk
- Error handling with detailed error messages
How It Works
The server uses Puppeteer to launch a headless browser, render the Mermaid diagram to SVG, and optionally capture a screenshot of the rendered diagram. The process involves:
- Launching a headless browser instance
- Creating an HTML template with the Mermaid code
- Loading the Mermaid.js library
- Rendering the diagram to SVG
- Either saving the SVG directly or taking a screenshot as PNG
- Either returning the image/SVG directly or saving it to disk
Build
npx tsc
Usage
Use with Claude desktop
{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": ["-y", "@peng-shawn/mermaid-mcp-server"]
}
}
}Use with Cursor and Cline
env CONTENT_IMAGE_SUPPORTED=false npx -y @peng-shawn/mermaid-mcp-server
You can find a list of mermaid diagrams under ./diagrams, they are created using Cursor agent with prompt: "generate mermaid diagrams and save them in a separate diagrams folder explaining how renderMermaidPng work"
Run with inspector
Run the server with inspector for testing and debugging:
npx @modelcontextprotocol/inspector node dist/index.js
The server will start and listen on stdio for MCP protocol messages.
Learn more about inspector [here](https://modelcontextprotocol.io
46b83775c3c4OBSERVED · 2026-10-06Connect
Built from this server's own package name, version and transport as found in its source — not copied from anyone's documentation, so it cannot drift against a page we do not control.
claude mcp add mermaid-mcp-server -- npx -y @peng-shawn/[email protected]
{
"mcpServers": {
"mermaid-mcp-server": {
"command": "npx",
"args": [
"-y",
"@peng-shawn/[email protected]"
]
}
}
}Exposed tools (1)
1 read · 0 write · 0 destructive.
| Tool | Risk | Description |
|---|---|---|
generate | read | Generate PNG image or SVG from mermaid markdown |
Trust audit
BLOCKgrade D · trust 69/100 Do not install this without reading the findings. The audit found something that could harm you or your machine.
| Layer | What it checks | Result |
|---|---|---|
| L0 | Provenance & inventory | PASS |
| L1 | Static analysis of the code | FAIL |
| L2 | Instruction surface (what it tells the agent) | PASS |
| L3 | Class-specific surface | PASS |
| L4 | Behavioural (sandbox) | SKIPPED |
What the source does
- Filesystem
- declared (1 observation(s))
- Network
- none-observed
- Shell
- declared (1 observation(s))
- Dependencies
- not all pinned
- Secrets in source
- none-found
Findings (2)
const screenshot = await page.$eval(
@modelcontextprotocol/sdk, import-meta-resolve, mermaid, puppeteer, @types/node, typescript
Gates applied: no_behavioural_pass.
46b83775c3c4full audit observations/trust-audit/mcp-server/peng-shawn__mermaid-diagram-generator.json · Report an issue / request a re-scanAudit history
Every audit this server has had. A grade with a past is a grade somebody is still checking.
| Date | Source | Verdict | Grade | Score | Change |
|---|---|---|---|---|---|
| 2026-10-06 | 46b83775c3c4 | BLOCK | D | 69 | first audit |
Questions
What is the Mermaid Diagram Generator MCP server?
A Model Context Protocol (MCP) server that converts Mermaid diagrams to PNG images
What tools does Mermaid Diagram Generator expose?
1 in total: 1 read-only, 0 that write, and 0 that can delete or overwrite. Every one is listed on this page with its risk.
Is Mermaid Diagram Generator safe to connect to an agent?
No — not without reading the findings first. The audit graded it D (69/100) and found 1 critical or high issue in the source. Each one is listed on this page with the file and line it is on.
What credentials does Mermaid Diagram Generator need?
No credential environment variables were found in its source, so it appears to need none.
How does Mermaid Diagram Generator run?
It speaks stdio, so it runs as a local process your client starts. It is published on npm as @peng-shawn/mermaid-mcp-server at 0.2.0.
How current is this page?
The grade is for one exact copy of the source (46b83775c3c4), read on 2026-10-06. The repository is watched and re-audited when it changes.