[Open Source] AI 繪圖助手：立即體驗，效率提升倒數計時！

用 Next AI Draw.io，讓 AI 幫你畫流程圖、架構圖！新手也能輕鬆上手！

你是否曾經為了畫一張流程圖、架構圖而苦惱？是不是覺得 draw.io 功能強大，但操作起來卻有點複雜？ 現在，有了 Next AI Draw.io，這些煩惱都可以解決了！它結合了 AI 的力量，讓你用自然語言就能輕鬆創建、修改各種圖表，就像跟 AI 聊天一樣簡單！

什麼是 Next AI Draw.io？

Next AI Draw.io 是一個基於 Next.js 框架開發的 Web 應用程式，它將 AI 功能整合到 draw.io 圖表中。你可以透過自然語言指令，讓 AI 協助你創建、修改、優化圖表。 不論是 AWS、GCP、Azure 的雲端架構圖，還是簡單的流程圖，都可以透過 AI 輕鬆生成。

簡單來說，Next AI Draw.io 就像是 draw.io 的 AI 助手，讓畫圖變得更直觀、更有效率。

Next AI Draw.io 有什麼厲害的功能？

• LLM-Powered Diagram Creation (LLM 驅動的圖表創建): 透過大型語言模型 (LLM)，用自然語言指令直接創建和修改 draw.io 圖表。 只要告訴 AI 你想要畫什麼，它就會自動幫你生成圖表。
• Image-Based Diagram Replication (基於圖像的圖表複製): 上傳現有圖表或圖片，讓 AI 自動複製並增強它們。 如果你有一張手繪的草圖，可以直接上傳，讓 AI 幫你轉換成精美的數位圖表。
• PDF & Text File Upload (PDF 和文字檔案上傳): 上傳 PDF 文件和文字檔案，提取內容並從現有文件中生成圖表。 這樣就不用再手動將文件內容整理成圖表，AI 會自動幫你完成。
• AI Reasoning Display (AI 推理顯示): 檢視 AI 對於支援模型 (OpenAI o1/o3、Gemini、Claude 等) 的思考過程。 讓你了解 AI 是如何理解你的指令並生成圖表的。
• Diagram History (圖表歷史記錄): 完整的版本控制，追蹤所有變更，讓你可以檢視和恢復 AI 編輯之前的圖表版本。 就像是圖表的時光機，隨時可以回到之前的版本。
• Interactive Chat Interface (互動式聊天介面): 與 AI 溝通，即時修改你的圖表。 如果對 AI 生成的圖表不滿意，可以直接用文字告訴它，AI 會根據你的回饋進行調整。
• Cloud Architecture Diagram Support (雲端架構圖支援): 專門支援生成雲端架構圖 (AWS、GCP、Azure)。 雲端工程師的福音！不用再手動繪製複雜的雲端架構圖，AI 可以快速生成。
• Animated Connectors (動態連接器): 在圖表元素之間創建動態和動畫連接器，以獲得更好的視覺化效果。 讓你的圖表更生動、更易於理解。

如何開始使用 Next AI Draw.io？

對於初學者來說，最簡單的方式就是直接到官方提供的線上 Demo 體驗：

• 線上 Demo 體驗: https://next-ai-drawio.jiang.jp/

點擊連結後，你就可以直接在瀏覽器上使用 Next AI Draw.io。

小提醒： 因為 Demo 站流量比較大，目前使用的是 minimax-m2 模型。 為了獲得最佳效果，建議自行架設並使用 Claude Sonnet 4.5 或 Claude Opus 4.5 模型。

使用自己的 API 金鑰

Demo 站為了避免被濫用，可能會有一些用量限制。 如果你想要更自由地使用，可以使用自己的 API 金鑰。 點擊聊天面板中的「設定」圖示，即可設定你的 AI Provider 和 API 金鑰。 你的金鑰會儲存在你的瀏覽器中，不會上傳到伺服器。

本地端安裝 (推薦 Docker)

如果你希望在自己的電腦上運行 Next AI Draw.io，最推薦的方式是使用 Docker。

