企业官网建设流程全解析

大家好，我是顾北！

作为程序员，最头疼的不是写代码，而是画图！每次写文档、做 PPT，为了画一个漂亮的架构图或时序图，往往要折腾半天，对齐、配色搞得头秃。这两天，我在逛 Github 开源项目的时候发现了一个超级牛逼的画图工具（next-ai-draw-io），可以根据你输入的自然语言，一句话生成你想要的任何图表，包括但不限于软件工程常见的数据流图、ER图、时序图、类图、架构图、流程图等。

仅仅只要一句话，就可自动绘制，你就说牛不牛！

不到一周时间，这个开源项目已经上涨到 6k star 了。什么含金量我就不多说了。

话不多说，接下来，我就带你完整的体验一遍这个绘图神器。

01-支持绘制的图表类型

绘制系统架构图

提示词：帮我生成一个教务系统的微服务系统架构图

UML类图

提示词：生成教室资源管理的UML类图

时序图

提示词：生成用户登录的时序图

ER图

提示词：绘制一个关于图书管理系统的总的ER图，不带属性

数据流图

提示词：生成一份电商平台的顶层数据流图

流程图

提示词：生成订单支付的业务流程图

02-其他功能特点

它还支持上传对应的 PDF、txt、markdown、json等文件进行绘图

支持生成对应的动画图，是不是很高级。

当然，目前官方免费示例只有十次机会，你可以配置你自己的模型API和Key，可以绕过这个限制

官方示例的模型使用的是 MiniMax-m2模型

支持OpenAI、Google、Anthropic、Deep Seek等模型厂商

建议大家本地部署食用，本地部署也很简单，按照官方 MD 文档一步一步操作即可。

03-本地部署

1.首先你可以克隆到本地

git clone https://github.com/DayuanJiang/next-ai-draw-iocdnext-ai-draw-io

2.使用 npm install 进行安装

npminstall

3.配置你的AI供应商

cpenv.example.env.local

4.配置完成之后，运行开发服务器

npmrun dev

5.在浏览器中打开 http://localhost:3000 查看应用程序即可。

04-相关地址

开源地址： https://github.com/DayuanJiang/next-ai-draw-io

体验地址： https://next-ai-drawio.jiang.jp/

05-最后

当然在这次使用过程中，有时候它会生成的图表很乱，效果可能不是那么好，需要你自己手动进行排版！

但就这样也帮我们剩下大量时间，相信在不久之后，该项目会有一个很大的提升，这就类似于刚开始的时候 nano Banana 生成的图片惨不忍睹，对中文的支持也特别不好，但是你看看现在，仅仅三个月时间，nano Banana Pro 生成图片的质量就得到一个质的飞跃。

AI 的进化速度，往往超乎我们的想象。

这款工具目前可能在复杂排版上还需要人工微调，但它已经帮我们解决了“从 0 到 1”最困难的构思和草图阶段。原本需要 1 小时画的图，现在 1 分钟生成底稿，再花 5 分钟修改，效率提升是肉眼可见的。

拥抱工具，而不是被工具替代，这才是我们作为开发者应有的态度。

如果觉得这篇教程对你有启发， 随手点个赞、在看、转发三连吧~

谢谢你耐心看完我的文章~