export_diagram
Write a diagram's SVG to disk. PNG export is available via the browser download buttons.
LABSCO SUMMARY
The diagram changes in the window you are already watching.
Diagrams hold an id for the length of a session, so a revision replaces the syntax and re-renders in the same preview instead of leaving a second file to compare against. Export splits by format: SVG is written to a path you give, while PNG comes out of the preview's own download buttons. The diagram list covers the current session.
What it is
A diagram server that renders Mermaid.js syntax into a live preview in the browser and keeps this session's diagrams addressable by id.
What you get
- Rendering of flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams and Gantt charts from Mermaid.js syntax.
- A live preview in the browser, carrying SVG and PNG download buttons.
- In-place revision: a diagram's syntax is replaced by id and the preview re-renders.
- A list of the diagrams generated in the current session, and SVG written straight to a path you choose.
Requirements
A browser for the live preview, and a writable path when you export SVG to disk.
Setup effort
One command — npx -y mermaid-live-mcp
USE CASES
01
Iterating on a flowchart while someone is watching it change
The first render puts the diagram in the browser preview; each revision replaces its syntax by id and re-renders in the same window.
02
Getting a finished diagram into a document
The SVG is written to a path you name, ready to drop into the doc, while PNG stays with the preview's download buttons.
03
Finding the right diagram again after generating several
The session's diagrams are listed with their ids, so the one that is wanted can be exported without re-rendering the rest.
4 tools
Counted once with only startup setup. Other versions, modes or optional credentials may expose a different list.
generate_mermaid
Generate a diagram from Mermaid.js syntax. Renders in live preview browser with SVG/PNG download options. Supports flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, and more.
list_diagrams
List all diagrams generated in this session.
update_diagram
Replace a diagram's Mermaid syntax and re-render it in the preview.
BEFORE YOU INSTALL
What to know first
Tools you get
4 tools when we connected.
Requires
npx on PATH
CONTEXT COST
Light Standing cost
Rated by the size of the 4 tool definitions that ride along on every turn, not by how many there are
INSTALLATION
Connect your client
Add the block to your client, or run the command directly.
Server setup
Configuration file
JSON
{
"mcpServers": {
"mermaid-live-mcp": {
"command": "npx",
"args": [
"-y",
"mermaid-live-mcp"
]
}
}
}npx
TERMINAL
npx -y mermaid-live-mcp
