docs: update diagram representation library in README

This commit is contained in:
dayuan.jiang
2025-03-24 01:02:09 +00:00
parent 46c0bed167
commit 05d1adc179

View File

@@ -20,7 +20,7 @@ The application uses the following technologies:
- **Next.js**: For the frontend framework and routing - **Next.js**: For the frontend framework and routing
- **@ai-sdk/react**: For the chat interface and AI interactions - **@ai-sdk/react**: For the chat interface and AI interactions
- **draw.io XML**: For diagram representation and manipulation - **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. Diagrams are represented as XML that can be rendered in draw.io. The AI processes your commands and generates or modifies this XML accordingly.
@@ -58,31 +58,14 @@ npm run dev
5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application. 5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
## Usage ## Deployment
### Creating a New Diagram The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new) from the creators of Next.js.
Use the chat interface to describe the diagram you want to create: Check out the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
``` Or you can deploy by this button.
Create a flowchart showing the user authentication process with login, validation, and dashboard access steps. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
```
### Modifying an Existing Diagram
With an existing diagram open, use natural language to make changes:
```
Add a decision node after the validation step that redirects failed attempts to a retry page.
```
### Using Image References
Upload an image as a reference by clicking the attachment button in the chat interface. Then ask the AI to use it as inspiration:
```
Create a similar flowchart to this image but add two more steps at the end.
```
## Project Structure ## Project Structure
@@ -108,13 +91,4 @@ For support or inquiries, please open an issue on the GitHub repository or conta
- Email: me[at]jiang.jp - Email: me[at]jiang.jp
## Deployment
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new) from the creators of Next.js.
Check out the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
Or you can deploy by this button.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
--- ---