三種使用方式
在 AI 代理裡
Claude Code、Cursor、Codex 和 VS Code 可以根據專案裡的檔案，在同一塊畫布上畫圖。
$ claude mcp add --scope user drawio -- npx @next-ai-drawio/mcp-server@latest範例
提示詞，以及 AI 根據它們畫出的圖表。 在圖庫裡查看全部範例
AWS 上的高可用 Web 應用
提示詞： Draw an AWS architecture for a highly available web app across two Availability Zones with AWS icons: Route 53, CloudFront with AWS WAF, an Application Load Balancer, ECS Fargate services in private subnets, Aurora PostgreSQL with a writer and a reader, ElastiCache for Redis, S3 for static assets, NAT gateways, and CloudWatch for monitoring.
模型： Claude Opus 5.5
帶動畫連線的 Transformer 架構
提示詞： Give me an animated connector diagram of transformer's architecture.
模型： Claude Opus 5.5
網店的 ER 圖
提示詞： Draw an ER diagram for an online shop: customers, addresses, orders, order items, products, categories and payments, with primary and foreign keys and the cardinality of each relationship.
模型： Claude Opus 5.5
BPMN 報銷流程
提示詞： Draw a BPMN process for an expense claim: an employee submits it, the manager approves or rejects it, finance checks the receipts and pays, and the claim goes back to the employee when receipts are missing.
模型： Claude Opus 5.5
行動銀行的使用者旅程地圖
提示詞： Draw a customer journey map for a mobile banking app across five stages (discover, sign up, first payment, everyday use, get help), with the customer's actions, touchpoints, feelings and pain points in each stage, and an opportunity for each pain point.
模型： Claude Opus 5.5
編輯器裡還有
從圖片開始
上傳截圖、白板照片、PDF 或網頁，AI 會把它重畫成可以編輯的圖表。
真實的雲端圖示
內建 AWS、Azure、GCP、Kubernetes、Cisco 等圖形庫，架構圖用的是官方圖示。
動畫連接線
連接線可以顯示流向，適合資料管線和請求路徑。
比較版本
把任意版本和畫布放在一起，看清改了什麼，再決定還原還是繼續。
繼續在 draw.io 裡用
儲存為 .drawio 檔案後可以繼續在 draw.io 裡編輯，也可以匯出 PNG 和 SVG。
自行架設
以 Apache-2.0 授權開源。可以用 Docker、Cloudflare 架設，也可以完全離線執行。 架設指南
支援您正在用的 AI 服務商
在設定裡選擇服務商和模型，填入自己的 Key 即可。Key 只儲存在您的瀏覽器裡，不會存到伺服器上。
- OpenAI
- Anthropic
- DeepSeek
- Qwen (Alibaba)
- Doubao (ByteDance)
- GLM (Zhipu)
- Kimi (Moonshot)
- MiniMax
- MiMo (Xiaomi)
- OpenRouter
- AIHubMix
- SiliconFlow
- ModelScope
- Novita AI
- Atlas Cloud
- Qiniu
- AI Gateway
- Amazon Bedrock
- Google Vertex AI
- Azure OpenAI
- EdgeOne Pages
- Ollama
- SGLang
- OpenAI-compatible
OpenAI
Anthropic
Google
DeepSeek
Qwen (Alibaba)
GLM (Zhipu)
Kimi (Moonshot)
MiniMax
MiMo (Xiaomi)
OpenRouter
AIHubMix
SiliconFlow
ModelScope
Novita AI
Qiniu
AI Gateway
Azure OpenAI
EdgeOne Pages
Ollama