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

@@ -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:
+
+<table>
+<tr>
+<td width="50%" style="vertical-align:top;height:400px;">
+
+**Prompt:**
+
+```
+Generate a GCP architecture diagram with **GCP icons**. In this diagram, users connect to a frontend hosted on an instance.
+```
+
+<img src="./public/gcp_demo.svg" alt="GCP Architecture Diagram" style="width:100%;height:300px;object-fit:contain;" />
+
+</td>
+<td width="50%" style="vertical-align:top;height:400px;">
+
+**Prompt:**
+
+```
+Generate a AWS architecture diagram with **AWS icons**. In this diagram, users connect to a frontend hosted on an instance.
+```
+
+<img src="./public/aws_demo.svg" alt="AWS Architecture Diagram" style="width:100%;height:300px;object-fit:contain;" />
+
+</td>
+</tr>
+<tr>
+<td width="50%" style="vertical-align:top;height:400px;">
+
+**Prompt:**
+
+```
+Generate a Azure architecture diagram with **Azure icons**. In this diagram, users connect to a frontend hosted on an instance.
+```
+
+<img src="./public/azure_demo.svg" alt="Azure Architecture Diagram" style="width:100%;height:300px;object-fit:contain;" />
+
+</td>
+<td width="50%" style="vertical-align:top;height:400px;">
+
+**Prompt:**
+
+```
+Draw a cute cat for me.
+```
+
+<img src="./public/cat_demo.svg" alt="Cat Drawing" style="width:100%;height:300px;object-fit:contain;" />
+
+</td>
+</tr>
+<tr>
+<td width="50%" colspan="2" style="vertical-align:top;height:400px;">
+
+**Prompt:**
+
+```
+Give me a **animated connector** diagram of transformer's architecture.
+```
+
+<img src="./public/animated_connectors.svg" alt="Transformer Architecture with Animated Connectors" style="width:50%;height:300px;object-fit:contain;display:block;margin:0 auto;" />
+
+</td>
+</tr>
+</table>
 
 ## How It Works
 

app/api/chat/route.ts

@@ -141,6 +141,7 @@ ${lastMessageText}
             </mxCell>
           </root>
           - 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")

components/chat-example-panel.tsx

@@ -52,23 +52,29 @@ export default function ExamplePanel({
             </p>
             <p className="text-sm text-gray-500 mb-2">Try these examples:</p>
             <div className="flex flex-wrap gap-5">
+                <button
+                    className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
+                    onClick={() => setInput("Give me a **animated connector** diagram of transformer's architecture")}
+                >
+                    Draw diagram with Animated Connectors
+                </button>
                 <button
                     className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
                     onClick={handleReplicateArchitecture}
                 >
-                    Create this diagram in aws style
+                    Create AWS architecture
                 </button>
                 <button
                     className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
                     onClick={handleReplicateFlowchart}
                 >
-                    Replicate this flowchart
+                    Replicate flowchart
                 </button>
                 <button
                     className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
                     onClick={() => setInput("Draw a cat for me")}
                 >
-                    Draw a cat for me
+                    Draw a cat
                 </button>
             </div>
         </div>