广告合作
MCP.so
登录
M

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

@iishyfishyy

代码仓库

基本信息

分类

AI 与智能体

传输方式

stdio

作者

iishyfishyy

提交者

Ishan Mishra

关于 mermaid-live-mcp - From prompt to diagram in seconds MCP Server

An MCP server that generates live Mermaid diagrams from any AI assistant. Claude, Cursor, and more.

#mermaid#diagrams#visualize#live#render#preview

mermaid-live-mcp - From prompt to diagram in seconds MCP Server 配置

使用下面的配置,将此服务器添加到你的 MCP 客户端。

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

mermaid-live-mcp - From prompt to diagram in seconds MCP Server 工具

4

Generate a diagram from Mermaid.js syntax. Renders in live preview browser with SVG/PNG download options. Supports flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, and more.

Replace a diagram's Mermaid syntax and re-render it in the preview.

List all diagrams generated in this session.

Write a diagram's SVG to disk. PNG export is available via the browser download buttons.

概览

What is mermaid-live-mcp?

mermaid-live-mcp is an MCP (Model Context Protocol) server that lets you generate Mermaid diagrams from natural language prompts and preview them live in a browser. It renders diagrams in real-time via WebSocket and supports SVG/PNG export. This tool is intended for developers and AI assistant users who want to quickly create and iterate on diagrams.

How to use mermaid-live-mcp?

Install the server via npx and add it to your MCP client configuration (Claude Desktop, Cursor, Claude Code, or Windsurf). The server exposes four tools: generate_mermaid, update_diagram, list_diagrams, and export_diagram. Use generate_mermaid with your Mermaid syntax to open a live browser preview, then update or export as needed.

Key features of mermaid-live-mcp

  • Live browser preview with real-time WebSocket updates
  • SVG and PNG export via download buttons or tool
  • Supports all Mermaid diagram types
  • No page refresh needed for diagram updates
  • Four dedicated tools for diagram lifecycle

Use cases of mermaid-live-mcp

  • Quickly generate flowcharts from text descriptions
  • Iterate on sequence diagrams during design discussions
  • Export class diagrams as SVG for documentation
  • Build ER diagrams with live preview for database modeling
  • Create and manage multiple Gantt charts in a single session

常见问题

1

What tools does the server provide?

The server provides `generate_mermaid` (create and preview), `update_diagram` (replace syntax and re-render), `list_diagrams` (list session diagrams), and `export_diagram` (save SVG to disk).

2

How do I install mermaid-live-mcp for Claude Desktop?

Add the MCP server configuration to your Claude Desktop config file located at `~/Library/Application Support/Claude/claude_desktop_config.json` on macOS, using the command: `npx -y mermaid-live-mcp`.

3

How does the live preview work?

The server opens a browser tab with the diagram rendered as SVG. Any updates to a diagram are pushed instantly to the browser via a WebSocket connection – no page refresh required.

4

Can I export diagrams as images?

Yes. You can download SVG or PNG from the live preview buttons, or use the `export_diagram` tool to write the SVG directly to disk.

5

What diagram types does mermaid-live-mcp support?

All standard 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.

评论

AI 与智能体 分类下的更多 MCP 服务器

Tuqui — Odoo MCP for Claude & ChatGPT

Tuqui

Tuqui connects your Odoo to Claude and ChatGPT as a remote MCP server. Nothing to install in Odoo: it works with Odoo 16 to 20, Community and Enterprise, on Odoo Online, Odoo.sh or your own server. Ask about sales, stock

PDI Bridge for Claude

jxrlabs

Connect Claude Desktop to your ServiceNow PDI. Query records, inspect Business Rules, review ACLs, and troubleshoot against your live instance.

Gemina

Gemina Tech Ltd.

Extract, search and tag any document — invoices, receipts, contracts, forms, or your own templates. 13 tools, one sign-in (OAuth 2.1) or API key, free FileTag tier, data residency in the EU, US, Israel or Asia.

Brontide

Beeswaxpat

Free mech duel built for AI agents. An agent pilots a mech over MCP with no sign-in and fights the house bot, another agent or a person. Every match lands on a public leaderboard.

strac-mcp-dlp

strac-io

Detect and redact PII, PHI, PCI and secrets — SSNs, credit cards, passports, API keys and cloud credentials — in text and in local files, using the Strac DLP API. Five tools: redact_text, detect_sensitive_data, detect_fi

3
广告合作