MCP App that renders Mermaid diagrams as interactive UI in Claude, VS Code and other MCP clients
npx -y mermaid-mcp-appAdd this server entry to the mcpServers object in your Claude Desktop config, then restart the app.
{
"mcpServers": {
"io-github-finfin-mermaid-mcp-app": {
"command": "npx",
"args": [
"-y",
"mermaid-mcp-app"
]
}
}
}~/Library/Application Support/Claude/claude_desktop_config.json%APPDATA%\Claude\claude_desktop_config.jsonNo remote HTTP endpoint is advertised. Use the package or stdio setup shown in Install.
mermaid-mcp-app is an MCP server for MCP App that renders Mermaid diagrams as interactive UI in Claude, VS Code and other MCP clients. It supports STDIO transport.
Use the generated config in Install. This server runs with npx -y mermaid-mcp-app; add any required environment variables before starting your client.
Choose the Claude Desktop tab in Install and copy the config for npx -y mermaid-mcp-app. Add required environment variables before starting Claude Desktop.
Choose the Claude Code tab in Install and copy the config for npx -y mermaid-mcp-app. Add required environment variables before starting Claude Code.
Choose the Codex tab in Install and copy the config for npx -y mermaid-mcp-app. Add required environment variables before starting Codex.
Choose the Cursor or VS Code tab in Install and copy the config for npx -y mermaid-mcp-app. Add required environment variables before starting Cursor or VS Code.
mermaid-mcp-app uses STDIO transport. Use the package or command config in Install.
mermaid-mcp-app inventory is listed when the MCP endpoint exposes tools, resources, or prompts. Some servers require auth first.
mermaid-mcp-app does not advertise a verified auth requirement. If discovery fails, it may still need provider login, an API key, a bearer token, or a session header.
| Package | Registry | Version | Inputs |
|---|---|---|---|
mermaid-mcp-appstdio | npm | 0.3.2 | None advertised |