我做了个 AI + 实时协作的 draw.io，免费开源！！

2026年2月13日 17:40

前言

相信各位程序员朋友们一定使用过各种绘图软件吧，比如GitHub上star数量特别高的drawio。我们可以使用drawio来画各种图，比如UML类图，流程图，软件架构图等各种图，甚至可以拿来画简单的产品原型图（对于那些不太熟悉使用AxureRP的人来说）。在这个AI爆火的时代，我就在想能不能用AI来生成drawio可以识别的图表呢，再进一步想，能不能多人同时操作同一个图表也就是多人实时协作呢。于是，我就开发了这款AI驱动+多人实时协作的drawio。

在线体验地址：

www.intellidraw.top

编辑

并且，我直接把完整的前后端项目源代码给开源到GitHub上啦！！！，大家可以自行拉取到本地进行学习，修改。

前端开源地址：

github.com/wangfenghua…

后端开源地址：

github.com/wangfenghua…

接下来肯定是各位程序员朋友们最关心的技术栈啦！

项目技术栈

前端

使用Next.js服务端渲染技术 + Ant Design组件库 + yjs + ws + 内嵌的drawio编辑器

Next.js天然对SEO友好，使用蚂蚁金服开源的Ant Design组件库简化样式的编写，使用yjs+WebSocket实现实时协作编辑图表功能。

后端

当然是使用Java开发啦！并使用一个Node.js微服务来处理实时协作逻辑

后端采用jdk21 + Spring Boot（SSM） + Spring AI + Spring Security + Node.js实现

Spring Boot后端负责处理整个系统主要的业务逻辑，Spring AI 为系统提供AI能力，并使用工厂模式可以使用多种不同的llm，包括系统内置的和用户自定义的。 Spring Security负责处理基于RBAC的权限校验，包括协作房间的用户权限和团队空间的用户权限。由于Java对yjs的支持并不友好，所以直接引入一个Node.js来处理实时协作逻辑，Spring Boot暴露鉴权接口供Node.js对连接进行鉴权。

项目主要功能

1、AI生成Drawio图表

一句话生成你想要的图表

编辑

这样，不管是想要画什么图表，直接一句话，使用自然语言就能拿到自己想要的图表，并且可以直接导出自己想要的格式，比如SVG，或者PNG。

编辑

⭐⭐⭐实时协作

可以直接在图表编辑页面点击右上角的协作按钮开启协作。系统会自动创建协作房间。

编辑

这里会通过ws连接后端Node.js服务，从而实现实时协作逻辑。比使用Spring Boot的WebSocket透穿yjs的二进制update数据性能更优，支持高并发。

并且也可以管理房间内的成员，比如修改权限等等，前提是私密的房间。如果是公开的房间就不需要进行房间成员的管理了。、

编辑

团队空间

本项目有公共空间和团队空间之分，所谓公共空间就比如你创建了一个图表到公共空间里面，那么所有的人都能在图表广场看到你所创建的图表，除非你创建一个私有空间或者是团队空间。

编辑

并且团队空间分为普通版专业版和旗舰版三个等级，区别就在于可以创建的图表数量不同，旗舰版最多。

同时团队空间也是基于RBAC的权限控制的。

编辑

同时可以编辑团队空间内的图表和空间信息（管理员），也可以在本团队空间之内创建图表。

也可以通过用户id邀请其他用户加入到本团队空间内。在空间管理页面也分为我创建的空间和我加入的空间。

空间管理

编辑

协作房间管理

编辑

图表管理

编辑

开源与贡献

各位大佬可以在GitHub提交PR。

或者是将完整的前后端项目拉取到本地运行

后端的配置文件格式如下：

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
        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 连接池管理
    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

Fork 仓库 ➜ 点击 GitHub 右上角 Fork 按钮。
创建分支 ➜ 推荐使用有意义的分支名
提交代码 ➜ 确保代码可读性高，符合规范。
提交 Pull Request（PR） ➜ 详细描述您的更改内容，并关联相关 issue（如有）。
等待审核 ➜ 维护者会进行代码审核并合并。

以上讲解如果对你有帮助，不妨给我的项目点个小小的 star 🌟，成为一下我的精神股东呢

阅读视图

前言