三种使用方式
在 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