如何用自然语言三步画好流程图和架构图：免费开源 next-ai-draw-io 完整教程

如何用自然语言三步画好流程图和架构图免费开源 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 是一个基于 Next.js 的免费开源 Web 应用你只需输入一句自然语言AI 就会自动生成 draw.io 图表并支持多轮对话继续修改。无需学习 draw.io 的操作细节适合需要画流程图、架构图的技术人员、设计师和普通用户。不知道 draw.io 怎么拖框连线这类场景正需要它想象一下这个场景你正在写技术方案中间缺一张认证流程图。打开 draw.io 之后你发现要调出矩形、菱形手动对齐间距、拉箭头、改字体十几分钟过去了图还是歪的。更常见的情况是你手头只有一张白板照片或 PDF 截图里面画着草图但没人会照着它重画一份能编辑的版本。next-ai-draw-io 解决的就是这类问题把从想法到一张可编辑图表的过程压缩成一次对话草图、PDF、旧图也能直接变成标准 draw.io 文件。四个核心能力覆盖从生成到精修1. 自然语言直接生成与对话修改你输入画一个用户登录流程图包含 MFA 和会话管理AI 会生成完整的 draw.io XML 并立刻渲染出来。后续不满意就继续说把 MFA 步骤移到登录后面用 AWS 图标。图表始终是可编辑的标准 draw.io 格式随时可以导出到自己的 draw.io 里继续画。2. 上传图片、PDF 自动转图表支持两类输入上传一张已有图表或截图让 AI 照着复刻需要视觉模型如 GPT、Claude Sonnet、Gemini 3 Pro上传 PDF 或文本文件自动提取内容后生成对应图表默认最多提取 150000 字符。文档转图这一步通常最省时间。3. 图表历史记录与一键恢复每一轮 AI 编辑都会留下版本。点一下历史面板就能看到改动前的状态并直接恢复不用担心 AI 把图改坏了回不去。4. 云架构图与动画连接器项目内置对 AWS、GCP、Azure 云架构图的专门支持官方建议这类图优先使用 Claude 系列模型因为它们在训练时见过大量带云厂商 Logo 的架构图。演示的动画连接器还能让连接线动起来用在演示文稿里效果不错。快速上手三步跑出第一张图第一步克隆并安装git clone https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io cd next-ai-draw-io npm install第二步配置 AI 供应商与模型cp env.example .env.local编辑.env.local设置AI_PROVIDER和AI_MODEL。默认供应商是 AWS Bedrock其他如 OpenAI、Anthropic、DeepSeek、Ollama本地模型等十几家都可以各家对应的密钥写法见 AI 供应商配置指南。第三步启动并确认生效npm run dev打开http://localhost:6002输入一句画一个灯泡故障排查流程图。看到右侧画布出现可编辑的图表就说明配置成功了。喜欢打包部署的话也可以直接用 Docker 方式运行或下载官方桌面应用支持 Windows、macOS、Linux。三组拿来即用的提示词示例排查类流程图生成结果类似下图画一个灯泡不亮的排查流程图是否插电 → 是否烧坏 → 更换灯泡把每个判断节点标上 Yes/No 分支用绿色表示解决方案节点系统架构类生成 React AWS 无服务器架构的用户认证流程图画一个聊天应用的 RAG 架构图数据接入部分用连通的子图把外部服务用 AWS 官方图标替换演示与创意类给 Transformer 架构图加上动画连接线创建 Henry Chesbrough 开放式创新模型的可视化画一只可爱的猫测试用AI 真能画这些提示词直接来自项目 README 的示例区复制即可使用。技术原理一句话变成 XML 的完整链路draw.io 的图表本质上是一段 XMLmxfile/mxCell结构。next-ai-draw-io 的链路是你的提示词 一份内置的 draw.io XML 结构指南一起发给 LLM模型通过 tool calling 输出或修改 XML前端用 Vercel AI SDK 流式接收再由 react-drawio 渲染成画布。因为输出的是标准格式所以生成的图在原生 draw.io 里完全可编辑。想深入的话可以从这几个模块看起Chat API 与 XML 结构指南模型遵循的 draw.io XML 规范系统提示词控制 AI 画图行为的核心指令图表校验逻辑生成后对 XML 的合法性检查AI 供应商适配各家模型与密钥的统一接入MCP Server让 Claude Desktop、Cursor 等 AI 客户端也能驱动画图MCP 这块值得单独说一句在客户端里配置好npx next-ai-drawio/mcp-server你就能在自己的 AI 编程工具里直接说帮我画个认证流程图图表会实时出现在浏览器里相当于把整个应用接成了 AI Agent 的工具。版本与默认参数速览以下数据全部来自仓库当前版本v0.4.16Apache 2.0 许可证项目默认值说明框架Next.js 16.x / React 19.x前端与路由开发端口6002npm run dev监听地址输出上限64000 tokensMAX_OUTPUT_TOKENS推理与 XML 共享可在设置页调整PDF/文本提取上限150000 字符NEXT_PUBLIC_MAX_EXTRACTED_CHARSdraw.io 嵌入地址embed.diagrams.net自托管时用NEXT_PUBLIC_DRAWIO_BASE_URL替换管理面板未开启设置ADMIN_PASSWORD后访问/admin管理模型与配额官方推荐的模型Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1。这类任务对长文本 严格格式约束要求较高小模型容易只输出思考过程不出图。常见问题排查导出 PDF 没有反应嵌入式 draw.io 不支持直接导出 PDF它依赖外部转换服务。改走这条路先导出为 PNG再打印成 PDF效果一样。内网/离线部署提示连不上 embed.diagrams.netNEXT_PUBLIC_DRAWIO_BASE_URL是构建时变量打包后才生效运行时改环境变量没用。正确做法用 Docker 同时部署jgraph/drawio镜像并在构建参数里传入该地址详见 离线部署文档。本地模型只思考不画图两个高频原因模型服务没开 tool calling如 vLLM 需要--enable-auto-tool-choice或参数太小。建议用 32B 以上参数并开启工具调用。上传图片提示未提供图片说明当前模型不支持视觉输入。换带视觉能力的模型即可名字里带vision或vl的一般都支持。把画图交给对话把编辑留给自己next-ai-draw-io 把会 draw.io从门槛变成了可选项你负责描述需求它负责输出标准、可编辑的图表文件历史版本兜底MCP 接口还能把它接进你现有的 AI 工作流。Apache 2.0 许可证意味着可以免费使用、修改和分发也欢迎你提交 Issue 反馈问题或贡献代码。从上面的三步上手流程开始今天就能画出自己的第一张图。【免费下载链接】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），仅供参考