mermaid-live-mcp - From prompt to diagram in seconds
@iishyfishyy
mermaid-live-mcp - From prompt to diagram in seconds について
An MCP server that generates live Mermaid diagrams from any AI assistant. Claude, Cursor, and more.
基本情報
設定
以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。
{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": [
"-y",
"mermaid-live-mcp"
]
}
}
}ツール
4Generate a diagram from Mermaid syntax and open a live preview in the browser
Replace a diagram's Mermaid syntax and re-render the live preview
List all diagrams generated in the current session
Write a diagram's SVG to disk
概要
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
FAQ from mermaid-live-mcp
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).
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.
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.
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.
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 とエージェント」の他のコンテンツ
Just Prompt - A lightweight MCP server for LLM providers
dislerjust-prompt is an MCP server that provides a unified interface to top LLM providers (OpenAI, Anthropic, Google Gemini, Groq, DeepSeek, and Ollama)
Solon Ai
opensolonJava AI application development framework (supports LLM-tool,skill; RAG; MCP; Agent-ReAct,Team-Agent). Compatible with java8 ~ java25. It can also be embedded in SpringBoot, jFinal, Vert.x, Quarkus, and other frameworks.
Model Context Protocol for Unreal Engine
chongdashuEnable AI assistant clients like Cursor, Windsurf and Claude Desktop to control Unreal Engine through natural language using the Model Context Protocol (MCP).
1Panel
1Panel-dev🔥 1Panel is a modern, open-source VPS control panel — and the only one with native AI agent support. Run Ollama models, deploy OpenClaw agents, and manage your entire server stack from one clean web interface.
MCP Manager for Claude Desktop
zueaisimple web ui to manage mcp (model context protocol) servers in the claude app
コメント