大家好，我是 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:latest

2、运行容器

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-io

2、安装依赖

npm install

3、在根目录创建 .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 dev

5、运行成功后，浏览器访问

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/#/

大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！

---