3 つの使い方
AI エージェントから
Claude Code、Cursor、Codex、VS Code が、プロジェクトのファイルをもとに同じキャンバスに描きます。
$ claude mcp add --scope user drawio -- npx @next-ai-drawio/mcp-server@latest例
プロンプトと、そこから AI が描いた図です。 ギャラリーですべての例を見る
ResNet50 モデルアーキテクチャのアニメーション
プロンプト： Give me an animated architecture diagram of the ResNet50 model.
チャットアプリの RAG 構成
プロンプト： Generate a RAG architecture diagram for chat application. Use connected diagram for data ingestion
React と AWS による認証
プロンプト： Generate authentication process using React with AWS. Use Serverless architecture.
アジャイルスクラムのプロセス
プロンプト： Generate agile scrum workflow diagram for software development team.
オープンイノベーション
プロンプト： Create visualization of Henry Chesbrough's Open Innovation model.
エディタのその他の機能
画像から始める
スクリーンショット、ホワイトボードの写真、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