claude-mermaid
Active·★ 150·MIT·Updated 2026-05-28
★ Trending★ Vision / Multimodal★ Dev Tooling
MCP Server to previewing mermaid diagrams
Claude Mermaid is an MCP server that renders Mermaid diagrams within Claude Code, offering live reload and a built-in AI skill for expert guidance. It streamlines iterative diagram development by automatically updating previews in the browser as diagrams are refined.
#Mermaid#Diagramming#Live Reload#AI Assistant#MCP Server#Code Editor Plugin#Visualization
01
Features
01Live Reload: Diagrams auto-refresh in your browser as you edit
02Multiple Save Formats: Export to SVG, PNG, or PDF
03Built-in Skill: Includes a Claude skill with best practices and expert guidance for creating diagrams
04Interactive Preview: Pan diagrams by dragging, zoom with browser controls, reset position with one click
05Multiple Previews: Use `preview_id` to work on multiple diagrams simultaneously
02
Compatibility
Claude Code
IDE
Verified via docs
Codex
MCP Client
Verified via docs
Cursor
MCP Client
Verified via docs
VSCode (with Cline Extension)
MCP Client
Verified via docs
Windsurf
MCP Client
Verified via docs
Gemini CLI
MCP Client
Verified via docs
03
Quick start
1
$ git clone https://github.com/veelenga/claude-mermaid.git
2
$ cd claude-mermaid
3
$ npm install
4
$ npm run build
5
$ npm install -g .
04
Use cases
↳Rapidly develop and refine Mermaid diagrams with real-time feedback
↳Integrate Mermaid diagramming directly into Claude Code's workflow
↳Generate and export diagrams in multiple formats (SVG, PNG, PDF) for documentation
↳Utilize AI guidance for best practices in diagram creation
05
Alternatives
ragflow★ 81.5k
RAGFlow is a leading open-source Retrieval-Augmented Generation (RAG) engine that fuses cutting-edge RAG with Agent capabilities to create a superior context layer for LLMs
n8n★ 190.2k
Fair-code workflow automation platform with native AI capabilities. Combine visual building with custom code, self-host or cloud, 400+ integrations.
unity-mcp★ 10.1k
Unity MCP acts as a bridge, allowing AI assistants (like Claude, Cursor) to interact directly with your Unity Editor via a local MCP (Model Context Protocol) Client. Give your LLM tools to manage assets, control scenes, edit scripts, and automate tasks within Unity.
git-mcp★ 8.1k
Put an end to code hallucinations! GitMCP is a free, open-source, remote MCP server for any GitHub project
5ire★ 5.2k
5ire is a cross-platform desktop AI assistant, MCP client. It compatible with major service providers, supports local knowledge base and tools via model context protocol servers .
Related searches
Comments
Log in to leave a comment
- SSasha ClarkApr 26, 2026
Good for developers who use Mermaid for technical diagrams in AI-assisted workflows.
- LLogan NguyenApr 21, 2026
Mermaid diagram preview via MCP lets Claude render and iterate on diagrams.
- OOaklyn ThompsonMar 22, 2026
Works reliably with standard Mermaid diagram syntax.
- CCasey AndersonMar 13, 2026
Preview capability closes the feedback loop between diagram code and visual output.