From 240ab2002d94f18ad90c20c3b994d5d1900c7867 Mon Sep 17 00:00:00 2001 From: "dayuan.jiang" Date: Sun, 23 Mar 2025 15:24:49 +0000 Subject: [PATCH] fix: fix readme.md --- README.md | 80 +++++++++++++++---------------------------------------- 1 file changed, 22 insertions(+), 58 deletions(-) diff --git a/README.md b/README.md index 5050989..e607344 100644 --- a/README.md +++ b/README.md @@ -1,31 +1,33 @@ # 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 -- **AI-Powered Diagram Creation**: Generate diagrams from natural language descriptions -- **Diagram Modification**: Edit existing diagrams using simple text commands -- **Image Processing**: Upload images to use as references for diagram creation -- **XML Extraction and Processing**: Parse and manipulate draw.io XML files -- **Interactive Chat Interface**: Communicate with AI to refine your diagrams in real-time -- **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" +- **LLM-Powered Diagram Creation**: Leverage Large Language Models to create and manipulate draw.io diagrams directly through natural language commands +- **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 + +## 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 -### Prerequisites - -- Node.js 18.x or higher -- npm or yarn package manager -- Modern web browser (Chrome, Firefox, Safari, Edge) - ### Installation 1. Clone the repository: ```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 ``` @@ -48,12 +50,6 @@ OPENAI_API_KEY=your_openai_api_key_here ```bash 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. @@ -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. ``` -### Using Example Templates - -Click on the example prompts in the interface to: -- Generate a cat diagram -- Replicate the example flowchart - ## Project Structure ``` @@ -104,42 +94,15 @@ lib/ # Utility functions and helpers 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 -This project is licensed under the MIT License - see the LICENSE file for details. +This project is licensed under the MIT License. ## Support & Contact For support or inquiries, please open an issue on the GitHub repository or contact the maintainer at: -- Email: your.email@example.com -- Twitter: [@yourusername](https://twitter.com/yourusername) +- Email: me[at]jiang.jp ## 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. ---- +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) -Built with ❤️ using [Next.js](https://nextjs.org/) and OpenAI technology. +---