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!
🎁 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.
Here are some example prompts and their generated diagrams:
Animated transformer connectors
Prompt: Give me a **animated connector** diagram of transformer's architecture.
RAG Technique Diagram
Prompt: Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion
Authentication using React and AWS
Prompt: Generate authentication process using React with **AWS**. Use Serverless architecture.
Open Innovation
Prompt: Create visualization of Henry Chesbrough's Open Innovation model.
Cat sketch
Prompt: Draw a cute cat for me.
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).
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:
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:
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.
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.
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!
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:
我需要自己的大语言模型服务商 API 密钥吗？试用演示不需要（使用托管站点可以免费使用，但有使用限制）。但如果要运行自己的实例，就必须配置服务商的密钥。支持 Bedrock、OpenAI、Anthropic、Google、Azure、Ollama、OpenRouter、DeepSeek 等众多服务商。
它对任何大语言模型都能很好地工作吗？不能。它需要足够强的模型，才能生成又长又格式严格的 draw.io XML。作者推荐 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro 或 DeepSeek V3.2/R1，并特别指出 Claude 最适合绘制云架构图，因为它训练时使用了 AWS、Azure、GCP 的图标集。
Claude Code 或 Cursor 这类 AI 编程助手也能驱动这个工具吗？可以。它提供了 MCP Server，因此 Claude Desktop、Cursor、VS Code 或 Claude Code CLI 等智能体，可以直接通过聊天指令创建和编辑图表。
使用演示站点时，我的 API 密钥存放在哪里？如果你在演示站点上使用自己的密钥，它只会保存在你浏览器的本地存储（localStorage）中，从不会发送到服务器，也不会存储在服务器上。
它能根据我已有的图片或 PDF 重建图表吗？可以。你可以上传现有的图表图片，或 PDF/文本文件，AI 会将其复刻或重新生成为可编辑的 draw.io 图表。
我能看到 AI 在绘制图表时的推理过程吗？对于支持的模型，例如 OpenAI o1/o3、Gemini 或 Claude，应用会在生成的图表旁边显示 AI 的思考过程。
它会保留图表的历史版本吗？会。它会对 AI 的每次编辑进行完整的版本控制，你可以查看并恢复图表的早期版本。
管理员能否为所有用户配置模型，而无需每个人都有 API 密钥？可以。管理员面板（有密码保护，地址为 /admin）允许管理员配置服务端模型、访问码和配额，所有人无需个人 API 密钥即可使用。
一个基于 Next.js 的网页应用，让你通过与 AI 用自然语言聊天来创建和编辑 draw.io 图表，而不必手动拖拽图形。