「小墨是前端」专注前端技术分享,推荐优质开源项目,展示 Github、Gitee 创意作品,深入前端底层原理,一起探索技术边界。

  以前为了画一张拿得出手的架构图,真的能把人逼疯。拖拽方块、对齐线条、调整颜色,光是把图画得"能看",就得花掉半天时间。要是老板突然说"这里改一下",心态直接崩了。

  最近项目赶进度,急需出几张 AWS 架构图。同事给我推了个开源项目 next-ai-draw-io,说是能用 AI 画图。我一开始是不信的,觉得又是那种生成一张死图的玩具,结果试了一下,真香。

  对着它说一句:"帮我画一个 AWS 架构图,用户通过 CloudFront 访问 S3",不到 30 秒,一张标准的架构图就出来了。这效率,简直是降维打击。(原图美化未调,稍微调整下,会更优秀)

  4.0K Star! 画架构图要2小时?我用AI一句话,30秒搞定。next-ai-draw-io:给 draw.io 装了个 AI 脑子

  它最牛的地方在于,它不是生成一张图片(像 Midjourney 那样),而是真的在 draw.io 里画图。生成的图表是标准的 XML 格式,你可以随意拖拽、修改、调整。这就意味着,你既享受了 AI 的速度,又保留了 draw.io 的强大编辑能力。

  4.0K Star! 画架构图要2小时?我用AI一句话,30秒搞定。

  我用了几天,感觉这几个功能最实用:

  1. 一句话生成复杂图表

  这是最核心的功能。你不需要从零开始拖控件,直接告诉 AI 你想要什么。

  比如:"画一个 Transformer 的架构图,带动画连接线"。 或者:"画一个 GCP 架构图,用户连接到实例上的前端"。

  4.0K Star! 画架构图要2小时?我用AI一句话,30秒搞定。

  AI 会自动分析你的需求,调用 draw.io 的组件库,把图画好。对于那些标准化的架构图,准确率高得离谱。

  4.0K Star! 画架构图要2小时?我用AI一句话,30秒搞定。

  2. 像改代码一样改图

  画出来的图不满意?不用自己动手。直接在聊天框里说:"把蓝色的方块改成红色"、"把这个连接线变成虚线"。AI 会理解你的指令,直接修改图表。

  这对于微调细节来说,简直太方便了。以前为了对齐一条线要搞半天,现在一句话的事。

  4.0K Star! 画架构图要2小时?我用AI一句话,30秒搞定。

  3. 历史版本回溯

  这个功能很贴心。它会记录每一次 AI 修改的版本。如果 AI 改乱了(虽然很少见),你可以一键回退到上一个版本。这就像代码的 Git 一样,给了你无限的后悔药。

硬核对比:它凭什么吊打传统工具?

  市面上画图工具那么多,为什么要用它?我拉了个表格对比了一下:

  4.0K Star! 画架构图要2小时?我用AI一句话,30秒搞定。

  • draw.io (原版):功能最强,但全靠手动画,效率低。
  • Excalidraw:手绘风格好看,但画正规架构图不够严肃,且没有 AI 生成。
  • Visio:老牌霸主,但贵,而且重,Mac 用户只能干瞪眼。
  • next-ai-draw-io:集成了 draw.io 的专业性 + AI 的高效率,还是开源免费的。技术栈:Next.js + AI SDK 的最佳实践

      作为一个前端,我特意扒了下它的源码。这项目的技术栈非常现代,简直是 Next.js AI 应用的教科书:

      4.0K Star! 画架构图要2小时?我用AI一句话,30秒搞定。

  • Next.js App Router:最新的 Next.js 架构,路由管理很清晰。
  • Vercel AI SDK:处理 AI 流式响应的核心。它用了 streamUI,让 AI 的生成过程像打字机一样流畅。
  • react-drawio:把 draw.io 封装成 React 组件,实现了无缝集成。

      代码结构很干净,如果你想学习怎么开发 AI 应用,或者怎么把 AI 集成到现有编辑器里,这个项目绝对值得一看。

    本地部署,隐私无忧

      对于公司项目来说,隐私是最重要的。next-ai-draw-io 支持 Docker 一键部署。

      4.0K Star! 画架构图要2小时?我用AI一句话,30秒搞定。

      几行命令,就能在公司内网搭一套。所有的图表数据都存在本地(或者你配置的数据库),不用担心业务架构图泄露给第三方。

    说实话,也不是完美的

      用了这么久,客观说一下它的缺点:

    1. 布局偶尔智障:虽然大部分时候布局很合理,但有时候生成的连线会绕圈圈,或者组件重叠,得手动理一下。不过比从头画还是快多了。
    2. 中文提示词支持一般:作者针对 Claude 3.5 Sonnet 做了优化,英文提示词效果最好。用中文有时候 AI 会理解偏差,建议尽量用英文描述需求,或者让 AI 先把中文翻译成英文再画。
    3. 依赖大模型 API:你需要自己准备 OpenAI 或者 Claude 的 API Key,这算是个小门槛。
    总结

      next-ai-draw-io 这种工具,属于那种"用过就回不去"的神器。它没有改变 draw.io 的核心,而是用 AI 帮我们解决了"从 0 到 1"最繁琐的那一步。

      如果你也厌倦了在那拖方块、连线,强烈建议试试这个项目。把重复劳动交给 AI,把时间留给思考(和摸鱼)。

      项目地址:

      如果这篇文章对你有帮助,欢迎点赞、收藏、转发!持续分享前端干货和开源好物,关注我,不迷路~

      #前端# #GitHub# #开源# #AI工具# #架构图#