Mermaid MCP 应用

英文 | 繁體中文

一款 MCP 应用，可在交互式查看器中渲染 Mermaid 图表，支持平移、缩放以及内置源代码编辑器。直接在分屏视图中编辑图表，并将更新后的源代码发送回 LLM，以便在对话中继续修改。适用于 Claude Desktop、VS Code 以及任何兼容 MCP 应用的主机。

使用方法

配置完成后，即可让 LLM 绘制图表：

"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`"

您也可以显式指定主题：

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

Related MCP server: Excalidraw MCP App Server

功能特性

与 AI 交互

直接在分屏视图中编辑图表源代码，然后将其发送回 LLM，以便在对话中继续修改。

• 发送到 AI — 将编辑后的图表源代码发送回 LLM，触发响应

• 自动上下文同步 — 输入时（防抖）自动更新 LLM 上下文，LLM 始终能在下一条消息中看到您最新的图表源代码

图表类型（支持 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