Draw.io MCP Server

一个用于与Draw.io（Diagrams.net）进行交互的MCP（Model Context Protocol）服务器，使AI模型能够创建和管理各种类型的图表。

🚀 项目状态

✅ 已完成并可用 - 项目已实现核心功能，可以立即使用！

• ✅ MCP服务器核心功能完整实现
• ✅ 10个Draw.io工具已注册并可用
• ✅ 完整的测试框架和测试用例
• ✅ TypeScript类型安全支持
• ✅ 详细的文档和使用指南

🛠️ 快速开始

环境要求

• Node.js >= 18.0.0
• npm >= 9.0.0

安装和运行

# 1. 克隆项目
git clone <repository-url>
cd drawio-mcp

# 2. 安装依赖
npm install

# 3. 构建项目
npm run build

# 4. 启动服务器
npm start

成功启动后，您将看到：

╔══════════════════════════════════════════════════════════════╗
║                Draw.io MCP Server v1.0.0                    ║
╠══════════════════════════════════════════════════════════════╣
║  ✅ MCP Server started successfully                          ║
║  ✅ 10 tools registered and ready                           ║
║  ✅ Ready to accept MCP protocol requests                    ║
╚══════════════════════════════════════════════════════════════╝

🔧 MCP客户端配置

Claude Desktop

将以下配置添加到Claude Desktop配置文件中：

{
  "mcpServers": {
    "drawio-mcp": {
      "command": "node",
      "args": ["/path/to/drawio-mcp/dist/index.js"],
      "transportType": "stdio"
    }
  }
}

配置文件位置：

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

📋 可用工具

服务器提供以下26个MCP工具，涵盖图表创建、编辑、管理的完整功能：

🎨 图表创建工具 (5个)

• create_diagram - 创建通用图表（流程图、UML图、网络图等）
• create_flowchart - 创建流程图
• create_org_chart - 创建组织架构图
• create_mindmap - 创建思维导图
• create_timeline - 创建时间线图表

✏️ 图表编辑工具 (5个)

• add_element - 向图表添加元素
• connect_elements - 连接两个图表元素
• delete_element - 删除图表中的元素或连接
• update_element - 更新现有元素的属性
• copy_paste - 复制和粘贴图表元素

📁 文件管理工具 (4个)

• save_diagram - 保存图表到文件
• load_diagram - 从文件加载图表
• batch_import - 批量导入图表文件
• version_management - 图表版本管理

📤 导出工具 (1个)

• export_diagram - 导出图表为PNG/SVG/PDF格式

🎭 样式和主题工具 (3个)

• apply_theme - 应用预定义主题到图表
• update_style - 更新图表、元素或连接的样式
• manage_colors - 管理图表的颜色方案和调色板

🔍 查询工具 (4个)

• get_diagram_info - 获取图表基本信息
• list_diagrams - 列出所有图表文件
• search_elements - 在图表中搜索元素
• get_statistics - 获取图表统计信息

🚀 高级功能工具 (4个)

• create_template - 创建或管理图表模板
• batch_operations - 批量操作图表元素
• layer_management - 管理图表的图层和分组
• auto_layout - 自动布局图表元素

💡 使用示例

创建流程图

{
  "title": "用户登录流程",
  "steps": [
    {
      "id": "start",
      "text": "开始",
      "type": "start",
      "next": ["input"]
    },
    {
      "id": "input",
      "text": "输入用户名密码",
      "type": "process",
      "next": ["validate"]
    },
    {
      "id": "validate",
      "text": "验证凭据",
      "type": "decision",
      "next": ["success", "error"]
    },
    {
      "id": "success",
      "text": "登录成功",
      "type": "end"
    },
    {
      "id": "error",
      "text": "登录失败",
      "type": "end"
    }
  ],
  "layout": "vertical"
}

创建组织架构图

{
  "title": "公司组织架构",
  "root": {
    "id": "ceo",
    "name": "张三",
    "title": "CEO",
    "children": [
      {
        "id": "cto",
        "name": "李四",
        "title": "CTO",
        "department": "技术部"
      },
      {
        "id": "cfo",
        "name": "王五",
        "title": "CFO",
        "department": "财务部"
      }
    ]
  }
}

🏗️ 项目结构

drawio-mcp/
├── config/                 # 配置文件
├── design/                 # 设计文档
├── docs/                   # 项目文档
│   ├── quick-start.md      # 快速开始指南
│   ├── testing-guide.md    # 测试指南
│   └── implementation-comparison.md # 实现差异分析
├── examples/               # 示例代码
├── src/                    # 源代码
│   ├── server/            # MCP服务器核心
│   ├── tools/             # MCP工具实现
│   ├── types/             # TypeScript类型定义
│   ├── utils/             # 工具函数
│   ├── integration/       # 集成测试
│   ├── performance/       # 性能测试
│   └── test-utils/        # 测试工具
├── package.json
└── README.md

🧪 开发和测试

开发模式

npm run dev

运行测试

# 运行所有测试
npm test

# 运行单元测试
npm run test:unit

# 运行集成测试
npm run test:integration

# 运行性能测试
npm run test:performance

# 生成覆盖率报告
npm run test:coverage

代码质量

# 代码检查
npm run lint

# 自动修复
npm run lint:fix

# 代码格式化
npm run format

📖 文档

• 快速开始指南 - 快速设置和使用
• 测试指南 - 测试框架和最佳实践
• 实现差异分析 - 与其他实现的对比

🔍 与 drawio-mcp-server 的差异

本项目 (drawio-mcp) 与 drawio-mcp-server 的主要差异：

| 特性 | drawio-mcp-server | drawio-mcp | |------|-------------------|-------------------| | 实现状态 | 完成，8个工具 | 完成，10个工具 | | 架构设计 | WebSocket桥接 | 标准MCP协议 | | 工具数量 | 8个基础工具 | 10个全功能工具 | | 测试覆盖 | 完整单元测试 | 完整测试套件 | | 文档完善度 | 实用导向 | 设计导向 | | 类型安全 | 基础类型 | 完整类型系统 |

详细对比请参考 实现差异分析。

🤝 贡献

欢迎贡献代码！请遵循以下步骤：

1. Fork 项目
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🆘 支持

如果您遇到问题或需要帮助：

1. 查看 快速开始指南
2. 查看 测试指南
3. 搜索现有的 Issues
4. 创建新的 Issue 描述您的问题

⭐ 如果这个项目对您有帮助，请给它一个星标！