From d5096b9628ded023fe57844e3934f6be0c487998 Mon Sep 17 00:00:00 2001 From: Dayuan Jiang <34411969+DayuanJiang@users.noreply.github.com> Date: Sat, 10 Oct 2026 08:22:16 +0900 Subject: [PATCH] docs: restructure the README around the new promo video (#961) * docs: restructure the README around the new promo video The three READMEs now follow the reader's path: what it is (video and two paragraphs), highlights grouped as draw / edit / use, examples, how to use it (demo, desktop app, MCP), how to self-host (local run, a one-click deploy table, models and providers), and support. Removed the table of contents, the sponsor blocks, the "How It Works" section, the duplicated demo button and the model recommendation list. The provider list now matches env.example (24 providers). The video is the new 30-second promo. Bold markers inside the HTML example table are now tags, so they render. * docs: keep the TrendShift badge under the language switch * chore: remove the sponsor material for Doubao and Atlas Cloud The about pages lose the "Sponsored by ByteDance Doubao" card, the promotional links in the provider list and the thanks paragraph; the "bring your own key" note stays. The quota toast no longer shows the Volcengine sign-up paragraph, and its messages in the four languages no longer mention a sponsor. The provider guides lose the "free tokens" promo line. The logo and invite images used only by that material are deleted. Doubao and Atlas Cloud remain supported providers. --- README.md | 273 ++++++++--------------------- app/[lang]/about/cn/page.tsx | 71 +------- app/[lang]/about/ja/page.tsx | 54 +----- app/[lang]/about/page.tsx | 56 +----- components/quota-limit-toast.tsx | 12 -- docs/cn/README_CN.md | 259 ++++++++------------------- docs/cn/ai-providers.md | 2 - docs/en/ai-providers.md | 2 - docs/ja/README_JA.md | 260 +++++++++------------------ docs/ja/ai-providers.md | 2 - lib/i18n/dictionaries/en.json | 5 +- lib/i18n/dictionaries/ja.json | 5 +- lib/i18n/dictionaries/zh-Hant.json | 5 +- lib/i18n/dictionaries/zh.json | 5 +- public/atlas-cloud-logo-white.svg | 12 -- public/atlas-cloud-logo.svg | 12 -- public/doubao-color.png | Bin 48933 -> 0 bytes public/doubao-color.svg | 1 - public/volcengine-invite.png | Bin 314993 -> 0 bytes 19 files changed, 239 insertions(+), 797 deletions(-) delete mode 100644 public/atlas-cloud-logo-white.svg delete mode 100644 public/atlas-cloud-logo.svg delete mode 100644 public/doubao-color.png delete mode 100644 public/doubao-color.svg delete mode 100644 public/volcengine-invite.png diff --git a/README.md b/README.md index cbf27f7e..de45c5cd 100644 --- a/README.md +++ b/README.md @@ -1,121 +1,98 @@ -# Next AI Draw.io -
-**AI-Powered Diagram Creation Tool - Chat, Draw, Visualize** +# Next AI Draw.io + +**Draw and edit draw.io diagrams by chatting with an AI.** English | [中文](./docs/cn/README_CN.md) | [日本語](./docs/ja/README_JA.md) [![TrendShift](https://trendshift.io/api/badge/repositories/15449)](https://next-ai-drawio.jiang.jp/) [![License: Apache 2.0](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0) -[![Next.js](https://img.shields.io/badge/Next.js-16.x-black)](https://nextjs.org/) -[![React](https://img.shields.io/badge/React-19.x-61dafb)](https://react.dev/) [![Sponsor](https://img.shields.io/badge/Sponsor-❤-ea4aaa)](https://github.com/sponsors/DayuanJiang) -[![Live Demo](./public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/) +[**Live Demo**](https://next-ai-drawio.jiang.jp/) · [**Desktop App**](https://github.com/DayuanJiang/next-ai-draw-io/releases) · [**MCP Server**](#in-your-ai-agent-mcp)
-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/66b9f12f-219f-4d62-acc0-0725e6850eec -> Note: 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) sponsorship, the demo site now uses the powerful glm-4.7 model! +Describe a diagram in a sentence and the AI draws it on a real draw.io canvas. Edit it by hand like any draw.io file, or select a few shapes and tell the AI what to change. Every AI change is a version you can compare, restore or undo, and the result exports as `.drawio`, `.png` or `.svg`. -

- - - - Atlas Cloud - - -

