Next AI Draw.io

Draw and edit draw.io diagrams by chatting with an AI

Describe a diagram and the AI draws it on a real draw.io canvas. Every change it makes is outlined and saved as a version you can restore.

Open the editor Read the docs Use it from Claude Code

Describe your diagram or upload a file...

Three ways to use it

In the browser

Nothing to install. Add your own API key to lift the demo's daily limit.

Open the editor

On your desktop

The same app for Windows, macOS and Linux.

Download the latest release

In your AI agent

Claude Code, Cursor, Codex and VS Code draw from your project's files on the same canvas.

$ claude mcp add --scope user drawio -- npx @next-ai-drawio/mcp-server@latest

Other clients and details

Examples

Prompts and the diagrams the AI drew from them. See all examples in the gallery

Highly available web app on AWS — Highly available web app on AWS
Prompt: 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.
Model: Claude Opus 5.5

Transformer architecture with animated connectors — Transformer architecture with animated connectors
Prompt: Give me an animated connector diagram of transformer's architecture.
Model: Claude Opus 5.5

ER diagram of an online shop — ER diagram of an online shop
Prompt: 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.
Model: Claude Opus 5.5

BPMN expense claim process — BPMN expense claim process
Prompt: 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.
Model: Claude Opus 5.5

Customer journey map of a banking app — Customer journey map of a banking app
Prompt: 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.
Model: Claude Opus 5.5

Also in the editor

Start from a picture

Upload a screenshot, a whiteboard photo, a PDF or a web page, and the AI redraws it as a diagram you can edit.

Real cloud icons

Shape libraries for AWS, Azure, GCP, Kubernetes, Cisco and more, so architecture diagrams use the official icons.

Animated connectors

Connectors can show the direction of the flow, for data pipelines and request paths.

Compare versions

Open any version next to the canvas to see what changed, then restore it or keep going.

Keep it in draw.io

Save a .drawio file to keep editing in draw.io, or export PNG and SVG.

Host it yourself

Open source under Apache-2.0. Run it with Docker, on Cloudflare or fully offline. Self-hosting guides

Works with the AI provider you already use

Pick a provider and a model in Settings and enter your own key. The key is kept in your browser and never stored on the server.

OpenAI
Anthropic
Google
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

Describe your next diagram

Open the editor Read the docs GitHub