Next AI Draw.io

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

English | 中文 | 日本語

Live Demo · Docs · Gallery · Desktop App · MCP Server

https://github.com/user-attachments/assets/66b9f12f-219f-4d62-acc0-0725e6850eec

Describe a diagram in a sentence and the AI draws it on a real draw.io canvas. Edit it by hand like any draw.io file, or select a few shapes and tell the AI what to change. Every AI change is a version you can compare, restore or undo, and the result exports as .drawio, .png or .svg.

Available as a web app, a desktop app for Windows, macOS and Linux, and an MCP server for AI agents such as Claude Code, Cursor and VS Code.

Highlights

Draw

• Architecture diagrams, flowcharts, sequence diagrams and more from one sentence, with built-in AWS, Azure, GCP and Kubernetes icon libraries
• Connectors can carry a flowing animation
• Upload a screenshot or a sketch and the AI redraws it; upload PDF, Markdown, code and other text files and get a diagram of their content

Edit

• Edit by chat: changes stream onto the canvas and the shapes the AI just changed are highlighted
• Ask about a selection: select shapes on the canvas and the AI changes only those
• Versions and undo: every AI change is a version card with a thumbnail; compare it with the canvas, restore it or undo it, and Ctrl+Z on the canvas also takes back an AI change in one step
• It is a normal draw.io diagram: double-click to rename, drag, restyle, use several pages, and export as .drawio, .png, .svg or .drawio.svg at any time

Use

• 25 model providers, including an OpenAI-compatible preset for any other URL; enter your own API key in the browser and it stays on your machine
• Models that reason show their thinking
• Dark mode; the interface is available in English, Simplified Chinese, Traditional Chinese and Japanese

Examples

  <strong>Highly available web app on AWS</strong>
  <strong>Prompt:</strong> 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.
  <strong>Model:</strong> Claude Opus 5.5, in Claude Code with the MCP server
  


  <strong>Kubernetes deployment for a web shop</strong>
  <strong>Prompt:</strong> Draw a Kubernetes deployment for a web shop: an ingress, web and API deployments with their services and pods, a Redis StatefulSet with a persistent volume, a ConfigMap, a Secret, and an autoscaler on the API.
  <strong>Model:</strong> Claude Opus 5.5, in Claude Code with the MCP server
  




  <strong>ER diagram of an online shop</strong>
  <strong>Prompt:</strong> 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.
  <strong>Model:</strong> Claude Opus 5.5, in Claude Code with the MCP server
  


  <strong>BPMN expense claim process</strong>
  <strong>Prompt:</strong> 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.
  <strong>Model:</strong> Claude Opus 5.5, in Claude Code with the MCP server
  




  <strong>Transformer architecture with animated connectors</strong>
  <strong>Prompt:</strong> Give me an animated connector diagram of transformer's architecture.
  <strong>Model:</strong> Claude Opus 5.5, in Claude Code with the MCP server
  


  <strong>Customer journey map of a banking app</strong>
  <strong>Prompt:</strong> 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.
  <strong>Model:</strong> Claude Opus 5.5, in Claude Code with the MCP server
  

More examples, each with its prompt and model, are in the gallery.

Use it

Online demo

Open next-ai-drawio.jiang.jp, nothing to install. The demo has a usage limit; click the settings icon in the chat panel and enter your own provider and API key to lift it. The key stays in your browser and is never sent to the server for storage.

Desktop app

Download the Windows, macOS or Linux installer from the Releases page.

In your AI agent (MCP)

https://github.com/user-attachments/assets/6f53a67b-ab21-4113-9fee-7fb32f9de678

Through MCP (Model Context Protocol, the protocol AI agents use to call outside tools), Claude Desktop, Cursor, VS Code and others can draw draw.io diagrams directly. Add this to your client's MCP configuration:

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

In VS Code or Cursor, one click adds it:

For Claude Code, one command does it (--scope user makes it available in every project):

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

It is also a plugin in the Claude Code community marketplace (Claude Code 2.1.275 or later):

/plugin install