mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-02 22:32:27 +08:00
fix: fix readme.md
This commit is contained in:
80
README.md
80
README.md
@@ -1,31 +1,33 @@
|
|||||||
# Next AI Draw.io
|
# Next AI Draw.io
|
||||||
|
|
||||||
A modern web application that integrates AI capabilities with draw.io diagrams. This tool allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.
|
A next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- **AI-Powered Diagram Creation**: Generate diagrams from natural language descriptions
|
- **LLM-Powered Diagram Creation**: Leverage Large Language Models to create and manipulate draw.io diagrams directly through natural language commands
|
||||||
- **Diagram Modification**: Edit existing diagrams using simple text commands
|
- **Image-Based Diagram Replication**: Upload existing diagrams or images and have the AI replicate and enhance them automatically
|
||||||
- **Image Processing**: Upload images to use as references for diagram creation
|
- **Diagram History**: Comprehensive version control that tracks all changes, allowing you to view and restore previous versions of your diagrams before the AI editing.
|
||||||
- **XML Extraction and Processing**: Parse and manipulate draw.io XML files
|
- **Interactive Chat Interface**: Communicate with AI to refine your diagrams in real-time
|
||||||
- **Interactive Chat Interface**: Communicate with AI to refine your diagrams in real-time
|
- **Smart Editing**: Modify existing diagrams using simple text prompts
|
||||||
- **Diagram History**: Track and restore previous versions of your diagrams
|
|
||||||
- **Example Templates**: Quick-start with example prompts like "Draw a cat" or "Replicate this flowchart"
|
## How It Works
|
||||||
|
|
||||||
|
The application uses the following technologies:
|
||||||
|
|
||||||
|
- **Next.js**: For the frontend framework and routing
|
||||||
|
- **@ai-sdk/react**: For the chat interface and AI interactions
|
||||||
|
- **draw.io XML**: 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.
|
||||||
|
|
||||||
## Getting Started
|
## Getting Started
|
||||||
|
|
||||||
### Prerequisites
|
|
||||||
|
|
||||||
- Node.js 18.x or higher
|
|
||||||
- npm or yarn package manager
|
|
||||||
- Modern web browser (Chrome, Firefox, Safari, Edge)
|
|
||||||
|
|
||||||
### Installation
|
### Installation
|
||||||
|
|
||||||
1. Clone the repository:
|
1. Clone the repository:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
git clone https://github.com/yourusername/next-ai-draw-io.git
|
git clone https://github.com/DayuanJiang/next-ai-draw-io
|
||||||
cd next-ai-draw-io
|
cd next-ai-draw-io
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -48,12 +50,6 @@ OPENAI_API_KEY=your_openai_api_key_here
|
|||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run dev
|
npm run dev
|
||||||
# or
|
|
||||||
yarn dev
|
|
||||||
# or
|
|
||||||
pnpm dev
|
|
||||||
# or
|
|
||||||
bun 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.
|
||||||
@@ -84,12 +80,6 @@ Upload an image as a reference by clicking the attachment button in the chat int
|
|||||||
Create a similar flowchart to this image but add two more steps at the end.
|
Create a similar flowchart to this image but add two more steps at the end.
|
||||||
```
|
```
|
||||||
|
|
||||||
### Using Example Templates
|
|
||||||
|
|
||||||
Click on the example prompts in the interface to:
|
|
||||||
- Generate a cat diagram
|
|
||||||
- Replicate the example flowchart
|
|
||||||
|
|
||||||
## Project Structure
|
## Project Structure
|
||||||
|
|
||||||
```
|
```
|
||||||
@@ -104,42 +94,15 @@ lib/ # Utility functions and helpers
|
|||||||
public/ # Static assets including example images
|
public/ # Static assets including example images
|
||||||
```
|
```
|
||||||
|
|
||||||
## How It Works
|
|
||||||
|
|
||||||
The application uses the following technologies:
|
|
||||||
- **Next.js**: For the frontend framework and routing
|
|
||||||
- **OpenAI**: For natural language processing and diagram generation
|
|
||||||
- **@ai-sdk/react**: For the chat interface and AI interactions
|
|
||||||
- **draw.io XML**: 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.
|
|
||||||
|
|
||||||
## Learn More
|
|
||||||
|
|
||||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API
|
|
||||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial
|
|
||||||
- [draw.io Documentation](https://www.drawio.com/doc/) - learn about draw.io features
|
|
||||||
|
|
||||||
## Contributing
|
|
||||||
|
|
||||||
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
||||||
|
|
||||||
1. Fork the repository
|
|
||||||
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
|
|
||||||
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
|
|
||||||
4. Push to the branch (`git push origin feature/amazing-feature`)
|
|
||||||
5. Open a Pull Request
|
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
This project is licensed under the MIT License - see the LICENSE file for details.
|
This project is licensed under the MIT License.
|
||||||
|
|
||||||
## Support & Contact
|
## Support & Contact
|
||||||
|
|
||||||
For support or inquiries, please open an issue on the GitHub repository or contact the maintainer at:
|
For support or inquiries, please open an issue on the GitHub repository or contact the maintainer at:
|
||||||
|
|
||||||
- Email: your.email@example.com
|
- Email: me[at]jiang.jp
|
||||||
- Twitter: [@yourusername](https://twitter.com/yourusername)
|
|
||||||
|
|
||||||
## Deployment
|
## Deployment
|
||||||
|
|
||||||
@@ -147,6 +110,7 @@ The easiest way to deploy your Next.js app is to use the [Vercel Platform](https
|
|||||||
|
|
||||||
Check out the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
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)
|
||||||
|
|
||||||
Built with ❤️ using [Next.js](https://nextjs.org/) and OpenAI technology.
|
---
|
||||||
|
|||||||
Reference in New Issue
Block a user