# 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

### 安装和运行

```bash
# 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配置文件中：

```json
{
  "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` - 自动布局图表元素

## 💡 使用示例

### 创建流程图

```json
{
  "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"
}
```

### 创建组织架构图

```json
{
  "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
```

## 🧪 开发和测试

### 开发模式
```bash
npm run dev
```

### 运行测试
```bash
# 运行所有测试
npm test

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

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

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

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

### 代码质量
```bash
# 代码检查
npm run lint

# 自动修复
npm run lint:fix

# 代码格式化
npm run format
```

## 📖 文档

- [快速开始指南](./docs/quick-start.md) - 快速设置和使用
- [测试指南](./docs/testing-guide.md) - 测试框架和最佳实践
- [实现差异分析](./docs/implementation-comparison.md) - 与其他实现的对比

## 🔍 与 drawio-mcp-server 的差异

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

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

详细对比请参考 [实现差异分析](./docs/implementation-comparison.md)。

## 🤝 贡献

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

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](LICENSE) 文件了解详情。

## 🆘 支持

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

1. 查看 [快速开始指南](./docs/quick-start.md)
2. 查看 [测试指南](./docs/testing-guide.md)
3. 搜索现有的 [Issues](https://github.com/your-username/drawio-mcp/issues)
4. 创建新的 Issue 描述您的问题

---

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