前言
有没有跟我一样，用Draw.io画架构图时，多人协作总冲突？传文件、改版本、核对内容，每次都要花半小时？我爆改了Draw.io，不仅解决了协作冲突，还加了AI自动画图功能，
爆改Drawio这个idea也是我之前在GitHub中看到的一款AI驱动的画图软件next-ai-drawio。后来我就想啊：如果drawio既能用AI生成图表，还能实时协作的话，那简直是绝了。 但我又想到，实时协作这个逻辑好像和前端开发关系大吧，因为我主要是做后端开发么，前端虽然也能写，但最近vibe-coding那么火，我索性直接让AI生成的前端。
技术栈
前端：
Next.js服务端渲染、Yjs（CRDT算法）、Ant Design组件库、websocket、Hocuspocus
后端：
PS：（因为Java对前端yjs的实时协作逻辑支持实在是不友好，所以我干脆引入了一个Node.js微服务用来处理协作功能，中间开发的过程也经历了不少架构的更新，才最终用了这个我感觉最稳妥的方案）
Java技术栈：Java21、Spring Boot、Spring AI、Spring Security、MyBatis-Plus、ws、Redis、MySQL、RustFS Node.js技术栈：Hocuspocus、axios、Redis
在线体验地址： http://47.95.35.178:6001 (欢迎各位大佬体验)
同时我也把后端项目给开源到GitHub上了:github.com/wangfenghua… (欢迎点star)
功能
ps： 基本上next-ai-drawio有的功能这个项目都有，可能有些地方有点小瑕疵
1、✅AI生成图表
后端的AI能力主要是使用的spring ai结合工具调用生成图表代码然后推送给前端渲染xml代码到drawio画布上。由此可以一句提示词直接快速生成想要的drawio图表
并且可以直接下载PNG和SVG图片
关于后端的大模型，用户可以使用服务端的大模型。也可以传递自己的apikey（不会上传到服务器端，只存在本地）
同时后端使用工厂设计模式构造不同的ChatClient使用不同的大模型
2、✅ 开启协作房间（也算是这个项目的亮点吧）
这里会自动创建协作房间，ws连接到Node.js的后端（这里使用异构微服务也是经过了惨痛的教训，因为一开始我是打算用Spring Boot的ws进行一个yjs二进制数据的透穿的，但是很不稳定，而且每次做一次更新操作都要操作数据库如果很多人在操作的话那数据库不就直接炸了，就算引入Redis，那实现也挺复杂的，还要考虑数据一致问题。干脆直接使用Node.js来处理协作逻辑算了，Spring Boot提供鉴权接口）。Node.js再调用Spring Boot的鉴权接口来判断用户的权限。下面是协作的演示，我同时登录一个账号在不同的浏览器操作图表。
同时协作房间也支持RBAC的权限控制
这里可以添加用户，并赋予对应的权限
（目前只支持通过输入用户id邀请进房间🤣）
3、✅团队空间
团队空间也是使用了spring security实现了rbac的权限管理
具体功能包括：空间成员的增删改查等
4、✅模板库
在这里可以找到各种各样的drawio模板。虽然目前啥也没有，还要靠各位的多多支持~~嘿嘿
还可以直接使用模板。
想想，要是直接有现成的模板，直接拿来改改不就成了自己画的么~~哈哈
好了，项目的讲解就先说到这。 以上讲解如果对你有帮助，不妨给我的项目（ github.com/wangfenghua… ） 点个小小的 star 🌟呢，提供一下精神上的支持呢~~
也欢迎各位大佬贡献代码，提供反馈与建议~~
