# drawio-mcp

**Repository Path**: guoxiaozhang/drawio-mcp

## Basic Information

- **Project Name**: drawio-mcp
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-24
- **Last Updated**: 2025-08-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎨 Draw.io MCP Server

> 专业的Draw.io图表生成指导服务器，基于MCP协议为AI模型提供标准化图表绘制规范

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![MCP](https://img.shields.io/badge/MCP-Protocol-blue)](https://modelcontextprotocol.io/)

## ✨ 项目简介

Draw.io MCP Server 是一个基于 **Model Context Protocol (MCP)** 的专业图表生成指导服务器。它不直接生成图表文件，而是为AI大语言模型提供详细的绘图规范、转换指导和最佳实践，确保生成的Draw.io图表符合企业级标准。

### 🎯 核心价值

- **🏗️ 标准化**: 提供统一的图表绘制规范和样式指导
- **🔄 智能转换**: 支持Mermaid语法到Draw.io格式的智能转换
- **📋 规范管理**: 自动化的版本控制和文件命名规范
- **🎨 样式统一**: 确保所有图表遵循一致的视觉风格
- **🚀 效率提升**: 大幅提高专业图表的生成效率和质量

## 🚀 功能特性

### 📊 支持的图表类型

| 图表类型 | 功能描述 | 应用场景 |
|---------|---------|---------|
| **时序图** | Mermaid到Draw.io的智能转换 | API调用流程、系统交互 |
| **流程图** | 标准化的流程图绘制指导 | 业务流程、算法逻辑 |
| **架构图** | 系统架构的可视化规范 | 技术架构、组件关系 |
| **API流程图** | 专门的API调用流程指导 | 接口文档、服务调用 |

### 🛠️ 核心工具集

#### 📋 规范管理工具
- `load_drawio_rules` - 加载最新的绘图规范和样式指导
- `get_diagram_guidelines` - 获取特定图表类型的详细绘制指导
- `validate_diagram_specs` - 验证图表描述是否符合规范要求

#### 🔄 智能转换工具
- `convert_mermaid_to_drawio_llm` - 使用AI智能转换Mermaid到Draw.io
- `generate_api_flow_diagram` - 专门为API路径生成流程图指导
- `smart_diagram_assistant` - 智能图表助手，自动推荐最佳工具链

#### 📁 文件管理工具
- `create_versioned_file` - 创建版本化的Draw.io文件
- `suggest_version_increment` - 智能建议版本号递增策略
- `get_file_naming_suggestion` - 标准化文件命名建议
- `regenerate_diagram_with_version` - 版本化重新生成图表

## 🛠️ 快速开始

### 📦 安装部署

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

# 2. 安装依赖
npm install

# 3. 构建项目
npm run build

# 4. 启动服务器
npm start
```

### ⚙️ Cursor IDE 配置

在Cursor的MCP设置中添加此服务器：

```json
{
  "mcpServers": {
    "drawio-rules": {
      "command": "node",
      "args": ["/Users/your-path/drawio-mcp/build/index.js"]
    }
  }
}
```

### 🎯 使用示例

#### 1️⃣ 生成时序图
```
用户: "请为用户登录API生成时序图"
AI: 调用 smart_diagram_assistant → generate_api_flow_diagram → convert_mermaid_to_drawio_llm
结果: 生成符合规范的Draw.io时序图文件
```

#### 2️⃣ 创建流程图
```
用户: "绘制订单处理流程图"
AI: 调用 load_drawio_rules → get_diagram_guidelines(flowchart) → 生成标准流程图
结果: 遵循企业规范的流程图设计
```

#### 3️⃣ 版本管理
```
用户: "更新系统架构图"
AI: 调用 regenerate_diagram_with_version → 自动版本递增 → 保留历史版本
结果: 完整的版本追踪和变更记录
```

## 📋 工作流程

### 🔄 标准工作流

```mermaid
graph LR
    A[用户需求] --> B[智能助手分析]
    B --> C[加载规范]
    C --> D[生成指导]
    D --> E[AI创建图表]
    E --> F[版本管理]
    F --> G[输出文件]
```

### 📊 详细流程说明

#### 🎨 时序图生成流程
1. **需求分析** - `smart_diagram_assistant` 分析用户需求
2. **规范加载** - `load_drawio_rules` 加载最新绘图规范
3. **Mermaid生成** - AI生成标准Mermaid语法
4. **智能转换** - `convert_mermaid_to_drawio_llm` 提供转换指导
5. **文件生成** - AI根据指导生成Draw.io XML文件
6. **版本管理** - 自动处理版本控制和文件命名

#### 🔀 流程图创建流程
1. **规范获取** - `get_diagram_guidelines(flowchart)` 获取流程图规范
2. **结构设计** - 根据业务逻辑设计图表结构
3. **样式应用** - 应用统一的颜色和样式规范
4. **质量检查** - `validate_diagram_specs` 验证规范符合性
5. **版本发布** - `create_versioned_file` 创建版本化文件

#### 🏗️ API流程图专用流程
1. **路径分析** - `generate_api_flow_diagram` 分析API路径
2. **模块识别** - 自动识别API所属模块和功能
3. **流程构建** - 生成标准化的API调用流程
4. **文档集成** - 与API文档保持一致的命名和结构

## 📁 项目结构

```
drawio-mcp/
├── 📂 src/                     # 🔧 核心源代码
│   ├── 🎯 index.ts            # MCP服务器主入口
│   ├── 📋 diagram-rules.ts    # 图表规则管理器
│   ├── 🔀 flowchart-guide.ts  # 流程图生成指导
│   ├── ⏱️ sequence-guide.ts   # 时序图转换指导
│   └── 📁 file-manager.ts     # 文件版本管理器
├── 📚 docs/                   # 📖 规范文档
│   ├── 📐 drawio-rules-v2.md  # 最新绘图规范
│   ├── 📊 sequence-diagram-standards.md # 时序图标准
│   └── 🔄 version_manage.md   # 版本管理规范
├── 🎨 drawio/                 # 📈 生成的图表文件
│   └── *.drawio              # 版本化的Draw.io文件
└── 🏗️ build/                  # ⚡ 编译输出
    └── *.js                  # TypeScript编译结果
```

## 📐 标准规范

### 🏷️ 文件命名规范
```
格式: [模块名]_[图表类型]_v[版本号]_[日期].drawio
示例: user_auth_sequence_v1.2_20250131.drawio
```

### 🔢 版本管理规则
| 版本类型 | 规则 | 示例场景 |
|---------|------|---------|
| **v1.0** | 初始版本 | 新建图表 |
| **v1.x** | 小版本更新 | 样式调整、文字修改 |
| **v2.0** | 大版本更新 | 架构重构、流程重设计 |

### 🎨 标准色彩体系
| 组件类型 | 颜色方案 | 应用场景 |
|---------|---------|---------|
| **用户/系统** | `#dae8fc` + `#6c8ebf` | 外部实体、用户界面 |
| **数据库** | `#d5e8d4` + `#82b366` | 数据存储、缓存 |
| **服务** | `#ffe6cc` + `#d79b00` | 业务服务、API |
| **决策点** | `#fff2cc` + `#d6b656` | 条件判断、分支 |

## 🔧 技术架构

### 💻 技术栈
- **语言**: TypeScript 5.0+
- **协议**: Model Context Protocol (MCP)
- **运行时**: Node.js 20+
- **构建工具**: TypeScript Compiler

### 🏗️ 架构设计
```
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Cursor IDE    │◄──►│  MCP Protocol   │◄──►│ Draw.io Server  │
└─────────────────┘    └─────────────────┘    └─────────────────┘
                                │
                                ▼
                       ┌─────────────────┐
                       │  规范管理器      │
                       │  转换指导器      │
                       │  版本管理器      │
                       │  文件管理器      │
                       └─────────────────┘
```

### 🔌 扩展开发
添加新图表类型支持的步骤：
1. **创建指导器** - 在 `src/` 中创建新的指导类
2. **注册工具** - 在 `index.ts` 中注册MCP工具
3. **更新规范** - 在 `docs/` 中添加相应规范文档
4. **测试验证** - 确保新功能符合MCP协议标准

## ⚠️ 重要说明

### 🎯 职责边界
| 组件 | 职责范围 | 输出内容 |
|------|---------|---------|
| **MCP服务器** | 规范指导、分析建议、版本管理 | 转换指导、样式规范、文件命名 |
| **AI大模型** | 内容生成、XML构建、文件创建 | Draw.io XML文件、Mermaid源码 |
| **Draw.io** | 图表编辑、可视化展示、导出 | 最终图表文件、图片导出 |

### 🔄 工作流程
```
用户需求 → MCP分析 → 规范加载 → AI生成 → 版本管理 → 文件输出
```

### 📂 文件管理策略
- **源文件**: Mermaid语法保存为 `.md` 文件
- **图表文件**: Draw.io XML保存为 `.drawio` 文件  
- **版本控制**: 自动递增版本号，保留历史版本
- **目录结构**: 统一存储在 `./drawio/` 目录

## 🤝 贡献指南

### 📋 开发规范
- 遵循TypeScript严格模式
- 使用ESLint和Prettier格式化代码
- 编写完整的JSDoc注释
- 提交前运行 `npm run build` 确保编译通过

### 🐛 问题反馈
如遇到问题，请提供：
- 错误信息和堆栈跟踪
- 使用的图表类型和输入内容
- 期望的输出结果
- 系统环境信息

## 📄 许可证

本项目采用 [MIT License](LICENSE) 开源协议

---

<div align="center">

**🎨 让AI绘图更专业，让图表标准更统一**

[![⭐ Star](https://img.shields.io/github/stars/your-repo?style=social)](https://github.com/your-repo)
[![🍴 Fork](https://img.shields.io/github/forks/your-repo?style=social)](https://github.com/your-repo/fork)

</div>