mermaid-mcp-app

Mermaid MCP App

English | 繁體中文

一款 MCP App，可在交互式查看器中渲染 Mermaid 图表，并提供平移、缩放和内置源代码编辑器。直接在分屏编辑器中修改图表，并将更新后的源代码发回给大模型，继续讨论你的修改。适用于 Claude Desktop、VS Code 以及任何兼容 MCP-App 的宿主。

使用方法

配置完成后，让大模型绘制图表：

"Draw a flowchart showing user authentication flow"

"Create a sequence diagram for an API request lifecycle"

"Render this mermaid diagram: `graph TD; A-->B; B-->C`"

你也可以明确指定主题：

“绘制一个浅色主题的类图”

功能

与 AI 交互

直接在分屏编辑器中修改图表源代码，然后发回给大模型，继续讨论你的修改。

• 发送给 AI — 将编辑后的图表源代码发回给大模型，触发回复
• 自动同步上下文 — 输入时会自动更新大模型上下文（采用防抖处理）；大模型在收到下一条消息时始终能看到最新源代码

图表类型（支持 13 种）

流程图

flowchart — 通用有向图。支持自上而下和从左到右的布局、子图以及各种节点形状。

时序图

sequenceDiagram — 展示参与者随时间发生的交互，包括消息、循环和替代流程。

类图

classDiagram — 面向对象的类结构，包含属性、方法和关系（继承、组合等）。

状态图

stateDiagram-v2 — 有限状态机，包含状态转换、复合状态和并发。

ER 图

erDiagram — 用于数据建模的实体关系图，带有基数标注。

甘特图

gantt — 项目时间线，包含任务、里程碑、依赖关系和关键路径。

饼图

pie — 将比例数据呈现为饼图扇区，并标注百分比。

Git 图

gitGraph — 可视化 Git 分支和提交历史，展示合并与摘樱桃操作流程。

思维导图

mindmap — 从中心根节点发散的层级化想法树。

时间线

timeline — 按时间段分组的编年事件。

用户旅程图

journey — 按满意度对不同章节和参与者的用户体验流程进行评分。

需求图

requirementDiagram — 展示系统需求的类型、风险和验证方法，并将其关联到设计元素。

四象限图表

quadrantChart — 用于优先级排序和定位分析的四象限散点图。

界面

• 平移和缩放 — 拖动鼠标可平移，滚动滚轮可缩放，触摸屏上可用双指缩放
• 适应容器 — 渲染时自动调整图表以适应容器；重置按钮可恢复适应状态
• 复制 SVG — 将渲染后的 SVG 复制到剪贴板
• 分屏源代码编辑器 — 始终可见的编辑器面板，支持实时重新渲染（防抖时间为 400ms）
• 可最小化的编辑器 — 折叠为紧凑的底部栏；单击即可展开
• 垂直／水平布局切换 — 源代码位于下方（垂直）或右侧（水平）；最小化状态始终贴靠底部
• 主题支持 — dark（根据系统偏好自动检测）和 light

安装

Claude Desktop — 扩展（推荐）

从 GitHub Releases 下载最新的 .mcpb，然后双击安装。无需使用终端或进行配置。

Claude Desktop — 手动配置

添加到 ~/Library/Application Support/Claude/claude_desktop_config.json：

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

VS Code

添加到 .vscode/mcp.json 或用户设置中：

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

开发

# Install dependencies
npm install

# Build (view + server)
npm run build

# Watch mode (view only)
npm run dev

# Start server
npm start