Next AI Draw.io
AI-Powered Diagram Creation Tool - Chat, Draw, Visualize
Next AI Draw.io is an innovative Next.js web application that seamlessly integrates Large Language Models (LLMs) with draw.io diagrams, enabling users to generate, edit, and visualize complex diagrams using simple natural language prompts. Whether you're an engineer diagramming cloud architectures, a designer sketching concepts, or anyone needing quick visualizations, this tool revolutionizes the workflow by combining conversational AI with professional diagramming.
Key Features
- LLM-Powered Diagram Creation: Harness powerful LLMs to build and manipulate draw.io-compatible diagrams directly from text descriptions. No manual drawing required.
- Image-Based Diagram Replication: Upload any existing diagram or image, and the AI will automatically replicate and enhance it, saving hours of recreation time.
- Diagram History & Version Control: Track every change with a full history log, allowing easy reversion to previous versions before AI edits.
- Interactive Chat Interface: Engage in real-time conversations with the AI to iteratively refine diagrams, ask for adjustments, or explore ideas.
- Specialized Architecture Support: Native generation of AWS, GCP, and Azure diagrams with official icons for professional cloud architecture visuals.
- Animated Connectors: Add dynamic, animated links between elements to make diagrams more engaging and easier to understand flows.
Examples in Action
The tool shines with diverse prompts:
| Prompt Example | Generated Diagram |
|---|---|
| "Give me an animated connector diagram of transformer's architecture." | Transformer with animated flows |
| "Generate a GCP architecture diagram with GCP icons. Users connect to a frontend on an instance." | GCP cloud setup |
| "Generate an AWS architecture diagram with AWS icons..." | AWS infrastructure |
| "Draw a cute cat for me." | Fun sketch from text |
These demonstrate versatility from technical architectures to casual drawings.
How It Works
Powered by:
- Next.js 15.x for robust frontend and routing.
- Vercel AI SDK for streaming responses and multi-LLM support.
- react-drawio for XML-based diagram rendering and editing.
Diagrams are stored as draw.io XML, which the AI generates or modifies based on user inputs. Recommended models like Claude Sonnet 4.5, GPT-4o, or DeepSeek V3 excel at producing valid XML with precise formatting.
Multi-Provider Support
Flexible integration with:
- AWS Bedrock (default)
- OpenAI
- Anthropic
- Google AI
- Azure OpenAI
- Ollama (local)
- OpenRouter
- DeepSeek
Custom endpoints available for most. Detailed setup in docs.
Getting Started
Docker (Easiest)
docker run -d -p 3000:3000 \
-e AI_PROVIDER=openai \
-e AI_MODEL=gpt-4o \
-e OPENAI_API_KEY=your_key \
ghcr.io/dayuanjiang/next-ai-draw-io:latestVisit localhost:3000. Live demo: next-ai-drawio.jiang.jp
Local Install
git clone https://github.com/DayuanJiang/next-ai-draw-ionpm install- Configure
.env.localwith AI keys. npm run dev
Deploy effortlessly to Vercel.
Project Impact
With over 4,000 stars and trending status, it's rapidly gaining traction for simplifying AI-assisted diagramming.
