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

概述

该文档详细介绍了如何使用 Mermaid MCP 服务器来生成和管理各种图表，包括功能、工作原理、构建指令、使用方法、API 信息等。

功能

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

工作原理

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

构建指令

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": "错误信息"
}

环境变量

示例

基本流程图

{
  "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  # 依赖管理文件

安装说明

1. 克隆仓库：

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

2. 安装依赖：

npm install

3. 启动服务：

npm run dev

许可证

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