Next-AI-Draw-IO: AI-Powered Diagram Generation from Natural

Traditional diagramming tools often present challenges, particularly when creating complex flowcharts and architectural diagrams that necessitate extensive manual adjustments. A new open-source project, next-ai-draw-io, addresses this by enabling users to generate and modify diagrams using natural language commands. This tool integrates artificial intelligence to automate the diagramming process within the draw.io format.

Key Points

The next-ai-draw-io project offers three primary functionalities:

Text-to-Diagram Generation: Users can describe their desired diagram using natural language, and the AI automatically constructs it in draw.io format.
Image-Based Replication: Existing diagrams or images can be uploaded for AI analysis, replication, and optimization.
Real-time Conversational Modification: Diagrams can be refined through an interactive chat interface. The AI precisely edits specific sections without requiring a full regeneration of the XML, which enhances efficiency.

From a structural standpoint, the project's technology stack includes Next.js, the AI SDK, and react-drawio. It leverages the OpenAI API for natural language processing. The system also incorporates version history, allowing users to review and restore previous diagram states.

Main Features

The platform's capabilities include:

LLM-driven Diagram Creation: Utilizes large language models for direct creation and manipulation of draw.io diagrams via natural language.
Image-based Diagram Replication: Enables the upload of existing diagrams or images for AI-driven replication and enhancement.
Diagram History: Provides comprehensive version control, allowing users to track changes and restore previous diagram versions.
Interactive Chat Interface: Facilitates real-time conversational refinement of diagrams with AI.
AWS Architecture Diagram Support: Specifically designed to generate AWS architecture diagrams.
Animated Connectors: Supports the creation of dynamic, animated connectors between diagram elements for improved visualization.

For example, a prompt such as "Give me a Transformer architecture diagram with animated connectors" can generate a diagram with dynamic visual elements. Similarly, prompts like "Generate a GCP architecture diagram using GCP icons. In this diagram, users connect to a frontend hosted on an instance" or "Generate an Azure architecture diagram using Azure icons. In this diagram, users connect to a frontend hosted on an instance" will produce diagrams with the specified cloud provider's iconography.

Under the Hood

The application relies on several core technologies:

Next.js: Serves as the frontend framework and handles routing.
Vercel AI SDK (ai + @ai-sdk/*): Manages streaming AI responses and supports multiple AI providers.
react-drawio: Facilitates diagram representation and manipulation.

Diagrams are represented in XML format, which is then rendered by draw.io. The AI processes user commands to generate or modify this XML structure.

Multi-Provider Support

The system is designed for flexibility, supporting various AI providers:

AWS Bedrock (default)
OpenAI / OpenAI-compatible API (via OPENAI_BASE_URL)
Anthropic
Google AI
Azure OpenAI
Ollama
OpenRouter
DeepSeek

Notably, the claude-sonnet-4-5 model has been specifically trained on draw.io diagrams featuring AWS logos, making it a suitable choice for generating AWS architecture diagrams.

Next Steps

To begin using next-ai-draw-io, users can clone the repository from GitHub and install the necessary dependencies. Configuration involves creating a .env.local file and specifying the chosen AI provider, model, and API key. The application can then be run locally for development. For deployment, the Vercel platform is recommended, with environment variables configured within the Vercel console.

The project's repository is publicly available at https://github.com/DayuanJiang/next-ai-draw-io/blob/main/README_CN.md.