AgentIndex icon
AgentIndex
ToolsMCP ServersHOTCategoriesTrendingNewBest ListsCompareGuides
Submit Tool
ToolsMCP ServersHOTCategoriesTrendingNewBest ListsCompareGuides
Home/
Vision / Multimodal/
claude-mermaid
claude-mermaid logo

claude-mermaid

Active·★ 218·MIT·Updated 2026-10-21

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.

claude-mermaid sits in the Vision / Multimodal category, so it is usually better judged by workflow fit, deployment style, and team needs than by isolated features alone. Based on the available metadata, it leans most clearly toward Live Reload: Diagrams auto-refresh in your browser as you edit. A representative use case is Rapidly develop and refine Mermaid diagrams with real-time feedback. The listed license is MIT. GitHub stars are currently 218. Relevant tags include Mermaid, Diagramming.

This write-up is based on the project's README and public repository data. We have not hand-tested the tool.

#Mermaid#Diagramming#Live Reload#AI Assistant#MCP Server#Code Editor Plugin#Visualization
$ Install
$ git clone https://github.com/veelenga/claude-mermaid.git && cd claude-mermaid && npm install && npm run build && npm install -g .
↗ Visit site★ GitHub
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

Why choose it

+Live Reload: Diagrams auto-refresh in your browser as you edit
+Multiple Save Formats: Export to SVG, PNG, or PDF
+Rapidly develop and refine Mermaid diagrams with real-time feedback
+Supports 7 platforms or runtime environments.
03

Trade-offs

!The final decision should still be made through side-by-side comparison with similar tools.
04

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
05

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 .
06

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
07

Alternatives

⚡Top VS:
VSGopeak-godot-mcp★268→VSksail★165→VSoctomind★175→VSComfyUI-Copilot★5.6k→
Gopeak-godot-mcp logo
Gopeak-godot-mcp★ 268
GoPeak — The most comprehensive MCP server for Godot Engine. 95+ tools: scene management, GDScript LSP, DAP debugger, screenshot capture, input injection, ClassDB introspection, CC0 asset library. npx gopeak
VSCompare→
ksail logo
ksail★ 165
Tool for creating, maintaining and operating Kubernetes clusters with ease.
VSCompare→
octomind logo
octomind★ 175
Highly configurable autonomous efficient-first agentic AI framework for CLI
VSCompare→
ComfyUI-Copilot logo
ComfyUI-Copilot★ 5.6k
An AI-powered custom node for ComfyUI designed to enhance workflow automation and provide intelligent assistance
VSCompare→
blenderwright logo
blenderwright★ 175
MCP server for Blender. 191 tools for modelling, materials, rendering and more, driven by Claude, Cursor, Codex, Ollama, llama.cpp, or any MCP client.
VSCompare→
mcp-video logo
mcp-video★ 217
Video editing MCP server for AI agents. 87 FFmpeg and Hyperframes tools, Python client, and CLI. Local, fast, free.
VSCompare→
immich-photo-manager logo
immich-photo-manager★ 58
📸🧹🗺️ MCP server for intelligent photo management with Immich — search, curate geographic albums, clean up libraries, and publish galleries
VSCompare→
mcp-dashboards logo
mcp-dashboards★ 51
Turn your data into interactive dashboards inside any AI client - MCP Apps powered
VSCompare→
See all alternatives →

Comments

Log in to leave a comment

No comments yet. Be the first!

On this page
01Features02Why choose it03Trade-offs04Compatibility05Quick start06Use cases07Alternatives
veelenga /
claude-mermaid
↗

MCP Server to previewing mermaid diagrams

218MIT
Last commit2d ago
StatusActive
CategoryVision / Multimodal
Links
Documentation↗Discussion↗Issues↗Releases↗
Cloud Infrastructure
Ad

Deploy on DigitalOcean

Host your MCP servers, Docker containers, and AI agents with $200 free credit over 60 days.

Claim $200 Free Credit
© 2026 AgentIndex.app|Built by a 10-year iOS Developer.
Best by use caseAboutContactAdvertisePrivacy PolicyTerms of UseQYSGitHubBuy me a coffee ☕

Browse by Category

MCP ServersCode AssistantWorkflow AutomationRAG / Knowledge BaseMulti-AgentBrowser AutomationLLM InfraDev ToolingObservability

Not affiliated with Anthropic, OpenAI or Microsoft.