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.
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"
Getting Started
Prerequisites
- Node.js 18.x or higher
- npm or yarn package manager
- Modern web browser (Chrome, Firefox, Safari, Edge)
Installation
- Clone the repository:
git clone https://github.com/yourusername/next-ai-draw-io.git
cd next-ai-draw-io
- Install dependencies:
npm install
# or
yarn install
- Create a
.env.localfile in the root directory with the following variables:
OPENAI_API_KEY=your_openai_api_key_here
# Add any other required environment variables
- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
- Open http://localhost:3000 in your browser to see the application.
Usage
Creating a New Diagram
Use the chat interface to describe the diagram you want to create:
Create a flowchart showing the user authentication process with login, validation, and dashboard access steps.
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.
Using Example Templates
Click on the example prompts in the interface to:
- Generate a cat diagram
- Replicate the example flowchart
Project Structure
app/ # Next.js application routes and pages
extract_xml.ts # Utilities for XML processing
components/ # React components
chat-input.tsx # User input component for AI interaction
chatPanel.tsx # Chat interface with diagram control
ui/ # UI components (buttons, cards, etc.)
lib/ # Utility functions and helpers
utils.ts # General utilities including XML conversion
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 - learn about Next.js features and API
- Learn Next.js - an interactive Next.js tutorial
- draw.io Documentation - learn about draw.io features
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
License
This project is licensed under the MIT License - see the LICENSE file for details.
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
Deployment
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out the Next.js deployment documentation for more details.
Built with ❤️ using Next.js and OpenAI technology.