跳到主要内容
极客日志极客日志
首页博客AI提示词GitHub精选代理工具
搜索
|注册
博客列表
TypeScriptNode.jsAI大前端

next-ai-draw-io:基于 Next.js 的 AI 绘图工具搭建指南

next-ai-draw-io 是一个基于 Next.js 和 AI 模型的开源绘图工具,支持通过 Prompt 生成流程图、序列图和思维导图,且生成的图表可二次编辑。项目兼容 OpenAI、DeepSeek 等多种大模型,提供本地 npm 启动、Docker 容器化及 Vercel 免费托管三种部署方式,并支持 MCP 协议供大模型直接调用。该工具适用于技术文档与架构设计场景,能显著提升绘图效率,但在处理复杂系统逻辑时仍需人工微调布局。

山野诗人发布于 2026/3/16更新于 2026/4/2712 浏览

next-ai-draw-io

这是一个纯前端的基于 Next.js 和 AI 模型的项目,使用非常简单。编写 prompt 就能快速把文字描述变成简约美观的流程图、序列图、思维导图。

生成的不是一张死图,是可以二次编辑微调的,这对程序员和架构师来说非常重要。

上手使用

改配置

项目源码下载以后,只需要做一件事,复制文件 env.example 内容新建一个 .env.local 文件,主要是设置默认的大模型。

文章配图

编译启动

直接编译启动就行了:

git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local
npm run dev

更简单的可以直接 docker 启动,参数上设置要用的模型类型:

docker run -d -p 3000:3000 \
  -e AI_PROVIDER=openai \
  -e AI_MODEL=gpt-4o \
  -e OPENAI_API_KEY=your_api_key \
  ghcr.io/dayuanjiang/next-ai-draw-io:latest

或者用一个环境文件:

cp env.example .env
docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest

直接页面访问 http://localhost:3000,打开能看到界面,可以选择修改模型配置。

文章配图

MCP

它还提供了 MCP 服务,可以在大模型里直接配置调用。

{"mcpServers":{"drawio":{"command":
"npx"
,
"args"
:
[
"@next-ai-drawio/mcp-server@latest"
]
}
}
}

Vercel 免费部署

官方推荐 Docker 部署,但还得买服务器。因为这是个 Next 项目,而 Vercel 支持 Next 个人开发者免费托管部署,一分钱不花,服务器都不用买。

导入项目

首先将 next-ai-draw-io Fork 到你自己的 GitHub 里,GitHub 仓库地址:https://github.com/DayuanJiang/next-ai-draw-io

登录 Vercel 官网 https://vercel.com/new,用 GitHub 登录并导入刚刚你 Fork 的 next-ai-draw-io 项目。

配置环境变量,这里一定是 Hobby,只有个人开发者是免费的。

如果你不想在项目代码中设置密钥,可以在 Environment Variables 区域,需要填入 AI 的配置信息。比如用 deepseek 那就配置如下:

AI_PROVIDER=deepseek
AI_MODEL=deepseek-chat
DEEPSEEK_API_KEY=sk-22222
DEEPSEEK_BASE_URL=https://api.deepseek.com

填好后,直接点击 Deploy。大概等待 1-2 分钟,Vercel 提供了 xxx.vercel.app 格式的域名,可以直接访问。

文章配图

自定义域名

如果你自己有域名也可以直接指向过来,Vercel 的地址是 76.76.21.21,然后在已经部署的项目上 setting -> domain -> add domain 就可以了。

文章配图

总结

以前手搓一个复杂的业务架构图,光是拖拽对齐就要半小时。现在底稿由 AI 生成,只需要修修补补确实快了很多。有时候脑子卡壳,不知道流程哪里漏了,能帮我查漏补缺。

缺点就是审美一般,AI 直接生成的配色和布局比较直男,所以 prompt 多给它提要求就好了。复杂逻辑不够准,特别复杂的超大系统图,连线会乱飞,还是要人调整的。

总的来说,这是一个 80 分的辅助工具,对于写文章、写文档的人来说,可以省掉很多重复劳动。

目录

  1. next-ai-draw-io
  2. 上手使用
  3. 改配置
  4. 编译启动
  5. MCP
  6. Vercel 免费部署
  7. 导入项目
  8. 自定义域名
  9. 总结
  • 💰 8折买阿里云服务器限时8折了解详情
  • 💰 8折买阿里云服务器限时8折购买
  • 🦞 5分钟部署阿里云小龙虾了解详情
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • 利用 Higress MCP Server 插件将 REST API 转为 AI 工具
  • Spring AI 基于 Ollama Qwen7B 和 PGVector 构建 RAG 问答系统
  • FPGA 基础概念与架构面试题详解
  • Python 中的真值与假值机制详解
  • Stable Diffusion AI 绘画入门与使用指南
  • 2025 年 AI 时代 Java Web 开发现状与应对策略
  • Trae 集成图片素描 MCP 实现多风格图像转换
  • Spring Bean 管理与 Spring Boot 自动配置原理
  • IoT DevOps 实战:基于设备影子的万级集群自动化运维架构
  • C++ 智能指针详解:原理、实现与使用场景
  • GitHub 访问速度优化:本地 hosts 配置与 DNS 刷新指南
  • Go 语言常见面试题及参考答案
  • gpt-oss-20b 本地 WebUI 部署与网页推理服务配置
  • 企业微信接入 AI 小助手:基于回调接口的群聊机器人实战
  • Nature Methods 综述:细胞图像分析中的深度学习应用
  • Figma Make 实测:AI 生成的前端代码靠谱吗?
  • 新手如何从零开始学习漏洞挖掘
  • ABB 机器人虚拟示教器基础操作教程
  • Gemini 全能 QQ 机器人部署指南
  • GitHub Actions Windows Server 2022 镜像企业级 CI/CD 配置指南

相关免费在线工具

  • RSA密钥对生成器

    生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online

  • Mermaid 预览与可视化编辑

    基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online

  • 随机西班牙地址生成器

    随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online

  • Markdown转HTML

    将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online