[JS/TS] AI绘图全攻略：用Next.js开源项目一键生成三大风格技术图表

前两天，我分享了如何零成本搭建 next-ai-draw-io，用 AI 来生成 draw.io 风格的架构图。后台反响相当不错，看来大家对于如何高效绘制技术图表的痛点，是普遍存在的。

但在日常创作技术内容时，我发现许多读者更偏爱另一种风格——就是那种极具手绘美感、线条灵动自由的 Excalidraw 风格。这种风格能让技术图表看起来不那么死板，瞬间提升文档的视觉档次和专业感。

我原本还想着，是不是可以自己动手，用 Gemini Pro 这类大模型整合一个平台，把 draw.io 和 Excalidraw 的功能都融合进去。结果去 GitHub 上一搜，好家伙！已经有大神把我想做的事情给完成了。这个 开源项目 简直是技术内容创作者的福音，它一口气集成了 Mermaid、draw.io、Excalidraw 这三大王牌图表风格。

回头想想以前为了画一张原理图熬夜折腾的样子，真感觉是在浪费生命。

AI Draw Nexus：你的AI绘图全家桶

这个项目的名字是 AI Draw Nexus。

• GitHub 地址： https://github.com/hkxiaoyao/ai-draw-nexus
• 在线体验地址： https://ai-draw-nexus.aizhi.site/

我亲自把三种风格都测试了一遍，大家可以感受一下生成效果：

1. Excalidraw 风格
输入“HTTP 长轮询原理图”，生成的图表逻辑清晰，手绘质感非常到位，完全满足了对美观和清晰度的双重需求。

2. Draw.io 风格
我之前很多系统架构图、流程图都用的这个风格，规整且专业。现在有了 人工智能 的加持，生成这类标准图表变得异常轻松。

3. Mermaid 风格
对于使用 Markdown 写作的朋友来说，这简直是神器。描述你的图表结构，AI 能直接生成对应的 Mermaid 代码，真正做到“一秒出图”。

最重要的是，这并非一个简单的“生成-导出”工具。它是一个功能完整的编辑器，你可以在 AI 生成图表的基础上，直接进行手动微调、拖拽修改，直到完全符合你的要求。

如何快速上手

如果你想在本地运行，获得完全自由的使用体验，这个基于 Next.js 的项目部署起来非常简单。

# 1. 克隆项目
git clone https://github.com/hkxiaoyao/ai-draw-nexus
cd ai-draw-nexus

# 2. 安装依赖 (推荐使用 pnpm)
pnpm install

# 3. 启动本地开发服务器
pnpm dev

完成以上步骤后，打开浏览器访问 http://localhost:3000 即可开始使用。

当然，项目也提供了在线版本供大家快速体验。不过，在线版本目前设有每日 10 次的免费生成配额，这一点完全可以理解，毕竟调用 OpenAI 或 Anthropic 的 API 是有成本的。

目前，工具主要支持 OpenAI 和 Anthropic 两大模型平台的 API。如果你已经拥有这些平台的 API Key，强烈建议在本地部署一套，这样就能实现真正意义上的“绘图自由”，无需担心任何使用限制。

利用好这类工具，能极大解放我们在图表绘制上的生产力，让我们更专注于技术内容本身。希望这个 AI 绘图全家桶能成为你技术创作路上的得力助手。如果你对这类提升开发效率的工具有更多兴趣，也欢迎到 云栈社区 来交流分享。