⚙

Mermaid图表生成服务

一个将Mermaid图表代码转换为PNG或SVG格式图像的服务，支持多种主题和自定义背景颜色，适用于AI助手和其他需要可视化图表的应用场景。

作者 By peng-shawn
本地部署 图表生成 Mermaid转换
GitHub

Mermaid MCP服务器

一种模型上下文协议（MCP）服务器，将Mermaid图转换为PNG图像或SVG文件。该服务器允许AI助手和其他应用程序使用Mermaid markdown语法从文本描述中生成可视化图表。

特性

  • 将Mermaid图代码转换为PNG图像或SVG文件
  • 支持多种图表主题（默认、森林、黑暗、中性）
  • 可定制的背景颜色
  • 使用Puppeteer进行高质量的无头浏览器渲染
  • 实施MCP协议，实现与AI助手的无缝集成
  • 灵活的输出选项：直接返回图像/SVG或保存到磁盘
  • 带有详细错误消息的错误处理

运作原理

服务器使用Puppeteer启动一个无头浏览器，将Mermaid图渲染为SVG，并可选择捕获渲染图的屏幕截图。该过程包括：

  1. 启动无头浏览器实例
  2. 使用Mermaid代码创建HTML模板
  3. 正在加载Mermaid.js库
  4. 将图表渲染为SVG
  5. 直接保存SVG或将屏幕截图作为PNG
  6. 直接返回图像/SVG或将其保存到磁盘

构建

BASH``` 1npx tsc


## 用法


### 与Claude桌面一起使用


JSON```
1
2
3
4
5
6
7
8{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "@peng-shawn/mermaid-mcp-server"]
    }
  }
}

与光标和鼠标线一起使用

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


您可以在下面找到美人鱼图列表 `./diagrams`，它们是使用Cursor代理创建的，并带有提示：“生成美人鱼图并将其保存在单独的图表文件夹中，解释renderMermaidPng的工作原理”


### 与检查员一起运行


使用检查器运行服务器进行测试和调试：


BASH```
1npx @modelcontextprotocol/inspector node dist/index.js

服务器将启动并在stdio上监听MCP协议消息。

了解有关检查器的更多信息 这里.

通过Smithery安装

通过以下方式自动安装克劳德桌面版美人鱼图生成器 史密瑟里:

BASH``` 1npx -y @smithery/cli install @peng-shawn/mermaid-mcp-server —client claude


### Docker和Smithery环境


在Docker容器中运行时（包括通过Smithery），您可能需要处理Chrome依赖关系：


1. 默认情况下，服务器现在尝试使用Puppeteer的捆绑浏览器
2. 如果您遇到与浏览器相关的错误，您有两个选择：


**选项1：在Docker镜像构建过程中：**


- 集 `PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true` 安装Puppeter时
- 在Docker容器中安装Chrome/Chromium
- 集 `PUPPETEER_EXECUTABLE_PATH` 在运行时指向Chrome安装


**选项2：使用Puppeteer的捆绑Chrome：**


- 确保你的Docker容器对Chrome有必要的依赖
- 无需设置 `PUPPETEER_SKIP_CHROMIUM_DOWNLOAD`
- 代码将自动使用捆绑的浏览器


对于Smithery用户来说，最新版本应该无需额外配置即可工作。


## API


服务器公开了一个工具：


- `generate`：将Mermaid图代码转换为PNG图像或SVG文件

- 参数：

- `code`：要渲染的美人鱼图代码
- `theme`：（可选）图表的主题。选项：“默认”、“森林”、“黑暗”、“中性”
- `backgroundColor`：（可选）图表的背景颜色，例如“白色”、“透明”、“#F0F0F0”
- `outputFormat`：（可选）图表的输出格式。选项：“png”、“svg”（默认为“png”）
- `name`：生成文件的名称（当CONTENT_IMAGE_SUPPORTED=false时需要）
- `folder`：保存图像/SVG的绝对路径（当CONTENT_image_SUPPORTED=false时需要）


的行为 `generate` 工具取决于 `CONTENT_IMAGE_SUPPORTED` 环境变量：


- 当 `CONTENT_IMAGE_SUPPORTED=true` （默认）：该工具直接在响应中返回图像/SVG
- 当 `CONTENT_IMAGE_SUPPORTED=false`：该工具将图像/SVG保存到指定文件夹并返回文件路径


