next-ai-draw-io README

The project's README from github.com/DayuanJiang/next-ai-draw-io. As one markdown file: README.md.

Next AI Draw.io

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

English | 中文 | 日本語

TrendShift

License: Apache 2.0 Next.js React Sponsor

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.

Note: Thanks to ByteDance Doubao sponsorship, the demo site now uses the powerful glm-4.7 model!

Atlas Cloud

🎁 Thanks to Atlas Cloud for sponsoring next-ai-draw-io. Its OpenAI-compatible API gives diagram workflows one provider connection for DeepSeek, Qwen, GLM, Kimi, MiniMax, and more. Budget-friendly access is available through the Coding Plan.

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

Table of Contents

Examples

Here are some example prompts and their generated diagrams:

Animated transformer connectors

Prompt: Give me a **animated connector** diagram of transformer's architecture.

Transformer Architecture with Animated Connectors
RAG Technique Diagram

Prompt: Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion

RAG Architecture Diagram 		Authentication using React and AWS

Prompt: Generate authentication process using React with **AWS**. Use Serverless architecture.

Authentication Architecture Diagram
Open Innovation

Prompt: Create visualization of Henry Chesbrough's Open Innovation model.

Open Innovation Diagram 		Cat sketch

Prompt: Draw a cute cat for me.

Cat Drawing

Features

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:

"Create a flowchart showing user authentication with login, MFA, and session management"

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:

Live Demo

Bring Your Own API Key: You can use your own API key to bypass usage limits on the demo site. Click the Settings icon in the chat panel to configure your provider and API key. Your key is stored locally in your browser and is never stored on the server.

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. Clone 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. Run the development server:
npm run dev
  1. Open 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:

Deploy to EdgeOne Pages

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

Deploy with 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

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:

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!

Special thanks to Atlas Cloud for sponsoring next-ai-draw-io and supporting its multi-provider ecosystem! Try its OpenAI-compatible LLM API through the Atlas Cloud Coding Plan.

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:

FAQ

See FAQ for common issues and solutions.

Star History

Star History Chart

next-ai-draw-io (DayuanJiang/next-ai-draw-io)

architecture-diagram
Searching Database…

36.3K ·GitHub
Next-ai-draw-io
What is this?A Next.js web app that lets you create and edit draw.io diagrams by chatting with an AI in natural language, instead of manually dragging shapes.
Is this a standalone drawing app or does it still need draw.io?It's a web app built around the react-drawio component; diagrams are stored and rendered as draw.io XML, with an AI layer on top that generates/edits that XML from chat commands.
How do I get it running?Try the hosted demo online with no install, or clone the repo and run `next dev` locally; it's also deployable with one click to Vercel, Cloudflare Workers, or Tencent EdgeOne Pages, and ships as a Docker image and native desktop app for Windows/macOS/Linux.
Do I need my own API key for an LLM provider?Not required to try the demo (you can use the hosted site for free with limits), but for your own instance you must configure a provider key — Bedrock, OpenAI, Anthropic, Google, Azure, Ollama, OpenRouter, DeepSeek and many others are supported.
Does it work well with any LLM model?No — it needs a model strong enough to produce long, strictly-formatted draw.io XML; the author recommends Claude Sonnet 4.5, GPT-5.1, Gemini 3 Pro or DeepSeek V3.2/R1, and specifically notes Claude is best for cloud architecture diagrams since it was trained on AWS/Azure/GCP icon sets.
Can other AI coding agents like Claude Code or Cursor drive this tool too?Yes, it exposes an MCP Server so agents like Claude Desktop, Cursor, VS Code, or the Claude Code CLI can create and edit diagrams directly through chat commands.
Where is my API key stored when using the demo site?If you bring your own key on the demo site, it is kept only in your browser's local storage and never sent to or stored on the server.
Can it recreate a diagram from an image or PDF I already have?Yes, you can upload an existing diagram image or a PDF/text file and the AI will replicate or regenerate it as an editable draw.io diagram.
Can I see the AI's reasoning while it builds a diagram?For models that support it, such as OpenAI o1/o3, Gemini, or Claude, the app shows the AI's thinking process alongside the generated diagram.
Does it keep a history of diagram versions?Yes, it tracks every AI edit with full version control so you can view and restore earlier versions of your diagram.
Can admins set up models for all users without each person needing an API key?Yes, an admin panel (password-protected, at /admin) lets administrators configure server-side models, access codes, and quotas that everyone can use without personal API keys.
What are similar projects?gitdiagram, NextChat, LangBot, brigade, agentscope, scira, chatbox, opensquilla
Which topics is it in?gemini-cli-extension, architecture-diagram, flowchart, llm-agent, diagrams, vercel, cloudflare, ollama, nextjs, electron, chatbot, deepseek
Creator
DayuanJiang
Size
11.6 MB
Stars
36.3K
Updated
CommitOct 17Releasev0.5.0Oct 10
Age
1y
Commits · 90 Days