DayuanJiang/next-ai-draw-io

Next AI Draw.io

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

English | 中文 | 日本語

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.

https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1

Table of Contents

• Next AI Draw.io- [Table of Contents](#table-of-contents) - [Examples](#examples) - [Features](#features) - [MCP Server](#mcp-server) - [Claude Code CLI](#claude-code-cli) - [Getting Started](#getting-started) - [Try it Online](#try-it-online) - [Desktop Application](#desktop-application) - [Run with Docker](#run-with-docker) - [Installation](#installation) - [Deployment](#deployment) - [Deploy to EdgeOne Pages](#deploy-to-edgeone-pages) - [Deploy on Vercel](#deploy-on-vercel) - [Deploy on Cloudflare Workers](#deploy-on-cloudflare-workers) - [Multi-Provider Support](#multi-provider-support) - [Server-Side Multi-Model Configuration](#server-side-multi-model-configuration) - [Admin Panel](#admin-panel) - [How It Works](#how-it-works) - [Support \& Contact](#support--contact) - [FAQ](#faq) - [Star History](#star-history)

Examples

Here are some example prompts and their generated diagrams:

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
• PDF & Text File Upload: Upload PDF documents and text files to extract content and generate diagrams from existing documents
• AI Reasoning Display: View the AI's thinking process for supported models (OpenAI o1/o3, Gemini, Claude, etc.)
• 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
• Cloud Architecture Diagram Support: Specialized support for generating cloud architecture diagrams (AWS, GCP, Azure)
• Animated Connectors: Create dynamic and animated connectors between diagram elements for better visualization

MCP Server

Use Next AI Draw.io with AI agents like Claude Desktop, Cursor, and VS Code via MCP (Model Context Protocol).

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

Claude Code CLI

claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest

Then ask Claude to create diagrams:

The diagram appears in your browser in real-time!

See the MCP Server README for VS Code, Cursor, and other client configurations.

Getting Started

Try it Online

No installation needed! Try the app directly on our demo site:

Desktop Application

Download the native desktop app for your platform from the Releases page:

Supported platforms: Windows, macOS, Linux.

Run with Docker

Go to Docker Guide

Installation

1. 1Clone the repository:

git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local

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

1. 1Run the development server:

npm run dev

1. 1Open http://localhost:6002 in your browser to see the application.

Deployment

Deploy to EdgeOne Pages

You can deploy with one click using Tencent EdgeOne Pages.

Deploy by this button:

Check out the Tencent EdgeOne Pages documentation for more details.

Additionally, deploying through Tencent EdgeOne Pages will also grant you a daily free quota for DeepSeek models.

Deploy on Vercel

The easiest way to deploy is using Vercel, the creators of Next.js. Be sure to set the environment variables in the Vercel dashboard as you did in your local .env.local file.

See the Next.js deployment documentation for more details.

Deploy on Cloudflare Workers

Go to Cloudflare Deploy Guide

Multi-Provider Support

• ByteDance Doubao
• AWS Bedrock (default)
• OpenAI
• Anthropic
• Google AI
• Google Vertex AI
• Azure OpenAI
• Ollama
• OpenRouter
• AIHubMix
• DeepSeek
• SiliconFlow
• ModelScope
• SGLang
• Vercel AI Gateway

All providers except AWS Bedrock and OpenRouter support custom endpoints.

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

Server-Side Multi-Model Configuration

Administrators can configure multiple server-side models that are available to all users without requiring personal API keys. Configure via AI_MODELS_CONFIG environment variable (JSON string) or ai-models.json file. For a single-provider quick setup, list comma-separated model IDs in AI_MODEL.

Admin Panel

Set the ADMIN_PASSWORD environment variable and visit /admin to manage server settings (models, access codes, features, observability, quota) from a web panel instead of hand-editing .env.

📖 Admin Panel Guide — setup, precedence rules, and notes.

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-5.1, Gemini 3 Pro, and DeepSeek V3.2/R1.

Note that the claude series has been trained on draw.io diagrams with cloud architecture logos like AWS, Azure, GCP. So if you want to create cloud architecture diagrams, this is the best choice.

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.

Support & Contact

Special thanks to ByteDance Doubao for sponsoring the API token usage of the demo site! Register on the ARK platform to get 500K free tokens for all models!

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

FAQ

See FAQ for common issues and solutions.

Star History