Draw.io MCP Server

一个用于与Draw.io（Diagrams.net）交互的MCP（模型上下文协议）服务器，使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服务器已成功启动                          ║
║  ✅ 注册了10个工具并准备好                       ║
║  ✅ 准备接受MCP协议请求                        ║
╚══════════════════════════════════════════════════════════════╝

🔧 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. 分叉项目
2. 创建一个功能分支（git checkout -b feature/AmazingFeature）
3. 提交更改（git commit -m 'Add some AmazingFeature'）
4. 推送到分支（git push origin feature/AmazingFeature）
5. 打开拉取请求

📄 许可证

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

🆘 支持

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

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

---

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