news 2026/8/29 0:04:34

干掉 Draw.io,这个程序员画图神器杀疯了!

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
干掉 Draw.io,这个程序员画图神器杀疯了!

这年头谁还人工画图啊?我用 AI 几十秒就搞定了。

我在 编程导航 上看到了这个最近大火的 AI 画图神器,完全免费开源,短短几天就涨了 6k star,值得收藏!

开源指路:https://github.com/DayuanJiang/next-ai-draw-io

这个项目支持在线体验,你可以完全从 0 开始画图,比如画一个流程图,演示 RAG 的工作原理。

⭐️ 建议观看视频演示:https://bilibili.com/video/BV18NmnB4EeM

AI 会自动生成 Draw.io 绘图代码,很快精美的流程图就搞定了!

然后你可以利用 Draw.io 自身强大的绘图能力手动修改任意元素、或者是改变风格样式。

也可以通过 AI 对话让它帮你修改,比如改成动画连接线,逼格一下子就上来了。

还有程序员工作涉及的架构图:

提示词:绘制电商平台的微服务架构图

UML 类图:

提示词:用 UML 类图展示用户管理模块的设计

ER 图:

提示词:绘制在线教育平台的数据库 ER 图

时序图:

提示词:用时序图展示用户登录的交互过程

知识讲解图:

提示词:用动画演示冒泡排序的执行过程

甚至是沙雕图:

提示词:让程序员鱼皮卑微地求用户点赞

这些通通不在话下,帮你节省大把的时间和毛发~

还有一些使用小技巧,比如配合免费的图标库,让整个绘图元素更丰富。

提示词:使用 AWS 图标生成 CDN 架构图

可以使用原生 SVG 动画标签,给整个绘图增加缩放和路径动画(不过支持的动画很有限)。

提示词:演示 DDOS 攻击,使用 SVG 的 和 增加缩放和路径动画

还可以自己上传一个草图,比如我用文本模型生成的 Mermaid 流程图,让 AI 帮我替换为更美观的样式风格。

提示词:改为彩虹主题的配色、放大字体、使用加粗动画连接线

效果还不错吧!

最后导出为各种图片或文档格式,美滋滋~

注意,官方提供的演示网站可能限量和不稳定,像我连续用了几次就被拒绝了:

所以我建议下载开源代码到本地,按照官方文档的说法 配置自己的大模型 来运行;或者用 Docker 一键启动,想怎么用就怎么用。

最后多说两句,这个项目的实现其实并不复杂。作者通过集成 Vercel AI SDK 轻松对接各种大模型,让 AI 生成 draw.io 能理解的 XML 代码,然后直接使用开源的 draw.io 代码实现了核心的绘图展示和编辑能力,整个过程和 AI 生成网站是类似的。

你学会了吗?

更多编程学习资源

  • Java前端程序员必做项目实战教程+毕设网站
  • 程序员免费编程学习交流社区(自学必备)
  • 程序员保姆级求职写简历指南(找工作必备)
  • 程序员免费面试刷题网站工具(找工作必备)
  • 最新Java零基础入门学习路线 + Java教程
  • 最新Python零基础入门学习路线 + Python教程
  • 最新前端零基础入门学习路线 + 前端教程
  • 最新数据结构和算法零基础入门学习路线 + 算法教程
  • 最新C++零基础入门学习路线、C++教程
  • 最新数据库零基础入门学习路线 + 数据库教程
  • 最新Redis零基础入门学习路线 + Redis教程
  • 最新计算机基础入门学习路线 + 计算机基础教程
  • 最新小程序入门学习路线 + 小程序开发教程
  • 最新SQL零基础入门学习路线 + SQL教程
  • 最新Linux零基础入门学习路线 + Linux教程
  • 最新Git/GitHub零基础入门学习路线 + Git教程
  • 最新操作系统零基础入门学习路线 + 操作系统教程
  • 最新计算机网络零基础入门学习路线 + 计算机网络教程
  • 最新设计模式零基础入门学习路线 + 设计模式教程
  • 最新软件工程零基础入门学习路线 + 软件工程教程
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/28 22:52:44

效率提升超24倍!如何实现财务报表OCR识别自动录入?

借助智能财报录入系统,银行将PDF、图片等非结构化财报秒级转为结构化数据。该方案能精准解析印章遮挡及跨页表格,通过自动勾稽校验确保准确性,将作业效率提升超24倍,解决人工录入效率低、易出错的痛点。 为什么银行必须升级到智能…

作者头像 李华
网站建设 2026/8/28 1:57:28

69、《gawk 编程语言与源代码管理系统入门》

《gawk 编程语言与源代码管理系统入门》 1. gawk 编程语言基础 gawk 是一种功能强大的文本处理语言,拥有丰富的控制结构和内置函数。 1.1 控制结构 if 语句 :用于条件判断,语法如下: if (condition)statement1 [elsestatement2]如果 condition 为真,则执行 state…

作者头像 李华
网站建设 2026/8/26 15:27:09

72、Subversion常用命令详解

Subversion常用命令详解 1. 复制操作( svn copy ) svn copy 命令可用于在不同场景下复制文件或目录,在版本控制中是非常实用的操作。以下是几种常见的使用方式: - 复活已删除文件 : $ svn copy file:///tmp/repos/test/far-away near-here A near-here这…

作者头像 李华
网站建设 2026/8/28 2:02:57

Spoor鸟类监测AI软件需求飞速增长

Spoor成立于2021年,目标是使用计算机视觉技术帮助减少风力涡轮机对当地鸟类种群的影响。如今,这家初创公司已经证明了其技术的有效性,并看到来自风电场及其他领域的强劲需求。这家位于挪威奥斯陆的公司开发了使用计算机视觉技术追踪和识别鸟类…

作者头像 李华
网站建设 2026/8/28 0:06:49

制药行业AI数据质量危机:垃圾进垃圾出的隐患

人工智能正在重塑各行各业,但在生命科学领域,其影响尤为重要。制药公司看到了AI加速药物发现、简化临床试验、降低开发成本(通常超过20亿美元)的潜力。然而,尽管充满热情,大多数试点项目仍难以取得成果。据…

作者头像 李华
网站建设 2026/8/25 19:43:37

75、Git快速入门与常用命令详解

Git快速入门与常用命令详解 1. 克隆Linux内核仓库示例 首先,我们可以将Linux内核仓库克隆到 /tmp/linux-2.6 目录下,操作步骤如下: $ cd /tmp $ git clone git://git.kernel.org/pub/scm/linux/kernel/git/torvalds/linux-2.6.git linux-2.6执行上述命令后,会初始化一…

作者头像 李华