MCP Server Diagramai

mcp服务器图

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

](https://badge.fury.io/js/mcp-server-diagramai) 

特性

资源

• 显示图表列表和项目结构
• 实时图表状态访问
• 项目型组织

工具

• create_diagram：创建具有指定内容的新图表
• get_diagram：按ID检索图表
• update_diagram：修改现有图表
• delete_diagram：删除图表
• add_node：将节点添加到图表中
• 添加_边缘：添加节点之间的连接
• list_digrams：获取所有可访问的图表
• get_digram_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
• 视窗: %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. 访问图AI设置：导航到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许可证获得许可-请参阅 许可证 文件以获取详细信息。

贡献

1. 分叉存储库
2. 创建功能分支(git checkout -b feature/amazing-feature)
3. 提交您的更改(git commit -m 'Add some amazing feature')
4. 推到分支(git push origin feature/amazing-feature)
5. 打开拉取请求

支持

• 图表AI文档
• 模型上下文协议