Awesome MCP › Design & Visualization

veelenga/claude-mermaid

⭐ 206 TypeScript repository created 2025-09-29

claude-mermaid is a TypeScript MCP server that turns Mermaid diagram code produced by an assistant into rendered images and shows them in a browser preview that updates automatically as the diagram is edited. It is built for Claude Code but documented for any MCP client. Two tools make up the interface. mermaid_preview takes the diagram source and a required preview_id and renders it, opening a live preview on a local HTTP port; optional parameters set the output format (svg, png or pdf), the theme (default, forest, dark or neutral), the background colour, width, height and a scale factor for higher quality output. Live preview in the browser is SVG only. mermaid_save writes the current diagram for a given preview_id to a destination path in the requested format, rendering that format on demand if it does not exist yet. Distinct preview_id values allow several diagrams to be worked on at once. The preview page supports panning by dragging, zooming with browser controls, resetting the view and downloading the diagram as SVG or PNG. Working files are kept under ~/.config/claude-mermaid/live. The package ships as a Claude Code plugin, installable through the plugin marketplace, and includes a bundled mermaid-diagrams skill that supplies diagram authoring guidance and manages the render-then-save workflow; it can also be installed globally from npm as claude-mermaid or built from source. The README documents configuration for Codex, Cursor, Cline in VS Code, Windsurf, the Gemini CLI and generic MCP clients. It suits iterative diagram work and documentation pipelines where a diagram is refined over several turns.

https://github.com/veelenga/claude-mermaid

mcpmcp-servermermaiddiagramslive-reloadclaude-codesvgtypescript