AI 驱动 draw.io 实时协作开源项目架构与实现

本项目是一个基于 draw.io 的开源绘图工具，集成了 AI 生成图表与多人实时协作功能。技术栈涵盖 Next.js、Ant Design、yjs、WebSocket 以及 Java Spring Boot、Spring AI、Node.js。支持自然语言生成图表、RBAC 权限管理的团队空间及高并发协作编辑。代码已开源至 GitHub，提供详细配置示例与贡献指南。

涅槃凤凰发布于 2026/3/250 浏览

项目简介

本文介绍一款基于 draw.io 的 AI 驱动实时协作绘图工具。支持使用自然语言生成图表，并实现多人同时操作同一图表的实时协作功能。

技术栈

前端

Next.js 服务端渲染
Ant Design 组件库
yjs + WebSocket 实时协作
内嵌 drawio 编辑器

后端

Java (JDK 21) + Spring Boot
Spring AI (集成多种 LLM)
Spring Security (RBAC 权限校验)
Node.js 微服务（处理实时协作逻辑）

主要功能

1. AI 生成 Drawio 图表

支持通过自然语言描述直接生成图表，可导出 SVG 或 PNG 格式。

文章配图

2. 实时协作

在图表编辑页面开启协作按钮即可创建协作房间，通过 WebSocket 连接后端 Node.js 服务实现数据同步。相比 Spring Boot 透穿 yjs 二进制更新数据，性能更优且支持高并发。

支持管理私密房间内的成员及权限，公开房间无需管理。

文章配图

3. 团队空间

项目包含公共空间和团队空间。公共空间创建的图表可在广场查看，私有或团队空间则受 RBAC 权限控制。

团队空间分为普通版、专业版和旗舰版，区别在于可创建的图表数量上限。支持管理员编辑空间信息及邀请用户加入。

文章配图

相关免费在线工具

Keycode 信息

查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online

Escape 与 Native 编解码

JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online

JavaScript / HTML 格式化

使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online

JavaScript 压缩与混淆

Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online

RSA密钥对生成器

生成新的随机RSA私钥和公钥pem证书。在线工具，RSA密钥对生成器在线工具，online

Mermaid 预览与可视化编辑

基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。在线工具，Mermaid 预览与可视化编辑在线工具，online

spring: application: name: drawio-backend mail: host: # SMTP 服务器地址 port: # SMTP 端口 username: # 邮箱账户 password: # 邮箱密码或授权码 properties: mail: smtp: auth: true starttls: enable: true security: oauth2: client: registration: github: client-id: client-secret: scope: read:user,user:email redirect-uri: client-name: Intellidraw provider: github: authorization-uri: https://github.com/login/oauth/authorize token-uri: https://github.com/login/oauth/access_token user-info-uri: https://api.github.com/user user-name-attribute: login ai: custom: models: moonshotai: api-key: base-url: https://api.qnaigc.com model: moonshotai/kimi-k2.5 deepseek: api-key: base-url: https://api.qnaigc.com model: moonshotai/kimi-k2.5 glm: api-key: model: glm-4.6 qwen: api-key: base-url: https://api.qnaigc.com model: moonshotai/kimi-k2.5 duobao: api-key: base-url: https://api.qnaigc.com model: moonshotai/kimi-k2.5 openai: api-key: base-url: chat options: model: datasource: type: com.alibaba.druid.pool.DruidDataSource username: url: password: driver-class-name: com.mysql.cj.jdbc.Driver druid: initial-size: 5 min-idle: 5 max-active: 20 max-wait: 60000 test-while-idle: true time-between-eviction-runs-millis: 60000 min-evictable-idle-time-millis: 30000 validation-query: select 'x' test-on-borrow: false test-on-return: false pool-prepared-statements: false filters: stat,wall,slf4j max-pool-prepared-statement-per-connection-size: -1 use-global-data-source-stat: true connection-properties: 'druid.stat.mergeSql=true;druid.stat.slowSqlMillis=5000' server: port: 8081 servlet: context-path: /api rustfs: client: endpoint: access-key: acess-secret: bucket-name: management: endpoints: web: exposure: include: health, prometheus metrics: distribution: percentiles: http: server: requests: 0.5, 0.75, 0.9, 0.95, 0.99

AI 驱动 draw.io 实时协作开源项目架构与实现

项目简介

技术栈

前端

后端