claude-mermaid and mcp-mermaid-validator
These are complementary tools: one provides live preview and rendering of Mermaid diagrams while the other focuses on validation, so they could be used together in a workflow where diagrams are first validated for correctness, then previewed for visual output.
About claude-mermaid
veelenga/claude-mermaid
MCP Server to previewing mermaid diagrams with live reload
Implements an MCP server that streams Mermaid diagram renders to a local browser preview on port 3737, enabling real-time updates as Claude modifies diagram code. Supports multiple concurrent previews via `preview_id` parameters, persistent working files in `~/.config/claude-mermaid/live`, and export to SVG/PNG/PDF with customizable themes, dimensions, and styling. Integrates with Claude Code, Cursor, Cline, Windsurf, and other MCP-compatible clients through standard stdio transport configuration.
About mcp-mermaid-validator
rtuin/mcp-mermaid-validator
A Model Context Protocol server that validates and renders Mermaid diagrams.
Implements a `validateMermaid` tool that pipes diagram syntax to the Mermaid CLI via child processes, returning validation results and base64-encoded PNG renders. Built as a TypeScript Node.js service exposing tools through the MCP SDK, it integrates with MCP-compatible clients like Cursor and uses zod for schema validation. The architecture isolates rendering in separate processes, captures detailed error output, and handles cross-platform stdin/stdout portability (Linux/macOS/WSL/Windows).
Related comparisons
Scores updated daily from GitHub, PyPI, and npm data. How scores work