mermaid-live

mermaid-live-mcp is an MCP server that generates Mermaid diagrams with a live browser preview. It parses Mermaid syntax provided by your AI assistant, opens a live preview in the browser, and renders the diagram as SVG in real time via a WebSocket connection. You can export diagrams as SVG or PNG, and update them on the fly as you refine the Mermaid code. The server exposes tools such as generate_mermaid to create diagrams from Mermaid syntax, update_diagram to modify an existing diagram and push changes to the preview, list_diagrams to view all diagrams in the current session, and export_diagram to save the rendered SVG to disk. Use these capabilities to iteratively design diagrams with instant visual feedback.

Prerequisites:

• Node.js and npm/yarn installed on your system.
• Basic familiarity with running MCP server configurations for your environment (Claude Desktop, Cursor, Windsurf, etc.).

Step-by-step installation:

1. Ensure Node.js is installed. Check with: node -v npm -v
2. You don’t need a local install of mermaid-live-mcp; you can run it via npx as shown in the config examples. To verify, run: npx -y mermaid-live-mcp --help
3. Configure your preferred environment to start the MCP server using the provided example:
   • Claude Desktop: add an entry under mcpServers with command: "npx" and args: ["-y", "mermaid-live-mcp"]
   • Cursor: add to your project root .cursor/mcp.json with the same server definition
   • Claude Code / Windsurf: use the same npx command in their respective config files
4. Start using the server in your workflow by invoking the Tools (generate_mermaid, update_diagram, list_diagrams, export_diagram) from your AI assistant or CLI, which will communicate with mermaid-live-mcp to render and export diagrams in real time.

Tips and notes:

• Mermaid-live-mcp supports all Mermaid diagram types and renders a live SVG preview in the browser with real-time updates.
• Use generate_mermaid to create new diagrams from Mermaid syntax, then open the live preview to inspect the rendering.
• Use update_diagram to modify the Mermaid code and see changes instantly in the browser without refreshing the page.
• Exporting diagrams is available via export_diagram, which writes the diagram SVG to disk.
• If you encounter connection issues, ensure your environment can access the WebSocket that the server creates for live preview, and confirm the npx command is accessible in your PATH.
• There are no required environment variables for basic operation; advanced deployments may expose configuration knobs in the MCP server (e.g., ports or host bindings) depending on your hosting environment.