Next AI Draw.io

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

English | 中文 | 日本語

🚀 Live Demo

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.

20251110_draw_io_demo.mp4

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 a **animated connector** diagram of transformer's architecture.
GCP architecture diagram Prompt: Generate a GCP architecture diagram with **GCP icons**. In this diagram, users connect to a frontend hosted on an instance.	AWS architecture diagram Prompt: Generate a AWS architecture diagram with **AWS icons**. In this diagram, users connect to a frontend hosted on an instance.
Azure architecture diagram Prompt: Generate a Azure architecture diagram with **Azure icons**. In this diagram, users connect to a frontend hosted on an instance.	Cat sketch prompt 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
• Anthropic
• Google AI
• Azure OpenAI
• Ollama
• OpenRouter
• DeepSeek

All providers except AWS Bedrock and OpenRouter support custom endpoints.

📖 Detailed Provider Configuration Guide - See setup instructions for each provider.

Model Requirements: This task requires strong model capabilities for generating long-form text with strict formatting constraints (draw.io XML). Recommended models include Claude Sonnet 4.5, GPT-4o, Gemini 2.0, and DeepSeek V3/R1.

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.

Getting Started

Run with Docker (Recommended)

If you just want to run it locally, the best way is to use Docker.

First, install Docker if you haven't already: Get Docker

Then run:

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

Open http://localhost:3000 in your browser.

Replace the environment variables with your preferred AI provider configuration. See Multi-Provider Support for available options.

Installation

1. Clone the repository:

git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io

2. Install dependencies:

npm install
# or
yarn install

3. Configure your AI provider:

Create a .env.local file in the root directory:

cp env.example .env.local

Edit .env.local and configure your chosen provider:

• Set AI_PROVIDER to your chosen provider (bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek)
• Set AI_MODEL to the specific model you want to use
• Add the required API keys for your provider
• ACCESS_CODE_LIST: Optional access password(s), can be comma-separated for multiple passwords.

Warning: If you do not set ACCESS_CODE_LIST, anyone can access your deployed site directly, which may lead to rapid depletion of your token. It is recommended to set this option.

See the Provider Configuration Guide for detailed setup instructions for each provider.

4. Run the development server:

npm run dev

5. Open http://localhost:3000 in your browser to see the application.

Deployment

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.

Or you can deploy by this button.

Be sure to set the environment variables in the Vercel dashboard as you did in your local .env.local file.

Project Structure

app/                  # Next.js App Router
  api/chat/           # Chat API endpoint with AI tools
  page.tsx            # Main page with DrawIO embed
components/           # React components
  chat-panel.tsx      # Chat interface with diagram control
  chat-input.tsx      # User input component with file upload
  history-dialog.tsx  # Diagram version history viewer
  ui/                 # UI components (buttons, cards, etc.)
contexts/             # React context providers
  diagram-context.tsx # Global diagram state management
lib/                  # Utility functions and helpers
  ai-providers.ts     # Multi-provider AI configuration
  utils.ts            # XML processing and conversion utilities
public/               # Static assets including example images

TODOs

• Allow the LLM to modify the XML instead of generating it from scratch everytime.
• Improve the smoothness of shape streaming updates.
• Add multiple AI provider support (OpenAI, Anthropic, Google, Azure, Ollama)
• Solve the bug that generation will fail for session that longer than 60s.
• Add API config on the UI.

Support & Contact

If you find this project useful, please consider sponsoring to help me host the live demo site!

For support or inquiries, please open an issue on the GitHub repository or contact the maintainer at:

• Email: me[at]jiang.jp

Star History

---