3 つの使い方
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、Web ページをアップロードすると、AI が編集できる図に描き直します。
本物のクラウドアイコン
AWS、Azure、GCP、Kubernetes、Cisco などの図形ライブラリを内蔵。構成図に公式アイコンが使われます。
アニメーションするコネクタ
コネクタで流れの向きを示せます。データパイプラインやリクエストの経路に便利です。
バージョンを比較
どのバージョンもキャンバスと並べて変更点を確認し、復元するか続けるかを選べます。
draw.io でそのまま使える
.drawio ファイルとして保存すれば draw.io で編集を続けられます。PNG や SVG にも書き出せます。
自分でホストする
Apache-2.0 のオープンソースです。Docker や Cloudflare で動かせるほか、完全にオフラインでも使えます。 セルフホストのガイド
いつもの AI プロバイダーで使えます
設定でプロバイダーとモデルを選び、自分のキーを入れるだけです。キーはブラウザに保存され、サーバーには保存されません。
- 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