[JS/TS] Next AI Draw.io 实战指南：免费开源 AI 绘图工具快速生成技术图表

在技术文档和系统设计过程中，图表绘制往往耗时费力。如今，借助 AI 技术，我们可以高效地自动化完成流程图、架构图等多种技术图表的制作。

近期，一款名为 Next AI Draw.io 的开源项目引起了广泛关注。它完全免费，在 GitHub 上短短几天内就获得了超过 6k 的 star，是一个值得尝试的 AI 绘图工具。

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

该工具支持在线体验，你可以从零开始创建图表。例如，绘制一个流程图来演示 RAG 的工作原理，只需输入描述，AI 便会自动生成 Draw.io 兼容的绘图代码，迅速输出精美的流程图。

生成后，你可以利用 Draw.io 强大的原生编辑功能，手动调整任意元素或修改样式。

此外，你还可以通过 AI 对话指令进行修改。例如，要求将连接线改为动画样式，从而提升图表的视觉表现力。

该工具特别适合程序员处理各种技术图表，以下是一些常见用例：

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

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

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

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

知识讲解图
提示词：用动画演示冒泡排序的执行过程

甚至一些趣味图示也能轻松生成，有效节省大量手动绘图时间。

使用过程中还有一些实用技巧。例如，可以结合免费图标库丰富绘图元素。
提示词：使用 AWS 图标生成 CDN 架构图

支持通过原生 SVG 动画标签为图表添加缩放和路径动画（当前支持的动画类型有限）。
提示词：演示 DDOS 攻击，使用 SVG 增加缩放和路径动画

你还可以上传草图（如由文本模型生成的 Mermaid 流程图），让 AI 将其转换为更美观的风格。
提示词：改为彩虹主题配色、放大字体、使用加粗动画连接线

完成编辑后，图表可以导出为多种图片或文档格式，方便后续使用。

需要注意的是，官方提供的演示网站可能存在访问限制或稳定性问题。建议下载开源代码到本地，按照文档配置自己的大模型 API 后运行。或者，使用 Docker 容器一键启动，实现更稳定、无限次的使用。

从技术实现上看，该项目并不复杂。作者通过集成 Vercel AI SDK 对接各类大模型，让 AI 生成 draw.io 可解析的 XML 代码，再结合开源的 draw.io 核心库实现绘图展示与编辑，整体流程与常见的 AI 生成式应用相似。