1. 安裝 Docker: 如果你還沒有安裝 Docker，請先到 Docker 官網 下載並安裝。
2. 執行 Docker 指令:

   打開你的終端機，輸入以下指令：

   docker run -d -p 3000:3000 \
     -e AI_PROVIDER=openai \
     -e AI_MODEL=gpt-4o \
     -e OPENAI_API_KEY=你的 OpenAI API 金鑰 \
     ghcr.io/dayuanjiang/next-ai-draw-io:latest
   

   記得把 你的 OpenAI API 金鑰 換成你自己的 OpenAI API 金鑰。 如果你沒有 OpenAI API 金鑰，需要先到 OpenAI 官網申請。

   或者，你也可以使用 .env 檔案來設定環境變數：

   cp env.example .env
   # 編輯 .env 檔案，填入你的設定
   docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest
   

3. 打開瀏覽器: 在你的瀏覽器中輸入 http://localhost:3000，就可以開始使用 Next AI Draw.io 了。

其他安裝方式

如果你不想使用 Docker，也可以按照以下步驟進行安裝：

1. 複製程式碼:

   git clone https://github.com/DayuanJiang/next-ai-draw-io
   cd next-ai-draw-io
   

2. 安裝依賴:

   npm install
   

3. 設定 AI Provider:

   複製 env.example 檔案，並將其更名為 .env.local：

   cp env.example .env.local
   

   編輯 .env.local 檔案，設定你的 AI Provider 和 API 金鑰。

   • AI_PROVIDER: 設定你選擇的 Provider (例如：openai, anthropic, google)
   • AI_MODEL: 設定你想要使用的模型 (例如：gpt-4o, claude-3-opus-20240229)
   • OPENAI_API_KEY 或其他 Provider 要求的 API 金鑰

   強烈建議設定 ACCESS_CODE_LIST，避免他人濫用你的 API 金鑰。 可以設定多個密碼，用逗號分隔。

   詳細的 Provider 設定指南請參考：Provider Configuration Guide

4. 啟動開發伺服器:

   npm run dev
   

5. 打開瀏覽器: 在你的瀏覽器中輸入 http://localhost:3000，就可以開始使用 Next AI Draw.io 了。

實際應用範例

• 雲端架構圖： 假設你需要繪製一個 AWS 的架構圖，描述使用者如何透過 Application Load Balancer 連接到 EC2 執行個體。 你只需要輸入： “Generate a AWS architecture diagram with AWS icons. In this diagram, users connect to a frontend hosted on an instance behind Application Load Balancer.” AI 就會自動生成一個包含 AWS 圖示的架構圖。
• 流程圖： 想要畫一個使用者登入流程圖，包含登入、驗證、MFA 等步驟。 可以輸入：”Create a flowchart showing user authentication with login, MFA, and session management”。 AI 就會根據你的描述生成一個流程圖。
• 創意發想： 如果你想畫一隻可愛的貓，只需要輸入：”Draw a cute cat for me”。 AI 就會幫你畫一隻貓。

多種 AI Provider 支援

Next AI Draw.io 支援多種 AI Provider，你可以根據自己的需求選擇：

• AWS Bedrock (預設)
• OpenAI
• Anthropic
• Google AI
• Azure OpenAI
• Ollama
• OpenRouter
• DeepSeek
• SiliconFlow

建議使用 Claude Sonnet 4.5, GPT-5.1, Gemini 3 Pro, 或 DeepSeek V3.2/R1 等具有強大文字生成能力的模型。

特別是 Claude 系列模型，由於經過 draw.io 圖表的訓練，在生成包含 AWS、Azure、GCP 等雲端架構圖時，效果更佳。

如何部署 Next AI Draw.io？

最簡單的部署方式是使用 Vercel Platform，它是 Next.js 的官方部署平台。

1. 點擊 Deploy with Vercel 按鈕:
2. 設定環境變數: 在 Vercel 的 Dashboard 中，設定你在 .env.local 檔案中設定的環境變數。

總結

Next AI Draw.io 是一個非常實用的工具，它可以讓你用更直觀、更有效率的方式創建各種圖表。 即使你是一個 draw.io 新手，也可以透過 AI 的協助，輕鬆畫出專業的圖表。 快來試試 Next AI Draw.io，讓 AI 成為你的畫圖助手吧！

參考閱讀

https://github.com/DayuanJiang/next-ai-draw-io