Render Mermaid diagram code to PNG or SVG images, with theme and background options.
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add mermaid -- npx -y @peng-shawn/mermaid-mcp-server~/.codex/config.toml
[mcp_servers.mermaid]
command = "npx"
args = ["-y", "@peng-shawn/mermaid-mcp-server"]
# codex mcp add mermaid -- npx -y @peng-shawn/mermaid-mcp-server~/.cursor/mcp.json
{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": [
"-y",
"@peng-shawn/mermaid-mcp-server"
]
}
}
}.vscode/mcp.json
{
"servers": {
"mermaid": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@peng-shawn/mermaid-mcp-server"
]
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": [
"-y",
"@peng-shawn/mermaid-mcp-server"
]
}
}
}claude_desktop_config.json
{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": [
"-y",
"@peng-shawn/mermaid-mcp-server"
]
}
}
}.trae/mcp.json
{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": [
"-y",
"@peng-shawn/mermaid-mcp-server"
]
}
}
}