veelenga/claude-mermaid

Overview

This tool is an MCP server that allows AI assistants to preview Mermaid diagrams with live reload. It serves Mermaid diagram source and renders them for real-time visualization during chat sessions.

Best for

Best for
Developers who want real-time Mermaid diagram previews inside an AI assistant

Use cases

• Viewing Mermaid diagrams in AI chat sessions
• Iterating on diagram designs with live updates
• Integrating diagram previews into AI-powered coding workflows

How to use

Install

npm install -g claude-mermaid

Tools exposed

• claude-mermaid

Tested with

Claude Code, Cursor, Windsurf, Cline, VS Code, Codex, Gemini CLI

Example client config

{\n  "mcpServers": {\n    "mermaid": {\n      "command": "claude-mermaid"\n    }\n  }\n}

Notes

This tool is an MCP server that allows AI assistants to preview Mermaid diagrams with live reload. It serves Mermaid diagram source and renders them for real-time visualization during chat sessions.

154 stars on GitHub. Last updated 2026-05-28. Licensed MIT.

Use cases

• Viewing Mermaid diagrams in AI chat sessions
• Iterating on diagram designs with live updates
• Integrating diagram previews into AI-powered coding workflows

Pros

• Live reload updates diagrams instantly as code changes
• Works with Mermaid’s standard syntax without extra configuration
• Lightweight TypeScript implementation easy to extend

Cons

• Requires an MCP-compatible client like Claude Desktop
• Only supports Mermaid diagram format
• Limited to diagram preview; no editing or export features

Indexed from awesome-mcp-servers-punkpeye and enriched against its public facts.