MCP server for generating [Mermaid](https://mermaid.js.org/) diagrams with live browser preview. Renders diagrams in real-time and supports SVG/PNG
Most browser automation work still happens through a UI a human drives. Mermaid Live MCP MCP server moves it into the conversation instead. MCP server for generating Mermaid diagrams with live browser preview. Renders diagrams in real-time and supports SVG/PNG export.
The server publishes 6 tools. What each one is for:
generate_mermaid — Generate a diagram from Mermaid syntax and open a live preview in the browserupdate_diagram — Replace a diagram's Mermaid syntax and re-render the live previewlist_diagrams — List all diagrams generated in the current sessionexport_diagram — Write a diagram's SVG to diskCursor — The Cursor tool exposed by this serverWindsurf — The Windsurf tool exposed by this serverThe server ships on npm as mermaid-live-mcp, so your MCP client can launch it on demand — there is no separate build step. Add the server block to your client's configuration, restart it, and the tools register themselves.
This sits in the browser automation group, where several servers overlap in what they claim to do but differ sharply once you actually set them up. Mermaid Live MCP's toolset — generate_mermaid, update_diagram, list_diagrams and 3 more — is a fair guide to whether it matches your workflow. It is maintained by iishyfishyy; worth a glance at recent repository activity before you build anything load-bearing on it.
We check each listing at SyncDev against the project's documentation before it goes live — if something here drifts out of date, it is a bug worth reporting.
| Tool | What it does |
|---|---|
| generate_mermaid | Generate a diagram from Mermaid syntax and open a live preview in the browser |
| update_diagram | Replace a diagram's Mermaid syntax and re-render the live preview |
| list_diagrams | List all diagrams generated in the current session |
| export_diagram | Write a diagram's SVG to disk |
| Cursor | The Cursor tool exposed by this server. |
| Windsurf | The Windsurf tool exposed by this server. |
{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": ["-y", "mermaid-live-mcp"]
}
}
}Configuration as documented by the project. Restart the client after saving.
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
Industrial-strength web extraction — render, scrape, crawl and search entire sites into clean markdown.
The original Chromium automation reference server — simple, screenshot-driven browser control.
Give your coding agent the full DevTools toolbox: traces, network, console, heap snapshots and Lighthouse.
Puppeteer-powered browser control that drives pages from the accessibility tree instead of pixels.
Cloud browsers for AI agents — automation sessions that run in Browserbase's fleet, not on your machine.