mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-02 22:32:27 +08:00
294 lines
11 KiB
Markdown
294 lines
11 KiB
Markdown
# Next AI Draw.io
|
|
|
|
<div align="center">
|
|
|
|
**AI-Powered Diagram Creation Tool - Chat, Draw, Visualize**
|
|
|
|
English | [中文](./docs/README_CN.md) | [日本語](./docs/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.
|
|
|
|
|
|
|
|
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 (Preview)](#mcp-server-preview)
|
|
- [Getting Started](#getting-started)
|
|
- [Try it Online](#try-it-online)
|
|
- [Run with Docker (Recommended)](#run-with-docker-recommended)
|
|
- [Installation](#installation)
|
|
- [Deployment](#deployment)
|
|
- [Multi-Provider Support](#multi-provider-support)
|
|
- [How It Works](#how-it-works)
|
|
- [Project Structure](#project-structure)
|
|
- [Support \& Contact](#support--contact)
|
|
- [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>GCP architecture diagram</strong><br />
|
|
<p><strong>Prompt:</strong> Generate a GCP architecture diagram with **GCP icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
|
|
<img src="./public/gcp_demo.svg" alt="GCP Architecture Diagram" width="480" />
|
|
</td>
|
|
<td width="50%" valign="top">
|
|
<strong>AWS architecture diagram</strong><br />
|
|
<p><strong>Prompt:</strong> Generate a AWS architecture diagram with **AWS icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
|
|
<img src="./public/aws_demo.svg" alt="AWS Architecture Diagram" width="480" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td width="50%" valign="top">
|
|
<strong>Azure architecture diagram</strong><br />
|
|
<p><strong>Prompt:</strong> Generate a Azure architecture diagram with **Azure icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
|
|
<img src="./public/azure_demo.svg" alt="Azure Architecture Diagram" width="480" />
|
|
</td>
|
|
<td width="50%" valign="top">
|
|
<strong>Cat sketch prompt</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)
|
|
- **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization
|
|
|
|
## MCP Server (Preview)
|
|
|
|
> **Preview Feature**: This feature is experimental and may change.
|
|
|
|
Use Next AI Draw.io with AI agents like Claude Desktop, Cursor, and VS Code via MCP (Model Context Protocol).
|
|
|
|
```bash
|
|
npx -y @next-ai-drawio/mcp-server
|
|
```
|
|
|
|
### Claude Desktop
|
|
|
|
Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json` on macOS):
|
|
|
|
```json
|
|
{
|
|
"mcpServers": {
|
|
"drawio": {
|
|
"command": "npx",
|
|
"args": ["-y", "@next-ai-drawio/mcp-server"]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### Claude Code CLI
|
|
|
|
```bash
|
|
claude mcp add drawio -- npx -y @next-ai-drawio/mcp-server
|
|
```
|
|
|
|
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/)
|
|
|
|
> Note: Due to high traffic, the demo site currently uses minimax-m2. For best results, we recommend self-hosting with Claude Sonnet 4.5 or Claude Opus 4.5.
|
|
|
|
> **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.
|
|
|
|
### 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](https://docs.docker.com/get-docker/)
|
|
|
|
Then run:
|
|
|
|
```bash
|
|
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
|
|
```
|
|
|
|
Or use an env file:
|
|
|
|
```bash
|
|
cp env.example .env
|
|
# Edit .env with your configuration
|
|
docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest
|
|
```
|
|
|
|
Open [http://localhost:3000](http://localhost:3000) in your browser.
|
|
|
|
Replace the environment variables with your preferred AI provider configuration. See [Multi-Provider Support](#multi-provider-support) for available options.
|
|
|
|
> **Offline Deployment:** If `embed.diagrams.net` is blocked, see [Offline Deployment](./docs/offline-deployment.md) for configuration options.
|
|
|
|
### Installation
|
|
|
|
1. Clone the repository:
|
|
|
|
```bash
|
|
git clone https://github.com/DayuanJiang/next-ai-draw-io
|
|
cd next-ai-draw-io
|
|
```
|
|
|
|
2. Install dependencies:
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. Configure your AI provider:
|
|
|
|
Create a `.env.local` file in the root directory:
|
|
|
|
```bash
|
|
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, siliconflow)
|
|
- Set `AI_MODEL` to the specific model you want to use
|
|
- Add the required API keys for your provider
|
|
- `TEMPERATURE`: Optional temperature setting (e.g., `0` for deterministic output). Leave unset for models that don't support it (e.g., reasoning models).
|
|
- `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](./docs/ai-providers.md) for detailed setup instructions for each provider.
|
|
|
|
4. Run the development server:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
5. Open [http://localhost:3000](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](https://vercel.com/new) from the creators of Next.js.
|
|
|
|
Check out the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
|
|
|
Or you can deploy by this button.
|
|
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
|
|
|
|
Be sure to **set the environment variables** in the Vercel dashboard as you did in your local `.env.local` file.
|
|
|
|
|
|
## Multi-Provider Support
|
|
|
|
- AWS Bedrock (default)
|
|
- OpenAI
|
|
- Anthropic
|
|
- Google AI
|
|
- Azure OpenAI
|
|
- Ollama
|
|
- OpenRouter
|
|
- DeepSeek
|
|
- SiliconFlow
|
|
|
|
All providers except AWS Bedrock and OpenRouter support custom endpoints.
|
|
|
|
📖 **[Detailed Provider Configuration Guide](./docs/ai-providers.md)** - 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-5.1, Gemini 3 Pro, and DeepSeek V3.2/R1.
|
|
|
|
Note that `claude` series has 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.
|
|
|
|
## 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
|
|
```
|
|
|
|
## Support & Contact
|
|
|
|
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
|
|
|
|
## Star History
|
|
|
|
[](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)
|
|
|
|
---
|