ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Next AI Draw.io 上手指南:3 分钟部署 AI 绘图工具

Next AI Draw.io 上手指南:3 分钟部署 AI 绘图工具 Next AI Draw.io 上手指南3 分钟部署 AI 绘图工具【免费下载链接】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 图表。支持 Docker 一键部署、10 多种模型提供商和团队管理面板。本文带你从零跑起来一个实例并讲清模型选择和团队配置。先看到结果它长什么样界面只有两部分左边聊天面板右边绘图画布。流程是在聊天里输入需求比如画一个带负载均衡器和 3 个 EC2 实例的 AWS 架构图AI 在画布上生成对应图表包含组件和连接关系生成结果是标准 draw.io 图表可以继续拖动方框、改配色、导出 PNG/SVG上图就是 AI 生成的一张典型云架构用户请求进入 EC2EC2 再连接 S3、Bedrock 和 DynamoDB。这些组件和连线都由一句话产出不用你手动拖框连线。除了一句话画图它还能做什么文件转图表上传截图、PDF 或文本文件AI 提取内容后生成图表适合把旧文档、需求稿变成流程图图表历史AI 每次修改前的状态都留了版本不满意可以回滚不用担心改坏思考过程展示Claude、GPT o 系列、Gemini 等支持的模型会展示 AI 的推理过程方便你判断它为什么这么画接入 MCP通过next-ai-drawio/mcp-server可以接入 Claude Desktop、VS Code 等客户端在 AI 对话里直接生成图表云架构优化内置 AWS、GCP、Azure 的组件图标画云架构图时图标对得上不用手绘方框代替先试这三句开箱即用的提示词第一次用不用自己找场景下面这三句可以直接复制画一个灯泡故障排查流程图——生成带是否判断分支的排查决策流程生成微服务架构API 网关、用户服务、订单服务、支付服务给我一张聊天应用的 RAG 架构图第一句生成的效果大致是这样提醒一点生成质量明显受模型影响。如果第一次输出比较乱大概率是模型没选对下一节讲怎么挑。Docker 一条命令部署3 分钟拿到可用页面Docker 是跑起来的最快路径。下面的命令会拉取镜像、注入 AI 提供商配置并启动服务docker run -d -p 3000:3000 \ -e AI_PROVIDERopenai \ -e AI_MODELgpt-4o \ -e OPENAI_API_KEYyour_api_key \ ghcr.io/dayuanjiang/next-ai-draw-io:latest运行完在浏览器打开 http://localhost:3000 就能用。端口映射、环境变量文件等细节在 docs/cn/docker.md 里。内网环境访问不了在线 draw.io 服务的话项目文档里有专门的离线部署说明。想改代码本地开发流程如果要加功能或调试可以从源码跑起来。以下命令克隆仓库、装依赖并启动开发服务器git clone https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io cd next-ai-draw-io npm install cp env.example .env.local npm run dev启动后浏览器打开 http://localhost:6002 即可。模型配置都写在.env.local里env.example列出了所有可配置项及注释照抄改值就行。选模型画图这件事对模型很挑剔一个容易忽略的点AI 需要输出大段格式严格的 draw.io XML普通聊天模型不一定稳定。项目文档推荐长文本输出和格式约束能力强的模型比如 Claude Sonnet 4.5、GPT-5、Gemini 3 Pro、DeepSeek V3/R1。常见选择对比模型特点适合场景Claude针对 draw.io 云架构训练过格式稳定AWS/Azure/GCP 云架构图GPT 系列通用性强、响应快日常流程图、UMLGemini多模态可结合图片输入参照现有图片复刻豆包中文表现好有免费额度中文用户、成本敏感配置只需改三个变量写在.env.local或用 Docker-e传入AI_PROVIDERopenai AI_MODELgpt-4o OPENAI_API_KEYsk-...注意每个提供商的密钥变量名不同豆包是DOUBAO_API_KEYGoogle 是GOOGLE_GENERATIVE_AI_API_KEY等完整对照见 docs/cn/ai-providers.md。团队使用管理面板与访问控制多人共用时不必让每个人各自配密钥设置ADMIN_PASSWORD环境变量后访问/admin路径得到网页管理面板在面板里配置服务端模型所有用户开箱即用无需个人密钥用ACCESS_CODE_LIST发放访问码控制谁能用配额功能控制使用频率小团队这样配一次就能跑起来面板能改哪些项、优先级规则见 docs/cn/admin-panel.md。下一步按你的情况选一条只想先玩起来把Docker 一条命令部署那节的命令替换成你自己的 API Key 执行打开 localhost:3000 开画想挑模型打开项目docs/cn/目录下的 ai-providers 配置文档按你手上的密钥类型照抄变量遇到问题先查项目docs/cn/FAQ.md里的常见问题再考虑提 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),仅供参考
返回列表