Next AI Draw.io 文件上传3 步把图片变成可编辑 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-io手里有一份 AWS 架构图或故障排查流程图要改造成能编辑的 draw.io 图表放进汇报材料不必逐个框和连线重画。Next AI Draw.io 的文件上传功能可以接收这类图片AI 直接识别其中的图形与连接关系生成对应的 draw.io XML随后就能拖动布局、改配色并自由导出。 能力总览图片PNG/JPG/GIF 等常见格式PDF 与文本.pdf/.md/.json/.csv/.xml云架构图场景AWS/Azure/GCP 图复刻流程图场景排查流程、判断分支图️ 先看效果这是由上传的图片生成出的 AWS 架构图User、EC2、S3、Bedrock、DynamoDB 的方框和箭头连接都被还原出来。上传前只有一张静态图片改动只能重画生成后每个图形都变成可拖动、可改色的独立元素连线也能重新指向。 上手步骤准备源文件挑一张清晰可读的图片或文档手绘风格也可以重点是文字和箭头能分辨。上传到聊天框在聊天输入区点击上传按钮或直接把文件拖进输入框入口实现见 components/chat-input.tsx。接受格式为 image/、.pdf、text/、.md、.json、.csv、.xml、.yaml、.tomlPDF 和文本文件由 lib/use-file-processor.tsx 自动提取文字。上图这类排查流程图是典型场景判断菱形、Yes/No 分支、动作方框都能被识别。等待生成文件旁补一句“复刻这张图”后发送AI 输出 draw.io XML画布直接渲染出可编辑图表。保存并微调通过保存对话框存下文件之后可继续用自然语言指令调整细节。⚠️ 避坑清单PDF 上传被移除文档提取出的文字超过 15 万字符上限由 NEXT_PUBLIC_MAX_EXTRACTED_CHARS 控制系统会自动丢弃该文件。解决拆分文档分批上传或只截单页内容。图片模糊导致识别错位分辨率低、压缩重的图片视觉模型难以读清文字和箭头。解决换一张高分辨率、对比度高的截图。上传后无法发送文件格式不在 accept 列表内。解决另存为 PNG或改用受支持的文本格式。⚙️ 进阶配置识别效果不满意时可在模型设置里换用视觉能力更强的模型GPT-4o、Claude、Gemini 均支持。各提供商的配置说明见 docs/ai-providers.md。如果手头正压着几张“只能看不能动”的架构图先挑最容易的一张上传验证生成效果再逐张转换。生成的图表完全可编辑之后需要改图时直接在画布上完成即可。【免费下载链接】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），仅供参考