mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-09-01 17:10:24 +08:00
a3814f702d
Extends the declarative engine past cloud architecture. The tool routing was
divided by icon library — AWS through the engine, everything else hand-written
XML — which is the wrong axis. What matters is the LAYOUT SHAPE.
Measured first: a six-step approval flow declared in its natural order comes out
as one column, because the layout only arranges what nesting tells it to and
never looked at the arrows. That forces the arrow from the decision to its second
branch to jump over the first branch.
graph.ts computes what the layout should have looked at: layer assignment by
longest path, cycle breaking so a loop is drawn without setting the order, and
barycentre sweeping to cut edge crossings. It emits ordinary container
operations, so layout, routing and round-tripping are unchanged — reaching zero
arrows-through-boxes on a 14-node pipeline and zero crossings on a bipartite
graph whose declared order forces three.
Three new container kinds, each because one layout rule cannot serve them all:
pool — swimlanes. Lanes are real cells and each step is parented to its
band, so dragging a step to another role records the change.
sequence — participants across the top, one lifeline cell per participant so
head and line stay together on a drag. Messages bypass the router:
a message's height IS its order.
radial — mind maps and org charts. Children are a flat list and the
hierarchy comes from the links, because a branch is a box and a box
cannot hold children.
Flowchart box shapes (diamond, stadium, parallelogram, document) so a reader can
tell a branch from a step.
Two bugs the new tests caught: the duplicate-link guard blocked a sequence
diagram from having two messages between the same pair, and the fallback message
numbering was shared across containers, pushing a second diagram's messages off
its own lifelines.
523 unit tests and 17 diagram e2e tests pass. Every kind verified round-trip
stable to a fixed point, and rendered in a real browser — draw.io keeps the
lifeline shape and the lane markers.
272 lines
12 KiB
Markdown
272 lines
12 KiB
Markdown
# Next AI Draw.io
|
|
|
|
<div align="center">
|
|
|
|
**AI-Powered Diagram Creation Tool - Chat, Draw, Visualize**
|
|
|
|
English | [中文](./docs/cn/README_CN.md) | [日本語](./docs/ja/README_JA.md)
|
|
|
|
[](https://next-ai-drawio.jiang.jp/)
|
|
|
|
[](https://opensource.org/licenses/Apache-2.0)
|
|
[](https://nextjs.org/)
|
|
[](https://react.dev/)
|
|
[](https://github.com/sponsors/DayuanJiang)
|
|
|
|
[](https://next-ai-drawio.jiang.jp/)
|
|
|
|
</div>
|
|
|
|
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 <img src="https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/public/doubao-color.png" alt="" height="20" /> [ByteDance Doubao](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio) sponsorship, the demo site now uses the powerful glm-4.7 model!
|
|
|
|
|
|
https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
|
|
|
|
|
|
|
|
## Table of Contents
|
|
- [Next AI Draw.io](#next-ai-drawio)
|
|
- [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:
|
|
|
|
<div align="center">
|
|
<table width="100%">
|
|
<tr>
|
|
<td colspan="2" valign="top" align="center">
|
|
<strong>Animated transformer connectors</strong><br />
|
|
<p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
|
|
<img src="./public/animated_connectors.svg" alt="Transformer Architecture with Animated Connectors" width="480" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td width="50%" valign="top">
|
|
<strong>RAG Technique Diagram</strong><br />
|
|
<p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p>
|
|
<img src="./public/rag_prod.svg" alt="RAG Architecture Diagram" width="480" />
|
|
</td>
|
|
<td width="50%" valign="top">
|
|
<strong>Authentication using React and AWS</strong><br />
|
|
<p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p>
|
|
<img src="./public/auth.svg" alt="Authentication Architecture Diagram" width="480" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td width="50%" valign="top">
|
|
<strong>Open Innovation</strong><br />
|
|
<p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p>
|
|
<img src="./public/inno.svg" alt="Open Innovation Diagram" width="480" />
|
|
</td>
|
|
<td width="50%" valign="top">
|
|
<strong>Cat sketch</strong><br />
|
|
<p><strong>Prompt:</strong> Draw a cute cat for me.</p>
|
|
<img src="./public/cat_demo.svg" alt="Cat Drawing" width="240" />
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
## 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)
|
|
- **Computed Layout**: For architecture diagrams, flowcharts, swimlane/BPMN diagrams, sequence diagrams, mind maps and org charts, the AI declares only the structure — what contains what, or what points at what — and the app computes every coordinate, size and arrow route. Containers always fit their contents, siblings never overlap, and arrows are routed around the shapes they would otherwise cross. Anything you then move or recolour by hand is read back as part of the diagram, so a later edit does not undo it.
|
|
- **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).
|
|
|
|
```json
|
|
{
|
|
"mcpServers": {
|
|
"drawio": {
|
|
"command": "npx",
|
|
"args": ["@next-ai-drawio/mcp-server@latest"]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### Claude Code CLI
|
|
|
|
```bash
|
|
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](./packages/mcp-server/README.md) for VS Code, Cursor, and other client configurations.
|
|
|
|
## Getting Started
|
|
|
|
### Try it Online
|
|
|
|
No installation needed! Try the app directly on our demo site:
|
|
|
|
[](https://next-ai-drawio.jiang.jp/)
|
|
|
|
|
|
|
|
> **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](https://github.com/DayuanJiang/next-ai-draw-io/releases):
|
|
|
|
Supported platforms: Windows, macOS, Linux.
|
|
|
|
### Run with Docker
|
|
|
|
[Go to Docker Guide](./docs/en/docker.md)
|
|
|
|
### Installation
|
|
|
|
1. Clone the repository:
|
|
|
|
```bash
|
|
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](./docs/en/ai-providers.md) for detailed setup instructions for each provider.
|
|
|
|
2. Run the development server:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
3. Open [http://localhost:6002](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](https://pages.edgeone.ai/).
|
|
|
|
Deploy by this button:
|
|
|
|
[](https://edgeone.ai/pages/new?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
|
|
|
|
Check out the [Tencent EdgeOne Pages documentation](https://pages.edgeone.ai/document/deployment-overview) for more details.
|
|
|
|
Additionally, deploying through Tencent EdgeOne Pages will also grant you a [daily free quota for DeepSeek models](https://pages.edgeone.ai/document/edge-ai).
|
|
|
|
### Deploy on Vercel
|
|
|
|
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
|
|
|
|
The easiest way to deploy is using [Vercel](https://vercel.com/new), 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](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
|
|
|
### Deploy on Cloudflare Workers
|
|
|
|
[Go to Cloudflare Deploy Guide](./docs/en/cloudflare-deploy.md)
|
|
|
|
|
|
|
|
## Multi-Provider Support
|
|
|
|
- [ByteDance Doubao](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio)
|
|
- 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](./docs/en/ai-providers.md)** - 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](./docs/en/admin-panel.md)** — 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](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio) 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](https://github.com/sponsors/DayuanJiang) 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](./docs/en/FAQ.md) for common issues and solutions.
|
|
|
|
## Star History
|
|
|
|
[](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)
|
|
|
|
---
|