Skip to main content
Glama
Geoffrey-Fang

Draw.io MCP Server

by Geoffrey-Fang
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Local

Draw.io MCP Server

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

🚀 项目状态

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

  • ✅ MCP服务器核心功能完整实现

  • ✅ 10个Draw.io工具已注册并可用

  • ✅ 完整的测试框架和测试用例

  • ✅ TypeScript类型安全支持

  • ✅ 详细的文档和使用指南

Related MCP server: Draw.io MCP Server

🛠️ 快速开始

环境要求

  • 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 描述您的问题

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

This server cannot be installed

A
license - permissive license
-
quality - not tested
D
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/Geoffrey-Fang/drawio-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server