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

@@ -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)
+[![TrendShift](https://trendshift.io/api/badge/repositories/15449)](https://next-ai-drawio.jiang.jp/)
-[![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/)
+[![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/)
 
 </div>
 
@@ -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
+## Examples
--   **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**
 
 Here are some example prompts and their generated diagrams:
 
@@ -68,38 +77,25 @@ Here are some example prompts and their generated diagrams:
 </table>
 </div>
 
-## How It Works
+## Features
 
-The application uses the following technologies:
+-   **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
--   **Next.js**: For the frontend framework and routing
+-   **Diagram History**: Comprehensive version control that tracks all changes, allowing you to view and restore previous versions of your diagrams before the AI editing.
--   **Vercel AI SDK** (`ai` + `@ai-sdk/*`): For streaming AI responses and multi-provider support
+-   **Interactive Chat Interface**: Communicate with AI to refine your diagrams in real-time
--   **react-drawio**: For diagram representation and manipulation
+-   **AWS Architecture Diagram Support**: Specialized support for generating AWS architecture diagrams
-
+-   **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization
-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.
 
 ## 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!

public/live-demo-button.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="140" height="36" viewBox="0 0 140 36">
+  <rect width="140" height="36" rx="8" fill="#6366f1"/>
+  <text x="70" y="24" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="15" font-weight="600" fill="white" text-anchor="middle">🚀 Live Demo</text>
+</svg>