This app is designed to run on Claude Opus 4.5 for best performance. However, due to higher-than-expected traffic, running the top-tier model has become cost-prohibitive. To avoid service interruptions and manage costs, I have switched the backend to Claude Haiku 4.5.
A Next.js web application that integrates AI capabilities with draw.io diagrams. Create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.
Features
- LLM-Powered Diagram Creation: Leverage Large Language Models to create and manipulate draw.io diagrams directly through natural language commands
- Image-Based Diagram Replication: Upload existing diagrams or images and have the AI replicate and enhance them automatically
- Diagram History: Comprehensive version control that tracks all changes, allowing you to view and restore previous versions of your diagrams before the AI editing
- Interactive Chat Interface: Communicate with AI to refine your diagrams in real-time
- AWS Architecture Diagram Support: Specialized support for generating AWS architecture diagrams
- Animated Connectors: Create dynamic and animated connectors between diagram elements for better visualization
Examples
Here are some example prompts and their generated diagrams:
Animated Transformer Connectors
Prompt: Give me an animated connector diagram of transformer's architecture.
GCP Architecture Diagram
Prompt: Generate a GCP architecture diagram with GCP icons. Users connect to a frontend hosted on an instance.
AWS Architecture Diagram
Prompt: Generate an AWS architecture diagram with AWS icons. Users connect to a frontend hosted on an instance.
Azure Architecture Diagram
Prompt: Generate an Azure architecture diagram with Azure icons. Users connect to a frontend hosted on an instance.
Cat Sketch
Prompt: Draw a cute cat for me.
How It Works
The application uses the following technologies:
- Next.js: For the frontend framework and routing
- Vercel AI SDK (
ai+@ai-sdk/*): For streaming AI responses and multi-provider support - react-drawio: For diagram representation and manipulation
Diagrams are represented as XML that can be rendered in draw.io. The AI processes your commands and generates or modifies this XML accordingly.
Multi-Provider Support
- AWS Bedrock (default)
- OpenAI / OpenAI-compatible APIs (via
OPENAI_BASE_URL) - Anthropic
- Google AI
- Azure OpenAI
- Ollama
- OpenRouter
- DeepSeek
Note that claude-sonnet-4-5 has trained on draw.io diagrams with AWS logos, so if you want to create AWS architecture diagrams, this is the best choice.
Support & Contact
If you find this project useful, please consider sponsoring to help host the live demo site!
For support or inquiries, please open an issue on the GitHub repository or contact: me[at]jiang.jp