From 7a6a7eaf7c9c0c28d965de3f1cfcd66e6cd7bc8a Mon Sep 17 00:00:00 2001 From: "dayuan.jiang" Date: Mon, 17 Nov 2025 15:12:16 +0900 Subject: [PATCH] docs: Update examples with new prompts and demo images - Add Examples section to README with 2-column grid layout - Include demo images for GCP, AWS, Azure, animated connectors, and cat - Update example panel buttons with clearer labels - Add animated connector example button - Add instruction for animated connectors in chat route --- README.md | 72 ++++++++++++++++++++++++++++++- app/api/chat/route.ts | 1 + components/chat-example-panel.tsx | 12 ++++-- public/animated_connectors.svg | 4 ++ public/aws_demo.svg | 4 ++ public/azure_demo.svg | 4 ++ public/cat_demo.svg | 4 ++ public/gcp_demo.svg | 4 ++ 8 files changed, 100 insertions(+), 5 deletions(-) create mode 100644 public/animated_connectors.svg create mode 100644 public/aws_demo.svg create mode 100644 public/azure_demo.svg create mode 100644 public/cat_demo.svg create mode 100644 public/gcp_demo.svg diff --git a/README.md b/README.md index 2857375..d38b2a6 100644 --- a/README.md +++ b/README.md @@ -12,8 +12,76 @@ Demo site: [https://next-ai-draw-io.vercel.app](https://next-ai-draw-io.vercel.a - **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 -- **Smart Editing**: Modify existing diagrams using simple text prompts -- **Targeted XML Editing**: AI can now make precise edits to specific parts of diagrams without regenerating the entire XML, making updates faster and more efficient +- **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: + + + + + + + + + + + + + +
+ +**Prompt:** + +``` +Generate a GCP architecture diagram with **GCP icons**. In this diagram, users connect to a frontend hosted on an instance. +``` + +GCP Architecture Diagram + + + +**Prompt:** + +``` +Generate a AWS architecture diagram with **AWS icons**. In this diagram, users connect to a frontend hosted on an instance. +``` + +AWS Architecture Diagram + +
+ +**Prompt:** + +``` +Generate a Azure architecture diagram with **Azure icons**. In this diagram, users connect to a frontend hosted on an instance. +``` + +Azure Architecture Diagram + + + +**Prompt:** + +``` +Draw a cute cat for me. +``` + +Cat Drawing + +
+ +**Prompt:** + +``` +Give me a **animated connector** diagram of transformer's architecture. +``` + +Transformer Architecture with Animated Connectors + +
## How It Works diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts index 9da2f28..b71d9d2 100644 --- a/app/api/chat/route.ts +++ b/app/api/chat/route.ts @@ -141,6 +141,7 @@ ${lastMessageText} - Note that when you need to generate diagram about aws architecture, use **AWS 2025 icons**. + - If you are asked to generate animated connectors, make sure to include "flowAnimation=1" in the style of the connector elements. `, inputSchema: z.object({ xml: z.string().describe("XML string to be displayed on draw.io") diff --git a/components/chat-example-panel.tsx b/components/chat-example-panel.tsx index 68599ea..bb18c82 100644 --- a/components/chat-example-panel.tsx +++ b/components/chat-example-panel.tsx @@ -52,23 +52,29 @@ export default function ExamplePanel({

Try these examples:

+
diff --git a/public/animated_connectors.svg b/public/animated_connectors.svg new file mode 100644 index 0000000..5141cd1 --- /dev/null +++ b/public/animated_connectors.svg @@ -0,0 +1,4 @@ + + + +
Transformer Architecture
Input Embedding
Positional Encoding
ENCODER
Multi-Head
Attention
Add & Norm
Feed Forward
Network
Add & Norm
Output Embedding
Positional Encoding
DECODER
Masked Multi-Head
Attention
Add & Norm
Multi-Head
Cross-Attention
Add & Norm
Feed Forward
Network
Add & Norm
Linear & Softmax
Output Probabilities
Nx
Nx
Encoder Output
 \ No newline at end of file diff --git a/public/aws_demo.svg b/public/aws_demo.svg new file mode 100644 index 0000000..428d6d5 --- /dev/null +++ b/public/aws_demo.svg @@ -0,0 +1,4 @@ + + + +
AWS Cloud
VPC
Public Subnet
EC2 Instance
(Frontend)
Internet
Gateway
Users
HTTPS/HTTP
 \ No newline at end of file diff --git a/public/azure_demo.svg b/public/azure_demo.svg new file mode 100644 index 0000000..cff56a8 --- /dev/null +++ b/public/azure_demo.svg @@ -0,0 +1,4 @@ + + + +
Azure Cloud
Resource Group
Virtual Network
Frontend Instance
(Azure VM)
Users
HTTPS
Public IP
 \ No newline at end of file diff --git a/public/cat_demo.svg b/public/cat_demo.svg new file mode 100644 index 0000000..a01a60a --- /dev/null +++ b/public/cat_demo.svg @@ -0,0 +1,4 @@ + + + +
🐱 Meow!
 \ No newline at end of file diff --git a/public/gcp_demo.svg b/public/gcp_demo.svg new file mode 100644 index 0000000..c51841f --- /dev/null +++ b/public/gcp_demo.svg @@ -0,0 +1,4 @@ + + + +
Google Cloud Platform
VPC Network
Users
Cloud Load
Balancer
Compute Engine
Instance
(Frontend)
Firewall
HTTPS
HTTP/HTTPS
 \ No newline at end of file