博客 / 詳情

返回

告別繁瑣操作！這款神器用 AI 輕鬆繪製專業圖表！

大家好，我是 Java陳序員。

在日常工作中，我們常常要繪製架構圖、流程圖等。

你是否也曾經歷過這些場景：對着空白的 Draw.io 界面發呆，想畫個系統架構圖卻不知從何下手？花兩小時調整流程圖佈局，結果元素還是擠成一團？好不容易畫完的雲架構圖，領導一句“重新排版”讓你心態崩潰？

今天，給大家推薦一款製圖神器，用 AI 幫助你輕鬆繪製專業圖表！

關注微信公眾號：【Java陳序員】，獲取開源項目分享、AI副業分享、超200本經典計算機電子書籍等。

項目介紹

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

我創建了一個開源項目交流羣，方便大家在羣裏交流、討論開源項目。

但是任何人在羣裏打任何廣告，都會被 T 掉。

如果你對這個交流羣感興趣或者在使用開源項目中遇到問題，可以通過如下方式進羣：

關注微信公眾號：【Java陳序員】，回覆【開源項目交流羣】進羣，或者通過公眾號下方的菜單添加個人微信，並備註【開源項目交流羣】，通過後拉你進羣。

大家的點贊、收藏和評論都是對作者的支持，如文章對你有幫助還請點贊轉發支持下，謝謝！
github , node.js , openai , 人工智能 , Docker
user avatar
0 位用戶收藏了這個故事！

發佈 評論

Some HTML is okay.