Happybreeding DrawIO AI

Happybreeding DrawIO AI

AI-Powered Diagram Creation Tool - Chat, Draw, Visualize

English|中文|日本語

Usage Limits & Scaling (Or: Why My Wallet is Crying)

The response to this project has been incredible—you all love making diagrams! However, this enthusiasm means we are frequently hitting the AI API rate limits (TPS/TPM). When this happens, the system pauses, leading to failed requests.

As an indie developer, I am currently footing the entire API bill. To keep the lights on and ensure the service remains available to everyone without sending me into debt, I have implemented the following temporary caps:

Token Usage
50k/min
500k/day
Daily Requests
20
requests

Call for Sponsorship

Scaling the backend is the only way to remove these limits. I am actively seeking sponsorship from AI API providers or Cloud Platforms.

In return for support (credits or funding), I will prominently feature your company as a platform sponsor on both the GitHub repository and the live demo site.

Contact Me

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.

Transformer Architecture with Animated Connectors

GCP Architecture Diagram

Prompt: Generate a GCP architecture diagram with GCP icons. Users connect to a frontend hosted on an instance.

GCP Architecture Diagram

AWS Architecture Diagram

Prompt: Generate an AWS architecture diagram with AWS icons. Users connect to a frontend hosted on an instance.

AWS Architecture Diagram

Azure Architecture Diagram

Prompt: Generate an Azure architecture diagram with Azure icons. Users connect to a frontend hosted on an instance.

Azure Architecture Diagram

Cat Sketch

Prompt: Draw a cute cat for me.

Cat Drawing

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

Open Editor
About - Happybreeding DrawIO AI