关于 mermaid-live-mcp - From prompt to diagram in seconds
mermaid-live-mcp 是用于生成 Mermaid 图表并提供浏览器实时预览的 MCP 服务。它支持会话内更新图表，并可导出 SVG 或 PNG，适用于 AI 助手工作流。
主要功能
- 01生成 Mermaid 图表
- 02打开浏览器实时预览
- 03实时更新图表
- 04列出会话图表
- 05导出 SVG 或 PNG
适用场景
- 01编写流程图时预览效果
- 02交互式修改时序图
- 03为文档导出图表
- 04检查会话中创建的图表
MCP 相关
它向 MCP 客户端提供生成、更新、列出和导出 Mermaid 图表的工具。生成的图表会在浏览器中实时预览。
配置
本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。
工具
4收录的工具列表 · 更新于 3 周前
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| syntax | string | 是 | Mermaid 图表语法（例如 'graph TD; A-->B;'） |
| title | string | 否 | 浏览器预览标签页的可选标题 |
详细介绍
mermaid-live-mcp
用于生成 Mermaid 图表并实时在浏览器中预览的 MCP 服务。可实时渲染图表，并支持导出 SVG/PNG。
安装
Claude Desktop
添加到你的 Claude Desktop 配置（macOS 上的 ~/Library/Application Support/Claude/claude_desktop_config.json）：
{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": ["-y", "mermaid-live-mcp"]
}
}
}
Cursor
添加到项目根目录下的 .cursor/mcp.json：
{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": ["-y", "mermaid-live-mcp"]
}
}
}
Claude Code
claude mcp add mermaid -- npx -y mermaid-live-mcp
Windsurf
添加到 ~/.codeium/windsurf/mcp_config.json：
{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": ["-y", "mermaid-live-mcp"]
}
}
}
工具
| 工具 | 说明 |
|---|---|
generate_mermaid | 根据 Mermaid 语法生成图表，并在浏览器中打开实时预览 |
update_diagram | 替换图表的 Mermaid 语法并重新渲染实时预览 |
list_diagrams | 列出当前会话中生成的所有图表 |
export_diagram | 将图表的 SVG 写入磁盘 |
工作原理
当你让 AI 助手创建图表时，mermaid-live-mcp 会：
- 解析 Mermaid 语法
- 打开包含实时预览的浏览器标签页
- 通过 WebSocket 实时将图表渲染为 SVG
- 提供用于导出 SVG 和 PNG 的下载按钮
对图表的更新会立即推送到浏览器，无需刷新页面。
支持的图表类型
支持所有 Mermaid 图表类型，包括流程图、时序图、类图、状态图、ER 图、甘特图、饼图、Git 图、思维导图、时间线等。
开发
pnpm install
pnpm build
项目结构
| 软件包 | 说明 |
|---|---|
packages/mcp-server | MCP 服务（以 mermaid-live-mcp 名称发布） |
packages/preview | 通过 WebSocket 提供浏览器实时预览 |
packages/core | 图表解析、布局和 SVG 渲染 |
packages/cli | 命令行界面 |
许可证
MIT
评论
支持 Markdown
一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。