金大哥 - Mermaid Diagram Generator MCP 详情

article

README

🚀 海妖（Mermaid）模型上下文协议服务器

本项目的海妖（Mermaid）模型上下文协议服务器，可用于生成和管理各类图表。它支持多种图表类型、主题设置和自定义背景颜色，还提供命令行工具和编程接口，方便用户交互与输出图表。

🚀 快速开始

按照以下步骤安装并启动海妖（Mermaid）模型上下文协议服务器：

克隆仓库：

git clone https://github.com/yourusername/mermaid-mcp.git
cd mermaid-mcp

安装依赖：

npm install

启动服务：

npm run dev

✨ 主要特性

多图表类型支持：支持多种图表类型，如流程图、序列图、类图。
主题设置丰富：可设置不同主题（默认、forest、dark）。
背景颜色自定义：支持自定义背景颜色。
交互方式多样：提供命令行工具和编程接口进行交互。
输出灵活：支持将图表保存为文件或直接输出。

📦 安装指南

npm run dev # 开发模式启动服务器
npm run build # 构建生产环境

💻 使用示例

基础用法

{
  "code": "graph LR\nA --> B\nB --> C"
}

设置主题和背景颜色

{
  "code": "sequenceDiagram\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!",
  "theme": "forest",
  "backgroundColor": "#F0F0F0"
}

保存到指定路径

{
  "code": "classDiagram\n    Class01 <|-- AveryLongClass\n    Class03 *-- Class04\n    Class05 o-- Class06",
  "theme": "dark",
  "name": "类图示例",
  "folder": "/var/www/diagrams"
}

📚 详细文档

API

请求格式

HTTP POST 请求，Body 格式为 JSON：

{
  "code": string,
  "theme": string,
  "backgroundColor": string,
  "name": string,
  "folder": string
}

响应格式

成功时返回：

{
  "status": "success",
  "data": {
    "url": "http://example.com/diagram.png"
  }
}

失败时返回：

{
  "status": "error",
  "message": "错误信息"
}

环境变量

| 属性 | 详情 | |------|------| | 变量名 | 说明 | | NODE_ENV | 环境模式，可选值：development、production，默认 development。 | | PORT | 服务端口号，默认 3000 | | MERMAID_VERSION | 指定 Mermaid.js 的版本，默认 latest。 |

示例

基本流程图

{
  "code": "graph LR\nA --> B\nB --> C"
}

复杂序列图

{
  "code": "sequenceDiagram\n    Alice->>John: 你好，你怎么样？\n    John-->>Bob: 我很好，谢谢！",
  "theme": "forest",
  "backgroundColor": "#E6E6E6"
}

类图示例

{
  "code": "classDiagram\n    Class01 <|-- AveryLongClass\n    Class03 *-- Class04\n    Class05 o-- Class06",
  "theme": "dark",
  "name": "类图示例",
  "folder": "/var/www/diagrams"
}

常见问题

Q: 是否支持直接在客户端渲染 Mermaid？

答：目前不支持，必须通过服务器进行解析和生成。

Q: 如何处理大尺寸图表？

答：可以通过调整 Mermaid.js 的配置参数来优化渲染质量，或者分块加载。

项目结构

mermaid-mcp/
├── src/         # 源代码目录
│   ├── index.ts     # 入口文件
│   └── types.ts    # 类型定义
├── public/       # 静态资源目录
└── package.json  # 依赖管理文件

🔧 技术细节

Mermaid MCP 服务器基于 Puppeteer 和 Mermaid.js 实现。通过解析用户提供的 JSON 请求，生成对应的 Mermaid 图表，并使用 Puppeteer 截取生成的 SVG 图像，最后将其转换为 PNG 格式返回给客户端。

📄 许可证

本项目采用 MIT 协议，具体条款请参考 LICENSE 文件。

Mermaid Diagram Generator