大家好，我是 Java陈序员。
在日常工作中，我们常常要绘制架构图、流程图等。
你是否也曾经历过这些场景：对着空白的 Draw.io 界面发呆，想画个系统架构图却不知从何下手？花两小时调整流程图布局，结果元素还是挤成一团？好不容易画完的云架构图，领导一句“重新排版”让你心态崩溃？
今天，给大家推荐一款制图神器，用 AI 帮助你轻松绘制专业图表！
项目介绍next-ai-draw-io —— 一个集成了 AI 功能的 Next.js 网页应用，与 Draw.io 图表无缝结合，通过自然语言命令和 AI 辅助可视化来创建、修改和增强图表。
功能特色：
LLM 驱动的图表创建：利用大语言模型，通过文字描述直接创建流程图、架构图等各类图表，无需手动拖拽元素交互式聊天界面：支持与 AI 实时对话对现有图表进行精准修改，包括添加元素、调整布局、修改样式等，并且可查看 AI 生成图表的推理过程图像识别与复刻：支持上传现有图表图片，AI 自动识别并生成可编辑的版本，保留原风格与布局文档解析：支持上传 PDF、TXT、MD 等格式文件，提取内容并转化为结构化图表版本历史：自动保存每一次修改记录，可随时查看和恢复之前的版本灵活导出：支持通过 Draw.io 工具栏将图表导出为 .drawio、.svg、.png 等格式支持多模型和离线部署：可配置多种 AI 提供商，并支持通过 Docker 本地部署支持的 AI 提供商：AWS Bedrock（默认）、OpenAI、Anthropic、Google AI、Azure OpenAI、Ollama、OpenRouter、DeepSeek、SiliconFlow
快速上手next-ai-draw-io 支持 Docker 部署，可通过 Docker 快速部署。
1、拉取镜像
docker pull ghcr.io/dayuanjiang/next-ai-draw-io:latest2、运行容器
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或者使用指定配置文件 .env 的方式部署：
docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest.env 配置文件的内容可参考：
# AI 提供商配置，可选项: bedrock、openai、anthropic、google、azure、ollama、openrouter、deepseek、siliconflow # 默认: bedrock AI_PROVIDER=bedrock # AI 大模型（必填） AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0 ### 下面根据 AI 提供商开启配置对应的 API_KEY # AWS Bedrock pei # AWS_REGION=us-east-1 # AWS_ACCESS_KEY_ID=your-access-key-id # AWS_SECRET_ACCESS_KEY=your-secret-access-key # Note: Claude and Nova models support reasoning/extended thinking # BEDROCK_REASONING_BUDGET_TOKENS=12000 # Optional: Claude reasoning budget in tokens (1024-64000) # BEDROCK_REASONING_EFFORT=medium # Optional: Nova reasoning effort (low/medium/high) # OpenAI Configuration # OPENAI_API_KEY=sk-... # OPENAI_BASE_URL=https://api.openai.com/v1 # Optional: Custom OpenAI-compatible endpoint # OPENAI_ORGANIZATION=org-... # Optional # OPENAI_PROJECT=proj_... # Optional # Note: o1/o3/gpt-5 models automatically enable reasoning summary (default: detailed) # OPENAI_REASONING_EFFORT=low # Optional: Reasoning effort (minimal/low/medium/high) - for o1/o3/gpt-5 # OPENAI_REASONING_SUMMARY=detailed # Optional: Override reasoning summary (none/brief/detailed) # Anthropic (Direct) Configuration # ANTHROPIC_API_KEY=sk-ant-... # ANTHROPIC_BASE_URL=https://your-custom-anthropic/v1 # ANTHROPIC_THINKING_TYPE=enabled # Optional: Anthropic extended thinking (enabled) # ANTHROPIC_THINKING_BUDGET_TOKENS=12000 # Optional: Budget for extended thinking in tokens # Google Generative AI Configuration # GOOGLE_GENERATIVE_AI_API_KEY=... # GOOGLE_BASE_URL=https://generativelanguage.googleapis.com/v1beta # Optional: Custom endpoint # GOOGLE_CANDIDATE_COUNT=1 # Optional: Number of candidates to generate # GOOGLE_TOP_K=40 # Optional: Top K sampling parameter # GOOGLE_TOP_P=0.95 # Optional: Nucleus sampling parameter # Note: Gemini 2.5/3 models automatically enable reasoning display (includeThoughts: true) # GOOGLE_THINKING_BUDGET=8192 # Optional: Gemini 2.5 thinking budget in tokens (for more/less thinking) # GOOGLE_THINKING_LEVEL=high # Optional: Gemini 3 thinking level (low/high) # Azure OpenAI Configuration # Configure endpoint using ONE of these methods: # 1. AZURE_RESOURCE_NAME - SDK constructs: https://{name}.openai.azure.com/openai/v1{path} # 2. AZURE_BASE_URL - SDK appends /v1{path} to your URL # If both are set, AZURE_BASE_URL takes precedence. # AZURE_RESOURCE_NAME=your-resource-name # AZURE_API_KEY=... # AZURE_BASE_URL=https://your-resource.openai.azure.com/openai # Alternative: Custom endpoint # AZURE_REASONING_EFFORT=low # Optional: Azure reasoning effort (low, medium, high) # AZURE_REASONING_SUMMARY=detailed # Ollama (Local) Configuration # OLLAMA_BASE_URL=http://localhost:11434/api # Optional, defaults to localhost # OLLAMA_ENABLE_THINKING=true # Optional: Enable thinking for models that support it (e.g., qwen3) # OpenRouter Configuration # OPENROUTER_API_KEY=sk-or-v1-... # OPENROUTER_BASE_URL=https://openrouter.ai/api/v1 # Optional: Custom endpoint # DeepSeek Configuration # DEEPSEEK_API_KEY=sk-... # DEEPSEEK_BASE_URL=https://api.deepseek.com/v1 # Optional: Custom endpoint # SiliconFlow Configuration (OpenAI-compatible) # Base domain can be .com or .cn, defaults to https://api.siliconflow.com/v1 # SILICONFLOW_API_KEY=sk-... # SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1 # Optional: switch to https://api.siliconflow.cn/v1 if needed # Langfuse Observability (Optional) # Enable LLM tracing and analytics - https://langfuse.com # LANGFUSE_PUBLIC_KEY=pk-lf-... # LANGFUSE_SECRET_KEY=sk-lf-... # LANGFUSE_BASEURL=https://cloud.langfuse.com # EU region, use https://us.cloud.langfuse.com for US # Temperature (Optional) # Controls randomness in AI responses. Lower = more deterministic. # Leave unset for models that don't support temperature (e.g., GPT-5.1 reasoning models) # TEMPERATURE=0 # Access Control (Optional) # ACCESS_CODE_LIST=your-secret-code,another-code # Draw.io Configuration (Optional) # NEXT_PUBLIC_DRAWIO_BASE_URL=https://embed.diagrams.net # Default: https://embed.diagrams.net # Use this to point to a self-hosted draw.io instance # PDF Input Feature (Optional) # Enable PDF file upload to extract text and generate diagrams # Enabled by default. Set to "false" to disable. # ENABLE_PDF_INPUT=true # NEXT_PUBLIC_MAX_EXTRACTED_CHARS=150000 # Max characters for PDF/text extraction (default: 150000)3、容器运行成功后，访问
http://{IP/域名}:3000如果没有在启动命令中指定 AI 提供商信息和配置文件，也可以在使用过程中再进行配置。
功能体验next-ai-draw-io 的使用十分简单，只需要在对话框中输入提示词，就可以帮你生成。
如工作中经常涉及到的架构图：
提示词：K8S架构图。
然后你可以利用 Draw.io 强大的绘图能力进行自定义修改，也可以通过 AI 对话让它帮你修改，比如改成动画连接线。
UML 类图：
提示词：用 UML 类图展示用户权限管理模块的设计。
时序图：
提示词：时序图展示用户登录的交互过程。
ER 图：
提示词：绘制会员系统的数据库 ER 图。
当然了，在枯燥无聊的工作中，我们也可以让它帮忙绘制一些沙雕图。
提示词：一个帅哥在打篮球。
本地开发1、克隆仓库
git clone https://github.com/DayuanJiang/next-ai-draw-io cd next-ai-draw-io2、安装依赖
npm install3、在根目录创建 .env.local 文件配置 AI 提供商
cp env.example .env.local编辑 .env.local 并配置您选择的提供商：
将 AI_PROVIDER 设置为您选择的提供商（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow）将 AI_MODEL 设置为您要使用的特定模型添加您的提供商所需的 API 密钥TEMPERATURE：可选的温度设置（例如 0 表示确定性输出）。对于不支持此参数的模型（如推理模型），请不要设置ACCESS_CODE_LIST 访问密码，可选，可以使用逗号隔开多个密码4、启动运行
npm run dev5、运行成功后，浏览器访问
http://localhost:6002可以说，无论是技术人员需要的架构图，还是产品经理必备的业务流程图，甚至是随手画的创意草图，next-ai-draw-io 这款工具都能轻松搞定。快去部署试试吧~
项目地址：https://github.com/DayuanJiang/next-ai-draw-io最后推荐的开源项目已经收录到 GitHub 项目，欢迎 Star：
https://github.com/chenyl8848/great-open-source-project或者访问网站，进行在线浏览：
https://chencoding.top:8090/#/大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！