From bd23aed93b071f915dea7ff5bc93427c9abfb053 Mon Sep 17 00:00:00 2001 From: Dayuan Jiang <34411969+DayuanJiang@users.noreply.github.com> Date: Mon, 8 Dec 2025 11:48:14 +0900 Subject: [PATCH] docs: update README with badges, TOC, and live demo button (#165) * docs: update README with badges, TOC, and reorganized sections * docs: add SVG button for live demo link --- README.md | 118 +++++++++++++++++++++--------------- public/live-demo-button.svg | 4 ++ 2 files changed, 73 insertions(+), 49 deletions(-) create mode 100644 public/live-demo-button.svg diff --git a/README.md b/README.md index 1b70000..df839d6 100644 --- a/README.md +++ b/README.md @@ -6,12 +6,14 @@ English | [中文](./README_CN.md) | [日本語](./README_JA.md) -[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) -[![Next.js](https://img.shields.io/badge/Next.js-15.x-black)](https://nextjs.org/) -[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue)](https://www.typescriptlang.org/) +[![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](https://next-ai-drawio.jiang.jp/) +[![Live Demo](./public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/) @@ -19,16 +21,23 @@ A Next.js web application that integrates AI capabilities with draw.io diagrams. https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979 -## Features +## Table of Contents +- [Next AI Draw.io ](#next-ai-drawio-) + - [Table of Contents](#table-of-contents) + - [Examples](#examples) + - [Features](#features) + - [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) -- **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 -- **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 -- **AWS Architecture Diagram Support**: Specialized support for generating AWS architecture diagrams -- **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization - -## **Examples** +## Examples Here are some example prompts and their generated diagrams: @@ -68,38 +77,25 @@ Here are some example prompts and their generated diagrams: -## How It Works +## Features -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. - -## 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-4o, Gemini 2.0, and DeepSeek V3/R1. - -Note that `claude-sonnet-4-5` has trained on draw.io diagrams with AWS logos, so if you want to create AWS architecture diagrams, this is the best choice. +- **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 +- **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 +- **AWS Architecture Diagram Support**: Specialized support for generating AWS architecture diagrams +- **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization ## 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/) + +> Note: Due to high traffic, the demo site currently uses Claude Haiku 4.5. For best results, we recommend self-hosting with Claude Opus 4.5. + ### Run with Docker (Recommended) If you just want to run it locally, the best way is to use Docker. @@ -182,6 +178,38 @@ Or you can deploy by this button. 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-4o, Gemini 2.0, and DeepSeek V3/R1. + +Note that `claude-sonnet-4-5` has trained on draw.io diagrams with AWS logos, so if you want to create AWS 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 ``` @@ -201,14 +229,6 @@ lib/ # Utility functions and helpers public/ # Static assets including example images ``` -## TODOs - -- [x] Allow the LLM to modify the XML instead of generating it from scratch everytime. -- [x] Improve the smoothness of shape streaming updates. -- [x] Add multiple AI provider support (OpenAI, Anthropic, Google, Azure, Ollama) -- [x] Solve the bug that generation will fail for session that longer than 60s. -- [ ] Add API config on the UI. - ## Support & Contact If you find this project useful, please consider [sponsoring](https://github.com/sponsors/DayuanJiang) to help me host the live demo site! diff --git a/public/live-demo-button.svg b/public/live-demo-button.svg new file mode 100644 index 0000000..f24925b --- /dev/null +++ b/public/live-demo-button.svg @@ -0,0 +1,4 @@ + + + 🚀 Live Demo +