+Available as a web app, a desktop app for Windows, macOS and Linux, and an MCP server for AI agents such as Claude Code, Cursor and VS Code. -> 🎁 Thanks to **[Atlas Cloud](https://www.atlascloud.ai/?utm_source=github&utm_medium=link&utm_campaign=next-ai-draw-io)** 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://www.atlascloud.ai/console/coding-plan). +## Highlights +**Draw** -https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1 +- Architecture diagrams, flowcharts, sequence diagrams and more from one sentence, with built-in AWS, Azure, GCP and Kubernetes icon libraries +- Connectors can carry a flowing animation +- Upload a screenshot or a sketch and the AI redraws it; upload PDF, Markdown, code and other text files and get a diagram of their content +**Edit** +- Edit by chat: changes stream onto the canvas and the shapes the AI just changed are highlighted +- Ask about a selection: select shapes on the canvas and the AI changes only those +- Versions and undo: every AI change is a version card with a thumbnail; compare it with the canvas, restore it or undo it, and Ctrl+Z on the canvas also takes back an AI change in one step +- It is a normal draw.io diagram: double-click to rename, drag, restyle, use several pages, and export as `.drawio`, `.png`, `.svg` or `.drawio.svg` at any time -## 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) +**Use** + +- 24 model providers; enter your own API key in the browser and it stays on your machine +- Models that reason show their thinking +- Dark mode; the interface is available in English, Simplified Chinese, Traditional Chinese and Japanese ## 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 + Transformer architecture with animated 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 + RAG architecture
+

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 + Authentication with React and AWS
+

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

+ Authentication architecture diagram
- Open Innovation
+ Open Innovation model

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

- Open Innovation Diagram + Open Innovation diagram 		Cat sketch

Prompt: Draw a cute cat for me.

- Cat Drawing + Cat drawing
-## Features +## Use it -- **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.) -- **Versions and Undo**: Every AI change shows up in the chat as a version with a thumbnail. Compare it with the canvas, restore it, or undo it; Ctrl+Z on the canvas also takes back an AI change in one step. Shapes the AI just changed are highlighted. -- **Ask About a Selection**: Select shapes on the canvas and ask the AI to change just those. -- **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 +### Online demo -## MCP Server +Open [next-ai-drawio.jiang.jp](https://next-ai-drawio.jiang.jp/), nothing to install. The demo has a usage limit; click the settings icon in the chat panel and enter your own provider and API key to lift it. The key stays in your browser and is never sent to the server for storage. -Use Next AI Draw.io with AI agents like Claude Desktop, Cursor, and VS Code via MCP (Model Context Protocol). +### Desktop app + +Download the Windows, macOS or Linux installer from the [Releases page](https://github.com/DayuanJiang/next-ai-draw-io/releases). + +### In your AI agent (MCP) + +Through MCP (Model Context Protocol, the protocol AI agents use to call outside tools), Claude Desktop, Cursor, VS Code and others can draw draw.io diagrams directly. Add this to your client's MCP configuration: ```json { @@ -128,165 +105,61 @@ Use Next AI Draw.io with AI agents like Claude Desktop, Cursor, and VS Code via } ``` -### Claude Code CLI +For Claude Code, one command does it: ```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" +Then ask the AI for "a flowchart of user authentication with login, MFA and session management" and the diagram appears in your browser as it is drawn. The MCP server has most of the web app's drawing features: -The diagram appears in your browser in real-time! +- The same drawing rules and icon libraries (AWS, Azure, GCP, Kubernetes and more) +- A screenshot tool, so the AI can look at the rendered diagram and fix it +- Version history, multi-page diagrams, and download as `.drawio`, `.png`, `.svg` or `.drawio.svg` +- Auto-save to `~/.next-ai-drawio/`, so a diagram survives a restart -The MCP server includes most of the web app's drawing features: +See the [MCP server README](./packages/mcp-server/README.md) for VS Code, Cursor and other client configurations. -- The same drawing rules and shape libraries (AWS, Azure, GCP, Kubernetes and more) -- A screenshot tool, so the AI can check the rendered diagram and fix it -- Version history, multi-page diagrams, and download as `.drawio`, `.png`, `.svg`, or `.drawio.svg` -- Auto-save to `~/.next-ai-drawio/`, so you can continue a diagram after a restart +## Self-host -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: - -[![Live Demo](./public/live-demo-button.svg)](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: +### Run locally ```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 +cp env.example .env.local # add your provider and API key, see "Models and providers" below npm run dev ``` -3. Open [http://localhost:6002](http://localhost:6002) in your browser to see the application. +Open [http://localhost:6002](http://localhost:6002). -## Deployment +### One-click deploy -### Deploy to EdgeOne Pages +| Platform | How | +| --- | --- | +| Tencent EdgeOne Pages | [![Deploy to EdgeOne Pages](https://cdnstatic.tencentcs.com/edgeone/pages/deploy.svg)](https://edgeone.ai/pages/new?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io) Deploying there also gives you a [daily free quota for DeepSeek models](https://pages.edgeone.ai/document/edge-ai) | +| Vercel | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io) Set the same environment variables in the Vercel dashboard as in your `.env.local` | +| Cloudflare Workers | [Cloudflare deploy guide](./docs/en/cloudflare-deploy.md) | +| Docker | [Docker guide](./docs/en/docker.md) | +| Offline or intranet | [Offline deployment](./docs/en/offline-deployment.md) | -You can deploy with one click using [Tencent EdgeOne Pages](https://pages.edgeone.ai/). +### Models and providers -Deploy by this button: +24 providers are supported: AWS Bedrock (default), OpenAI, Anthropic, Google AI, Google Vertex AI, Azure OpenAI, Ollama, OpenRouter, AIHubMix, DeepSeek, SiliconFlow, SGLang, Vercel AI Gateway, Tencent EdgeOne, ByteDance Doubao, ModelScope, Zhipu GLM, Qwen, Qiniu, Kimi, MiniMax, Novita, Xiaomi MiMo and Atlas Cloud. The environment variables and notes for each are in the [provider configuration guide](./docs/en/ai-providers.md). -[![Deploy to EdgeOne Pages](https://cdnstatic.tencentcs.com/edgeone/pages/deploy.svg)](https://edgeone.ai/pages/new?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io) +**Which model**: the task is to produce long text in a strict format (draw.io XML), so pick a capable model; small models tend to produce broken diagrams. -Check out the [Tencent EdgeOne Pages documentation](https://pages.edgeone.ai/document/deployment-overview) for more details. +**Several models and the admin panel**: list several model IDs in `AI_MODEL` separated by commas, or configure models from several providers with the `AI_MODELS_CONFIG` environment variable or an `ai-models.json` file, and every user can use them without a key of their own. Set `ADMIN_PASSWORD` and open `/admin` to manage models, access codes, feature switches, observability and quotas from a web page; see the [admin panel guide](./docs/en/admin-panel.md). -Additionally, deploying through Tencent EdgeOne Pages will also grant you a [daily free quota for DeepSeek models](https://pages.edgeone.ai/document/edge-ai). +## Support -### Deploy on Vercel +- Questions and ideas: open a [GitHub issue](https://github.com/DayuanJiang/next-ai-draw-io/issues) or email me[at]jiang.jp +- Common problems: [FAQ](./docs/en/FAQ.md) +- If the project is useful to you, consider [sponsoring](https://github.com/sponsors/DayuanJiang) to help keep the demo site running -[![Deploy with Vercel](https://vercel.com/button)](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 -- [Atlas Cloud](https://www.atlascloud.ai/?utm_source=github&utm_medium=link&utm_campaign=next-ai-draw-io) - - -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 -- **draw.io**: The editor runs from a copy bundled into `public/drawio` (downloaded by `npm run dev` / `npm run build`), so the app can drive it directly - -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! - -**Special thanks to [Atlas Cloud](https://www.atlascloud.ai/?utm_source=github&utm_medium=link&utm_campaign=next-ai-draw-io) for sponsoring next-ai-draw-io and supporting its multi-provider ecosystem!** Try its OpenAI-compatible LLM API through the [Atlas Cloud Coding Plan](https://www.atlascloud.ai/console/coding-plan). - -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 +
[![Star History Chart](https://api.star-history.com/svg?repos=DayuanJiang/next-ai-draw-io&type=date&legend=top-left)](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left) ---- +
diff --git a/app/[lang]/about/cn/page.tsx b/app/[lang]/about/cn/page.tsx index fe283122..2f1ce910 100644 --- a/app/[lang]/about/cn/page.tsx +++ b/app/[lang]/about/cn/page.tsx @@ -66,54 +66,6 @@ export default function AboutCN() {
- {/* Header */} -
-

- 由字节跳动豆包提供支持 -

-
- - {/* Story */} -
-

- 好消息！感谢{" "} - - 字节跳动豆包 - - 的慷慨赞助，演示站点现已接入强大的{" "} - - glm-4.7 - {" "} - 模型，图表生成效果更佳！点击链接注册即可领取{" "} - - 50万免费Token - - ，适用于所有模型！ -

-
- - {/* Invite Poster */} -
- - 火山引擎方舟 Coding Plan - -
- {/* Bring Your Own Key */}

@@ -309,16 +261,7 @@ export default function AboutCN() { 多提供商支持