i/next-ai-draw-io
1
0
Fork 0
mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-01-02 22:32:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update examples section in README.md

Browse Source
This commit is contained in:
Dayuan Jiang
2025-11-17 19:35:55 +09:00
committed by GitHub
parent 455115935c
commit 663e1c8c77
1 changed files with 34 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
README.md
View File

@@ -19,69 +19,41 @@ Demo site: [https://next-ai-draw-io.vercel.app](https://next-ai-draw-io.vercel.a
Here are some example prompts and their generated diagrams: Here are some example prompts and their generated diagrams:
<table> <div align="center">
<tr> <table width="100%">
<td width="50%" style="vertical-align:top;height:400px;"> <tr>
<td width="50%" valign="top">
**Prompt:** <strong>GCP architecture diagram</strong><br />
<p><strong>Prompt:</strong> Generate a GCP architecture diagram with **GCP icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
``` <img src="./public/gcp_demo.svg" alt="GCP Architecture Diagram" width="480" />
Generate a GCP architecture diagram with **GCP icons**. In this diagram, users connect to a frontend hosted on an instance. </td>
``` <td width="50%" valign="top">
<strong>AWS architecture diagram</strong><br />
<img src="./public/gcp_demo.svg" alt="GCP Architecture Diagram" style="width:100%;height:300px;object-fit:contain;" /> <p><strong>Prompt:</strong> Generate a AWS architecture diagram with **AWS icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
<img src="./public/aws_demo.svg" alt="AWS Architecture Diagram" width="480" />
</td> </td>
<td width="50%" style="vertical-align:top;height:400px;"> </tr>
<tr>
**Prompt:** <td width="50%" valign="top">
<strong>Azure architecture diagram</strong><br />
``` <p><strong>Prompt:</strong> Generate a Azure architecture diagram with **Azure icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
Generate a AWS architecture diagram with **AWS icons**. In this diagram, users connect to a frontend hosted on an instance. <img src="./public/azure_demo.svg" alt="Azure Architecture Diagram" width="480" />
``` </td>
<td width="50%" valign="top">
<img src="./public/aws_demo.svg" alt="AWS Architecture Diagram" style="width:100%;height:300px;object-fit:contain;" /> <strong>Animated transformer connectors</strong><br />
<p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
</td> <img src="./public/animated_connectors.svg" alt="Transformer Architecture with Animated Connectors" width="480" />
</tr> </td>
<tr> </tr>
<td width="50%" style="vertical-align:top;height:400px;"> <tr>
<td colspan="2" valign="top" align="center">
**Prompt:** <strong>Cat sketch prompt</strong><br />
<p><strong>Prompt:</strong> Draw a cute cat for me.</p>
``` <img src="./public/cat_demo.svg" alt="Cat Drawing" width="260" />
Generate a Azure architecture diagram with **Azure icons**. In this diagram, users connect to a frontend hosted on an instance. </td>
``` </tr>
<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 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> </table>
</div>
## How It Works ## How It Works