## 环境变量


- `CONTENT_IMAGE_SUPPORTED`：控制图像是直接在响应中返回还是保存到磁盘

- `true` （默认）：图像直接在响应中返回
- `false`：图像保存到磁盘，需要 `name` 和 `folder` 参数


## 例子


### 基本用法


JAVASCRIPT```
1
2
3
4// Generate a flowchart with default settings
{
  "code": "flowchart TD\n    A[Start] --> B{Is it?}\n    B -->|Yes| C[OK]\n    B -->|No| D[End]"
}

带有主题和背景颜色

JAVASCRIPT``` 1 2 3 4 5 6// Generate a sequence diagram with forest theme and light gray background { “code”: “sequenceDiagram\n Alice->>John: Hello John, how are you?\n John—>>Alice: Great!”, “theme”: “forest”, “backgroundColor”: “#F0F0F0” }


### 保存到磁盘（当CONTENT_IMAGE_SUPPORTED=false时）


JAVASCRIPT```
1
2
3
4
5
6
7// Generate a class diagram and save it to disk as PNG
{
  "code": "classDiagram\n    Class01 <|-- AveryLongClass\n    Class03 *-- Class04\n    Class05 o-- Class06",
  "theme": "dark",
  "name": "class_diagram",
  "folder": "/path/to/diagrams"
}

生成SVG输出

JAVASCRIPT``` 1 2 3 4 5 6 7// Generate a state diagram as SVG { “code”: “stateDiagram-v2\n [] —> Still\n Still —> []\n Still —> Moving\n Moving —> Still\n Moving —> Crash\n Crash —> [*]”, “outputFormat”: “svg”, “name”: “state_diagram”, “folder”: “/path/to/diagrams” }


## 常见问题解答


### 克劳德桌面不是已经通过画布支持美人鱼了吗？


是的，但它不支持 `theme` 和 `backgroundColor` 选项。此外，拥有专用服务器可以更容易地使用不同的MCP客户端创建美人鱼图。


### 为什么在使用Cursor时需要指定CONTENT_IMAGE_SUPPORTED=false？


Cursor尚不支持响应中的内联图像。


## 出版


该项目使用GitHub Actions将发布过程自动化到npm。


### 方法1：使用发布脚本（推荐）


1. 确保所有更改都已提交并推送
2. 使用特定版本号或语义版本增量运行发布脚本：


BASH```
1
2
3
4
5
6# Using a specific version number
npm run release 0.1.4
# Using semantic version increments
npm run release patch  # Increments the patch version (e.g., 0.1.3 → 0.1.4)
npm run release minor  # Increments the minor version (e.g., 0.1.3 → 0.2.0)
npm run release major  # Increments the major version (e.g., 0.1.3 → 1.0.0)
  1. 脚本将：
  • 验证版本格式或语义增量
  • 检查你是否在主分行
  • 检测并警告文件之间的版本不匹配
  • 一致更新所有版本引用（package.json、package-lock.json和index.ts）
  • 创建一个包含所有版本更改的单一提交
  • 创建并推送一个git标签
  • GitHub工作流将自动构建并发布到npm

方法2：手动流程

  1. 更新代码并提交更改
  2. 创建并推送一个带有版本号的新标签：

BASH``` 1 2git tag v0.1.4 # Use the appropriate version number git push origin v0.1.4

3. GitHub工作流将自动：

- 构建项目
- 使用标签中的版本发布到npm


注意：您需要设置 `NPM_TOKEN` GitHub存储库设置中的秘密。为此，请执行以下操作：


1. 生成具有发布权限的npm访问令牌
2. 转到您的GitHub存储库→ 设置→ 秘密和变量→ 行动
3. 创建一个名为的新存储库密钥 `NPM_TOKEN` 以你的npm令牌为值


## 徽章


[![](https://smithery.ai/badge/@peng-shawn/mermaid-mcp-server)](https://smithery.ai/server/@peng-shawn/mermaid-mcp-server)


[![mermaid-mcp-server MCP server](https://gips3.baidu.com/it/u=2983930764,2029245168&fm=3081&app=3081&f=PNG?w=760&h=400)](https://glama.ai/mcp/servers/lzjlbitkzr)
## 许可证


麻省理工学院