mermaid-live-mcp - From prompt to diagram in seconds

Created By

iishyfishyy6 months ago

An MCP server that generates live Mermaid diagrams from any AI assistant. Claude, Cursor, and more. https://iishyfishyy.github.io/mermaid-live-mcp/

# mermaid

# diagrams

Overview Content Tools Comments

Overview

mermaid-live-mcp

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

mermaid-live-mcp demo

Install

Claude Desktop

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

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

Cursor

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

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

Claude Code

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

Windsurf

Add to ~/.codeium/windsurf/mcp_config.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:

Parse the Mermaid syntax
Open a browser tab with a live preview
Render the diagram as SVG in real-time via WebSocket
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

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

Project Info

Created At

6 months ago

Updated At

6 months ago

Author Name

iishyfishyy

Star

Language

License

Recommend Servers

View All

ContextBridge

@tijuthomas5

ContextBridge (CB) is a local-first retrieval layer that sits between your codebase and your AI coding agent. Instead of pasting raw source files into context or letting the AI guess which files matter, CB indexes your codebase's real structure (via Graphify) and returns a compact, ranked result — owner file, related files, key symbols, and dependency chains — grounded in your actual code. A typical response is ~4–8 KB instead of the 100+ KB of raw source an AI would otherwise need to read to answer the same question — roughly a 96% cut in input tokens sent to your cloud AI, with zero hallucinated file paths or method names.

12 days ago

Portugal Payments Mcp

@junter1989k-ai

11 days ago

mcp-server-flomo MCP Server

@chatmcp

Write notes to Flomo

JavaScript

a year ago

Aiimagemultistyle

@codecraftm

A Model Context Protocol (MCP) server for image generation and manipulation using fal.ai's Stable Diffusion model.

a year ago

Github

@modelcontextprotocol

Repository management, file operations, and GitHub API integration

a year ago

Austria Payments Mcp

@junter1989k-ai

11 days ago

Framelink Figma MCP Server

@GLips

MCP server to provide Figma layout information to AI coding agents like Cursor

TypeScript

a year ago

Howtocook Mcp

@worryzyy

基于Anduin2017 / HowToCook （程序员在家做饭指南）的mcp server，帮你推荐菜谱、规划膳食，解决“今天吃什么“的世纪难题； Based on Anduin2017/HowToCook (Programmer's Guide to Cooking at Home), MCP Server helps you recommend recipes, plan meals, and solve the century old problem of "what to eat today"

a year ago

Slovakia Payments Mcp

@junter1989k-ai

11 days ago

Baidu Map

@baidu-maps

百度地图核心API现已全面兼容MCP协议，是国内首家兼容MCP协议的地图服务商。

a year ago

11 days ago

11 days ago

Model Context Protocol server that integrates AgentQL's data extraction capabilities.

JavaScript

a year ago

Pakistan Payments Mcp

@junter1989k-ai

11 days ago

Belgium Payments Mcp

@junter1989k-ai

12 days ago

South Africa Payments Mcp

@junter1989k-ai

12 days ago

Aws Kb Retrieval Server

@modelcontextprotocol

An MCP server implementation for retrieving information from the AWS Knowledge Base using the Bedrock Agent Runtime.

a year ago

11 days ago

Official MiniMax Model Context Protocol (MCP) server that enables interaction with powerful Text to Speech, image generation and video generation APIs.

Python

a year ago

MCP Advisor

@istarwyh

MCP Advisor & Installation - Use the right MCP server for your needs

TypeScript

a year ago

Playwright Mcp

@microsoft

Playwright MCP server

TypeScript

a year ago

Ghana Payments Mcp

@junter1989k-ai

12 days ago

Bangladesh Payments Mcp

@junter1989k-ai

11 days ago

Framesail AI

@framesail

Official remote MCP server for Framesail AI. Create long-form (faceless YouTube) videos end to end from any MCP client: script, locked character references, storyboard, voiceover, and final video editing — with characters and style held consistent across every shot. Making long-form AI video today means 8+ tabs stitched by hand — an LLM for the script, a voice model, an image model, a video model — with characters drifting between tools and style resetting at every export. Framesail replaces the patchwork: the whole pipeline runs in one place and manages your video's context end to end. Six stages: Style (paste images, videos, or YouTube links and Framesail reverse-engineers the look, voice, and direction), Script (write it yourself or generate it in your narrative style), Reference images (auto-generated for every character, place, and prop), Voiceover (one narrator or many characters, with word-level timing), Storyboard (planned scene by scene), and Editor (captions, music, SFX, then export). No black box: you control every prompt, asset, model, and setting.

11 days ago

Bulgaria Payments Mcp

11 days ago

11 days ago

BlenderMCP connects Blender to Claude AI through the Model Context Protocol (MCP), allowing Claude to directly interact with and control Blender. This integration enables prompt assisted 3D modeling, scene creation, and manipulation.

a year ago

Arcgis Portal Mcp

@Asem-D

MCP server for ArcGIS Portal and ArcGIS Online. Lets AI assistants search content, query feature layers, manage features, handle content operations, and administer users and groups. Built on the Model Context Protocol for integration with Claude Desktop, Cursor, VS Code Copilot, and other MCP clients. Disclaimer: This is an independent open-source project. It is not affiliated with, endorsed by, or sponsored by Esri Inc. "ArcGIS" is a registered trademark of Esri.

11 days ago

Israel Payments Mcp

@junter1989k-ai

11 days ago

Slack

@modelcontextprotocol

Channel management and messaging capabilities

a year ago