Diagram Bridge Mcp

Diagram Bridge MCP 服务

一款功能全面的 MCP 服务，通过三个强大的独立工具弥合大模型与图表创建之间的差距：智能格式选择、格式专属指令生成和专业图表渲染（使用 kroki 服务）。每个工具都可以独立使用，也可以按顺序组合起来，完成从选择合适格式到生成最终图像的完整图表工作流。

支持的格式：Mermaid、PlantUML、C4 Model、D2、GraphViz、BPMN、Structurizr、Excalidraw、Vega-Lite

快速开始

1. 前置条件：

   • Node.js 18.0 或更高版本
   • Docker 和 Docker Compose

2. 安装并构建：

git clone [email protected]:tohachan/diagram-bridge-mcp.git
cd diagram-bridge-mcp
npm install && npm run build

3. 配置端口（可选）：

# Copy and edit environment file to customize ports
cp .env.example .env
# Edit .env to set PORT and KROKI_PORT as needed

# Or set environment variables directly:
export PORT=4000        # MCP Server port (default: 3000)
export KROKI_PORT=9000  # Kroki service port (default: 8000)

4. 启动服务：

# Option 1: Interactive port configuration
./scripts/start-with-ports.sh

# Option 2: Default ports (3000 for MCP, 8000 for Kroki)
docker-compose up --build

# Option 3: Custom ports via environment variables
PORT=4000 KROKI_PORT=9000 docker-compose up --build

5. 添加到 Cursor（或任何 MCP 客户端）：

直接在本地使用（不使用 Docker）：

{
  "mcpServers": {
    "diagram-bridge-mcp": {
      "command": "node",
      "args": ["/path/to/diagram-bridge-mcp/dist/index.js"],
      "enabled": true
    }
  }
}

基于 Docker 的配置（推荐）：

{
  "mcpServers": {
    "diagram-bridge-mcp": {
      "command": "docker",
      "args": [
        "exec", 
        "-i", 
        "diagram-bridge-mcp", 
        "node", 
        "dist/index.js"
      ],
      "enabled": true
    }
  }
}

注意：MCP 协议使用 STDIO 通信。HTTP 端点（:3000/health）仅用于 Docker 监控，不能用于 MCP 客户端连接。

5. 开始使用：此服务提供三个可直接使用的 MCP 工具！

💡 使用示例

下面是一条用于演示完整工作流的简单提示词：

"Choose the best diagram format for visualizing a current project architecture, then generate the diagram code and render it to an image file. Save the result as 'architecture-diagram'."

这条提示词将：

1. 分析你的请求并推荐最佳格式
2. 获取具体指令，指导你使用该格式创建图表
3. 创建并渲染最终图表，并输出为 PNG/SVG 文件

🎨 示例集

想看看它能实现什么？请查看**示例集**

🛠️ 工具概览

help_choose_diagram

用途：根据你的需求智能选择格式

• 使用 AI 驱动的启发式方法分析你的请求
• 提供带置信度评分的推荐
• 在需要时支持格式限制
• 生成结构化提示词，帮助大模型做出最佳决策

示例：“我需要展示数据库关系” → 推荐 Mermaid ER 图格式，并提供详细说明

get_diagram_instructions

用途：生成格式专属的编码指令

• 为任何受支持的图表格式创建定制提示词
• 包含语法指南、最佳实践和常见问题
• 提供可用示例和输出规范
• 确保大模型生成语法正确的图表代码

示例：对于 Mermaid 格式 → 提供详细的 Mermaid 语法指南和示例

render_diagram

用途：将图表代码转换为专业图像

• 通过集成的 Kroki 服务渲染图表
• 支持 PNG 和 SVG 输出格式
• 包含智能缓存，提升性能
• 将文件存储为绝对路径，方便访问

示例：Mermaid 代码 → 高质量 PNG/SVG 图像文件

⚙️ 配置

基本配置

• 默认存储位置：{project-root}/generated-diagrams/
• 默认 Kroki：使用本地 Docker Kroki 服务
• 默认端口：MCP 服务（3000）、Kroki（8000）

端口配置

服务器会根据环境变量自动配置端口：

• 外部端口（PORT）：Docker 容器对外暴露的端口（默认值：3000）
• Kroki 端口（KROKI_PORT）：Kroki 服务的端口（默认值：8000）
• 内部通信：服务使用固定的容器端口进行内部通信

# Interactive configuration (recommended)
./scripts/start-with-ports.sh

# Quick port change
PORT=4000 KROKI_PORT=9000 docker-compose up --build

# Check running services
curl http://localhost:4000/health  # Using your custom PORT

注意：在 Docker 中运行时，服务器会在 /health 和 /info 提供用于健康监控的 HTTP 端点以及服务信息。

如需高级配置，请参阅我们的配置指南。

📚 文档

• 快速入门：端口配置 - 快速端口设置指南
• 安装指南 - 详细的设置说明
• Docker 部署 - 容器部署选项
• API 参考 - 完整的工具和资源文档
• 配置指南 - 环境变量和 MCP 客户端设置
• 开发指南 - 贡献和开发环境设置
• 架构 - 系统架构和设计模式
• 性能与安全 - 性能指标和安全功能
• 故障排除 - 常见问题及解决方案

---

适用于：需要创建图表，但不知道该使用哪种格式或如何专业地渲染图表的大模型。

由以下项目提供支持：Kroki - 通用图表渲染服务

倾心打造 ❤️