mcp-server-diagramai

mcp-server-diagramai

用于集成 DiagramAI 的 MCP 服务，使 AI Agent 能够实时创建、读取、编辑和删除图表。

功能

资源

• 提供图表列表和项目结构
• 实时访问图表状态
• 按项目组织

工具

• create_diagram：创建包含指定内容的新图表
• get_diagram：按 ID 获取图表
• update_diagram：修改现有图表
• delete_diagram：删除图表
• add_node：向图表添加节点
• add_edge：添加节点之间的连接
• list_diagrams：获取所有可访问的图表
• get_diagram_status：检查图表状态和元数据

安装

从 npm 安装（推荐）

npm install -g mcp-server-diagramai

从源代码安装

git clone https://github.com/PadsterH2012/mcp-server-diagramai.git
cd mcp-server-diagramai
npm install
npm run build

与 Claude Desktop 配合使用

配置文件

Claude Desktop 配置文件路径：

• MacOS：~/Library/Application Support/Claude/claude_desktop_config.json
• Windows：%APPDATA%\Claude\claude_desktop_config.json

已发布软件包的配置

{
  "mcpServers": {
    "diagramai": {
      "command": "npx",
      "args": [
        "mcp-server-diagramai",
        "--api-url", "${DIAGRAMAI_API_URL}",
        "--api-key", "${DIAGRAMAI_API_KEY}"
      ]
    }
  }
}

开发配置

{
  "mcpServers": {
    "diagramai": {
      "command": "/PATH/TO/node",
      "args": [
        "/PATH/TO/mcp-server-diagramai/dist/index.js"
      ],
      "env": {
        "DIAGRAMAI_API_URL": "http://localhost:3000",
        "DIAGRAMAI_API_KEY": "your-api-key-here"
      }
    }
  }
}

环境变量

创建 .env 文件或设置环境变量：

# DiagramAI API Configuration
DIAGRAMAI_API_URL=http://localhost:3000
DIAGRAMAI_API_KEY=your-api-key-here

# Optional: WebSocket URL (if different from API URL)
DIAGRAMAI_WS_URL=ws://localhost:3000

# Optional: Request timeout (milliseconds)
REQUEST_TIMEOUT=30000

# Optional: Enable debug logging
DEBUG=false

API 密钥设置

1. 访问 DiagramAI 设置：前往 DiagramAI 实例的设置
2. 生成 API 密钥：创建具有适当权限的新 API 密钥
3. 配置 MCP：将 API 密钥添加到 Claude Desktop 配置中

所需权限

• diagrams:create - 创建新图表
• diagrams:read - 读取图表内容
• diagrams:update - 修改图表
• diagrams:delete - 删除图表
• projects:read - 访问项目信息

可用工具

图表管理

// Create a new diagram
create_diagram({
  title: "My Flowchart",
  type: "reactflow", // or "mermaid"
  content: {...}, // Diagram content
  projectId?: "project-uuid"
})

// Get diagram by ID
get_diagram({
  diagramId: "diagram-uuid"
})

// Update existing diagram
update_diagram({
  diagramId: "diagram-uuid",
  title?: "New Title",
  content?: {...}
})

// Delete diagram
delete_diagram({
  diagramId: "diagram-uuid"
})

// List all diagrams
list_diagrams({
  projectId?: "project-uuid",
  limit?: 10
})

节点和边操作

// Add node to diagram
add_node({
  diagramId: "diagram-uuid",
  node: {
    id: "node-1",
    type: "process",
    position: { x: 100, y: 100 },
    data: { label: "Process Step" }
  }
})

// Add edge between nodes
add_edge({
  diagramId: "diagram-uuid",
  edge: {
    id: "edge-1",
    source: "node-1",
    target: "node-2"
  }
})

开发

构建

npm run build

在开发模式下运行

npm run dev

测试

npm test

故障排除

常见问题

连接失败

• 确认 DiagramAI 正在运行且可访问
• 检查 API URL 和端口配置
• 确保 API 密钥有效且具有所需权限

身份验证错误

• 检查 API 密钥格式（应以 da_ 开头）
• 在 DiagramAI 设置中检查 API 密钥权限
• 确认 API 密钥未过期

工具执行错误

• 检查图表 ID 格式（应为有效的 UUID）
• 确认用户有权访问指定图表
• 检查与 DiagramAI 实例的网络连接

调试模式

在环境变量中设置 DEBUG=true 以启用调试日志。

许可证

本项目采用 MIT 许可证，详情请参阅 LICENSE 文件。

贡献

1. Fork 此代码仓库
2. 创建功能分支（git checkout -b feature/amazing-feature）
3. 提交更改（git commit -m 'Add some amazing feature'）
4. 推送到分支（git push origin feature/amazing-feature）
5. 发起 Pull Request

支持

• GitHub 问题
• DiagramAI 文档
• Model Context Protocol