mermaid-live-mcp

12 stars TypeScriptOthers Updated Jun 14, 2026

claudecursordiagramsmcpmcp-servermermaidmodel-context-protocolwindsurf

Documentation

mermaid-live-mcp

MCP server for generating Mermaid diagrams with live browser preview. Renders diagrams in real-time and supports SVG/PNG export.

Install

Claude Desktop

Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json` on macOS):

json

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "mermaid-live-mcp"]
    }
  }
}

Cursor

Add to `.cursor/mcp.json` in your project root:

json

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "mermaid-live-mcp"]
    }
  }
}

Claude Code

bash

claude mcp add mermaid -- npx -y mermaid-live-mcp

Windsurf

Add to `~/.codeium/windsurf/mcp_config.json`:

json

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "mermaid-live-mcp"]
    }
  }
}

Tools

Tool	Description
`generate_mermaid`	Generate a diagram from Mermaid syntax and open a live preview in the browser
`update_diagram`	Replace a diagram's Mermaid syntax and re-render the live preview
`list_diagrams`	List all diagrams generated in the current session
`export_diagram`	Write a diagram's SVG to disk

How it works

When you ask your AI assistant to create a diagram, `mermaid-live-mcp` will:

1. Parse the Mermaid syntax

2. Open a browser tab with a live preview

3. Render the diagram as SVG in real-time via WebSocket

4. Provide download buttons for SVG and PNG export

Updates to a diagram are pushed instantly to the browser — no page refresh needed.

Supported diagram types

All Mermaid diagram types are supported, including flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, git graphs, mindmaps, timelines, and more.

Development

bash

pnpm install
pnpm build

Project structure

Package	Description
`packages/mcp-server`	MCP server (published as `mermaid-live-mcp`)
`packages/preview`	Live browser preview via WebSocket
`packages/core`	Diagram parsing, layout, and SVG rendering
`packages/cli`	Command-line interface

License

MIT

Frequently asked questions

What is mermaid-live-mcp?

mermaid-live-mcp is mermaid-live-mcp

How do I install mermaid-live-mcp?

Open the GitHub repository and follow its README. Most MCP servers are added to your client's MCP config, then called by your agent.

Is mermaid-live-mcp open source?

Yes — it is hosted on GitHub at https://github.com/iishyfishyy/mermaid-live-mcp and has 12 stars.

Related MCP tools

memorix

Open-source cross-agent memory layer for coding agents via MCP. Compatible with Claude Code, Codex, Cursor, Windsurf, Gemini CLI, Antigravity, OpenClaw, Hermes Agent, Oh-my-Pi, Pi, Copilot, Kiro, OpenCode, and Trae.

721 TypeScript

ai-codingclaude-codecopilot+17

Unity-MCP

AI Skills, MCP Tools, and CLI for Unity Engine. Full AI develop and test loop. Use cli for quick setup. Efficient token usage, advanced tools. Any C# method may be turned into a tool by a single line. Works with Claude Code, Gemini, Copilot, Cursor and any other absolutely for free.

4,137 C#

aiai-integrationgame-development+16

jcodemunch-mcp

Cut AI token costs 95%+ on code exploration. The leading MCP server for precise, symbol-level GitHub code retrieval via tree-sitter AST. Works with Claude Code, Cursor & any MCP client. 313B+ tokens saved.

2,651 Python

claudeclaude-codeai-coding+17

mcp

Browser MCP is a Model Context Provider (MCP) server that allows AI applications to control your browser

7,049 TypeScript

browser-automationbrowser-extensionclaude+3

wigolo

The go-to web for your AI coding agent — local-first search, fetch, crawl & research over MCP. No API keys, no cloud, $0/query. Public beta.

4,906 TypeScript

mcpagentai+17

memory-bank-mcp

A Model Context Protocol (MCP) server implementation for remote memory bank management, inspired by Cline Memory Bank. TypeScript-based implementation.

744 TypeScript

antrophicclaudecline+6

Run your own MCP server? See who uses it and what to fix.

Measure it with TrackMCP