mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-02 14:22:28 +08:00
docs: update diagram representation library in README
This commit is contained in:
38
README.md
38
README.md
@@ -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.
|
[](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.
|
|
||||||
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|||||||
Reference in New Issue
Block a user