Next AI Draw.io

Overview

next-ai-draw-io is an open-source Next.js web application that combines the power of Large Language Models (LLMs) with the widely-used diagramming tool draw.io. It enables users to create, modify, and enhance professional diagrams simply by typing natural language instructions in a chat interface — no manual drag-and-drop required.

The project was built to bridge the gap between conversational AI and visual diagram creation, making it easy for developers, architects, and non-technical users alike to produce high-quality diagrams in seconds.

Key Features

🧠 LLM-Powered Diagram Creation

Users can describe what they want in plain English (or other languages), and the AI generates the corresponding draw.io XML diagram automatically. Commands can range from simple requests like "draw a flowchart" to complex ones like "generate an AWS architecture with a load balancer, EC2 instances, and an RDS database."

🖼️ Image-Based Diagram Replication

Users can upload an existing diagram image or screenshot, and the AI will analyze it and replicate it as an editable draw.io diagram. This is particularly useful for digitizing hand-drawn sketches or recreating diagrams from documentation.

📜 Diagram Version History

Every change made to a diagram is tracked. Users can browse through the full version history and restore any previous state, providing a safety net when experimenting with AI-generated modifications.

💬 Interactive Chat Interface

A real-time chat panel allows users to iteratively refine their diagrams. Users can say things like "make the arrows animated" or "add a database node connected to the API server," and the diagram updates accordingly.

☁️ Cloud Architecture Support

The tool has specialized support for generating architecture diagrams for major cloud providers:

AWS (with official AWS icons)
GCP (with GCP icons)
Azure (with Azure icons)

🎨 Animated Connectors

Supports creating animated, dynamic connectors between diagram nodes for more expressive and visually engaging diagrams.

Tech Stack

Technology	Role
Next.js 15	Frontend framework & API routing
TypeScript	Type-safe codebase
Vercel AI SDK	Streaming AI responses, multi-provider abstraction
react-drawio	Diagram rendering & manipulation
Tailwind CSS + shadcn/ui	UI components & styling
Docker	Containerized deployment

Multi-Provider LLM Support

The application abstracts LLM provider configuration, allowing users to plug in any of the following:

AWS Bedrock (default)
OpenAI / OpenAI-compatible APIs
Anthropic (Claude)
Google AI (Gemini)
Azure OpenAI
Ollama (local LLMs)
OpenRouter
DeepSeek

Note: claude-sonnet-4-5 is particularly recommended for AWS architecture diagrams, as it has been trained on draw.io diagrams with AWS logos.

Project Structure

app/
  api/chat/           # Chat API endpoint with AI tool calls
  page.tsx            # Main application page
components/
  chat-panel.tsx      # Chat UI & diagram control
  chat-input.tsx      # Input with file upload support
  history-dialog.tsx  # Version history viewer
  ui/                 # Reusable UI components
contexts/
  diagram-context.tsx # Global diagram state management
lib/
  ai-providers.ts     # Multi-provider AI configuration
  utils.ts            # XML processing utilities
public/               # Static assets & demo SVGs

Getting Started

Quick Start with Docker

docker run -d -p 3000:3000 \
  -e AI_PROVIDER=openai \
  -e AI_MODEL=gpt-4o \
  -e OPENAI_API_KEY=your_api_key \
  ghcr.io/dayuanjiang/next-ai-draw-io:latest

Then open http://localhost:3000 in your browser.

Manual Installation

# Clone the repository
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io

# Install dependencies
npm install

# Configure environment
cp env.example .env.local
# Edit .env.local with your AI provider settings

# Run development server
npm run dev

Deploy to Vercel

Click the button below or follow the Next.js deployment docs:

Use Case Examples

Prompt	Output
"Give me an animated connector diagram of transformer's architecture."	Transformer architecture diagram with animated connectors
"Generate a GCP architecture diagram with GCP icons."	Full GCP cloud architecture SVG
"Generate an AWS architecture diagram with AWS icons."	AWS cloud architecture with official icons
"Generate an Azure architecture diagram with Azure icons."	Azure cloud architecture diagram
"Draw a cute cat for me."	Illustrated cat drawing in draw.io format

Community & Support

Issues: https://github.com/DayuanJiang/next-ai-draw-io/issues
Sponsor: https://github.com/sponsors/DayuanJiang