Artificial Intelligence 6 min read

Chat‑Powered Diagram Creation: Exploring the next‑ai‑draw‑io Tool

This article introduces next‑ai‑draw‑io, an open‑source AI extension for Draw.io that lets developers generate and edit architecture diagrams through natural‑language prompts, supports image‑to‑diagram conversion, multiple LLM providers, and offers easy installation via Next.js or Vercel.

IT Services Circle

Dec 6, 2025

Chat‑Powered Diagram Creation: Exploring the next‑ai‑draw‑io Tool

Overview

next‑ai‑draw‑io is an open‑source Next.js application that embeds large‑language‑model (LLM) capabilities into Draw.io, enabling diagram creation and editing through natural‑language prompts.

Core Functionality

Natural‑language diagram generation

When a user sends a prompt such as “draw an e‑commerce system architecture with user service, order service, and payment gateway”, the LLM interprets the request, generates the corresponding Draw.io XML, and the UI renders the diagram instantly.

Iterative refinement

The AI can respond to follow‑up prompts (e.g., “adjust overlapping text”) by modifying only the affected XML fragments, avoiding a full regeneration of the diagram.

Partial editing

Specific elements can be edited by supplying the XML fragment that represents the target shape or connector, allowing precise updates without re‑creating the whole chart.

Image‑based generation

Users may upload a screenshot of an existing diagram or a hand‑drawn sketch. The system runs visual recognition, extracts shapes and relationships, and produces an equivalent Draw.io XML file.

Supported Models and Features

Multi‑model support : OpenAI, Google Gemini, Anthropic Claude, Ollama and other providers. Claude Sonnet 4.5 is recommended for best results.

AWS architecture icons : Built‑in library of AWS symbols and layout templates.

Animated connectors : Optional dynamic line effects for presentation mode.

Version history : Automatic snapshots after each edit; users can view and restore any previous version.

Installation and Deployment

The repository is built with Next.js. To run locally:

git clone https://github.com/DayuanJiang/next-ai-draw-io.git
cd next-ai-draw-io
npm install
npm run dev   # starts the development server at http://localhost:3000

For production, the project can be deployed to Vercel using the provided vercel.json configuration or the “Deploy” button in the README. A hosted demo instance is also available.

Limitations

Generated diagrams may require manual polishing for visual style. Complex architectures often need several dialogue rounds; the quality of the output depends on the specificity of the natural‑language description.

GitHub repository: https://github.com/DayuanJiang/next-ai-draw-io