3分钟用自然语言画出专业图表Next AI Draw.io 免费使用教程【免费下载链接】next-ai-draw-ioA next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.项目地址: https://gitcode.com/GitHub_Trending/ne/next-ai-draw-ioNext AI Draw.io 是一款开源免费的 AI 图表生成工具你用大白话描述需求它就输出一张能在 draw.io 里直接编辑的专业图表不用学拖拽操作新手也能在一次对话里画出完整架构图。它到底能做什么这个项目的思路很直接把大语言模型可以理解成会写程序的 AI 助手接到 draw.io 绘图引擎上。你说需求AI 把话翻译成绘图用的 XML 描述画布立刻渲染出结果不满意就接着聊图表跟着你的话一步步改。常用能力一览能力说明对话式生成描述类型、元素和关系直接产出完整图表边聊边改像聊天一样追加把这个框换成圆形加一条连线实时生效历史记录每轮 AI 修改都留档随时回看并恢复到旧版本图片 / PDF 转图表上传已有图表截图或文档让 AI 照着复刻、提炼云架构支持内置 AWS、GCP、Azure 官方组件图形思维过程展示部分模型会先展示推理过程再落图方便判断它理解对了没有下面这张 AWS 架构图就是典型的生成效果用户请求进入 EC2再分发到 S3、Bedrock 和 DynamoDB层级和连线一次成型。哪些人用得上它覆盖的图表类型大致有四类技术架构图、业务流程图、系统设计图数据库关系、API 接口和概念示意图教学图、思维导图。对号入座一下系统架构师画云部署、微服务结构评审前快速出图开发工程师梳理组件依赖、接口调用关系DevOps部署流水线、监控拓扑产品 / 项目经理功能结构图、用户操作路径、资源分配业务分析师把冗长的流程描述变成决策树教师、培训师把讲解要点做成示意图和步骤图共同点是脑子里有内容但不想花一小时在画布上对齐框线。三步画出第一张图选模型。打开页面后在模型选择器里挑一个能力较强的模型后面会讲怎么选也可以直接沿用默认。把需求说具体。一次说清三件事要什么类型的图、有哪些主要元素、它们之间什么关系。比如画一个 React 前端 AWS 无服务器后端的认证流程包含登录、MFA 和会话管理。生成后继续聊着改。位置不对、想换颜色、要加一个模块直接说就行。图表是逐步成形的复杂图可以拆成几轮对话完成。几个提升出图质量的小经验给模型补充用途和受众背景技术图里用准确术语而不是模糊描述哪一块不满意立刻指出别攒到最后。下面这张灯泡不亮排查流程图就是用最简单的口语描述跑出来的决策树。支持哪些 AI 模型这是很多国产和海外模型都能接的通用底座配置集中在 lib/ai-providers.ts默认走 AWS Bedrock其余可选的包括OpenAIGPT 系列Anthropic ClaudeGoogle AI / Vertex AIGemini 系列Azure OpenAIOllama本地模型不花钱但吃机器配置DeepSeek、字节豆包、硅基流动 SiliconFlow、阿里 ModelScope、SGLangOpenRouter、AIHubMix、Vercel AI Gateway 等聚合网关官方建议用生成能力强的模型点名推荐 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro 和 DeepSeek V3.2/R1画 AWS/Azure/GCP 云架构图时 Claude 系列表现最稳因为它见过的云厂商组件图形最多。每个供应商怎么配环境变量docs/cn/ai-providers.md 里有逐项说明。如何部署到自己手上环境只要 Node.js 18 以上或 Docker。先克隆仓库并装依赖git clone https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io cd next-ai-draw-io npm install cp env.example .env.local打开.env.local填入你选用的供应商 API 密钥文件里每家都写了注释示例然后启动npm run dev浏览器访问 http://localhost:6002 就能用了。想用 Docker 的话项目提供了现成的镜像和编排文件具体步骤见 docs/cn/docker.md也可以直接发布到 Vercel、Cloudflare Workers 或腾讯云 EdgeOne Pages仓库里都有对应部署文档。进阶玩法给愿意往深处走的人留几个入口MCP 接入 AI 客户端项目自带一个 MCP ServerModel Context Protocol简单说就是让 Claude Desktop、Cursor、VS Code 这类 AI 工具能调用本项目的协议装好后在客户端里说画一个登录流程图浏览器里会实时出图详见 packages/mcp-server/。服务端多模型管理员可以在AI_MODEL里逗号分隔填多个模型或改用ai-models.json统一管理全体用户无需各自配密钥。管理面板设置ADMIN_PASSWORD环境变量后访问/admin改模型、访问码、配额等配置都不用再手改文件。聊天核心接口前后端对话的主逻辑在 app/api/chat/route.ts想看 AI 是怎么把一句话变成图表 XML 的从这里读起。总结起来自备一个支持厂商的 API Key十分钟就能跑起自己的 AI 图表生成环境。建议第一张图从最常见的场景试起——画一个带登录和会话管理的认证流程图跑通之后再去尝试图片复刻、PDF 转图和 MCP 集成。【免费下载链接】next-ai-draw-ioA next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.项目地址: https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考