Mermaid-MCP 服务器

你是否曾经希望AI能够根据文本描述自动生成流程图、时序图、类图等可视化图表？今天要介绍的开源项目Mermaid-MCP服务器，正是为了实现这个目标而设计的。它是一个将Mermaid图表转换为PNG图像的MCP服务器，允许AI助手使用Mermaid的Markdown语法从文本描述生成可视化图表。

项目基本信息

一、项目介绍

Mermaid-MCP服务器是一个让AI能够将Mermaid图表代码转换为PNG图像的MCP工具。它使用Puppeteer进行高质量的无头浏览器渲染，支持多种图表主题和自定义背景颜色。

这个服务器提供了一个核心工具：

• generate：将Mermaid图表代码转换为PNG图像

二、核心优势

多种图表类型

支持Mermaid的所有图表类型：流程图、时序图、类图、状态图、甘特图等。

主题支持

支持默认、森林、暗黑、中性等多种主题。

自定义背景

可自定义背景颜色，满足不同场景需求。

高质量渲染

使用Puppeteer进行高质量的无头浏览器渲染。

灵活输出

支持直接返回图像或保存到磁盘。

三、适用场景

文档图表生成

为技术文档自动生成流程图、架构图。

数据分析可视化

将分析结果用图表形式展示。

代码注释图解

用图表解释复杂的代码逻辑。

AI对话可视化

在AI对话中生成图表解释概念。

四、安装教程

系统要求

安装步骤

第一步：配置Claude Desktop

找到配置文件：

• macOS：~/Library/Application Support/Claude/claude_desktop_config.json
• Windows：%APPDATA%\Claude\claude_desktop_config.json

添加配置：

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "@peng-shawn/mermaid-mcp-server"]
    }
  }
}

第二步：配置Cursor或Cline

由于Cursor目前不支持内联图像，需要设置环境变量：

env CONTENT_IMAGE_SUPPORTED=false npx -y @peng-shawn/mermaid-mcp-server

在MCP配置中：

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "@peng-shawn/mermaid-mcp-server"],
      "env": {
        "CONTENT_IMAGE_SUPPORTED": "false"
      }
    }
  }
}

第三步：通过Smithery安装（可选）

npx -y @smithery/cli install @peng-shawn/mermaid-mcp-server --client claude

第四步：重启客户端

保存配置后，重启Claude Desktop或Cursor。

五、使用示例

示例1：生成流程图

用户指令：“生成一个流程图：开始 -> 判断条件 -> 是则执行操作，否则结束”

AI会调用generate工具：

{
  "code": "flowchart TD\n    A[开始] --> B{是吗?}\n    B -->|是| C[好的]\n    B -->|否| D[结束]"
}

示例2：使用主题和背景色

{
  "code": "sequenceDiagram\n    Alice->>John: 你好John，你好吗?\n    John-->>Alice: 很好!",
  "theme": "forest",
  "backgroundColor": "#F0F0F0"
}

示例3：生成类图并保存到磁盘

当CONTENT_IMAGE_SUPPORTED=false时：

{
  "code": "classDiagram\n    Class01 <|-- AveryLongClass\n    Class03 *-- Class04",
  "theme": "dark",
  "name": "class_diagram",
  "folder": "/path/to/diagrams"
}

示例4：时序图

{
  "code": "sequenceDiagram\n    participant 用户\n    participant 系统\n    用户->>系统: 发送请求\n    系统-->>用户: 返回响应"
}

示例5：甘特图

{
  "code": "gantt\n    title 项目计划\n    section 阶段1\n    任务1 :a1, 2024-01-01, 30d"
}

六、环境变量说明

当CONTENT_IMAGE_SUPPORTED=false时，generate工具需要额外参数：

• name：生成文件的名称
• folder：保存图像的绝对路径

七、常见问题

问题1：Claude Desktop已支持Mermaid但为什么还需要这个？

解决方案：Claude Desktop不支持theme和backgroundColor选项，专用服务器提供更多自定义功能。

问题2：Cursor无法显示图像

解决方案：设置CONTENT_IMAGE_SUPPORTED=false，将图像保存到磁盘。

问题3：Docker中运行时浏览器错误

解决方案：服务器默认使用Puppeteer捆绑的浏览器，确保容器有Chrome依赖项。

问题4：图表渲染不完整

解决方案：检查Mermaid语法是否正确，尝试不同主题。

问题5：背景颜色不生效

解决方案：使用有效的CSS颜色值，如'white'、'transparent'、'#F0F0F0'。

八、总结

Mermaid-MCP服务器是一个让AI能够将Mermaid图表转换为PNG图像的MCP工具，支持多种主题和自定义背景。

这个项目的最大价值在于：

1. 图表生成：将文本转换为可视化图表
2. 多主题支持：默认、森林、暗黑、中性
3. 自定义背景：灵活的颜色配置
4. 高质量渲染：基于Puppeteer
5. MIT许可证：可自由使用

如果你需要让AI根据描述生成专业图表，Mermaid-MCP服务器是一个非常实用的工具。