Mermaid Diagram Generator

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

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

🚀 快速开始

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

1. 克隆仓库：

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

2. 安装依赖：

npm install

3. 启动服务：

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

环境变量

示例

基本流程图

{
"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 文件。