Next AI Draw.io

Übersicht

next-ai-draw-io ist eine Open-Source-Next.js-Webanwendung, die die Leistung von Large Language Models (LLMs) mit dem weit verbreiteten Diagrammwerkzeug draw.io kombiniert. Sie ermöglicht es Benutzern, professionelle Diagramme einfach durch Eingabe von Anweisungen in natürlicher Sprache in einer Chat-Oberfläche zu erstellen, zu ändern und zu verbessern – kein manuelles Drag-and-Drop erforderlich.

Das Projekt wurde entwickelt, um die Lücke zwischen konversationeller KI und visueller Diagrammerstellung zu schließen und es Entwicklern, Architekten und auch nicht-technischen Benutzern zu erleichtern, in Sekundenschnelle hochwertige Diagramme zu erstellen.

Hauptmerkmale

🧠 LLM-gestützte Diagrammerstellung

Benutzer können beschreiben, was sie wollen, in einfacher Sprache (oder anderen Sprachen), und die KI generiert automatisch das entsprechende draw.io XML-Diagramm. Befehle können von einfachen Anfragen wie "Zeichne ein Flussdiagramm" bis hin zu komplexen wie "Generiere eine AWS-Architektur mit einem Load Balancer, EC2-Instanzen und einer RDS-Datenbank" reichen.

🖼️ Bildbasierte Diagrammreplikation

Benutzer können ein vorhandenes Diagrammbild oder einen Screenshot hochladen, und die KI analysiert es und repliziert es als bearbeitbares draw.io-Diagramm. Dies ist besonders nützlich für die Digitalisierung von handgezeichneten Skizzen oder die Neuerstellung von Diagrammen aus Dokumentationen.

📜 Diagramm-Versionsverlauf

Jede Änderung an einem Diagramm wird verfolgt. Benutzer können den vollständigen Versionsverlauf durchsuchen und jeden früheren Zustand wiederherstellen, was ein Sicherheitsnetz beim Experimentieren mit KI-generierten Änderungen bietet.

💬 Interaktive Chat-Oberfläche

Ein Echtzeit-Chat-Panel ermöglicht es Benutzern, ihre Diagramme iterativ zu verfeinern. Benutzer können Dinge sagen wie "mache die Pfeile animiert" oder "füge einen Datenbankknoten hinzu, der mit dem API-Server verbunden ist", und das Diagramm wird entsprechend aktualisiert.

☁️ Unterstützung für Cloud-Architekturen

Das Tool bietet spezielle Unterstützung für die Generierung von Architekturdiagrammen für wichtige Cloud-Anbieter:

AWS (mit offiziellen AWS-Icons)
GCP (mit GCP-Icons)
Azure (mit Azure-Icons)

🎨 Animierte Konnektoren

Unterstützt die Erstellung von animierten, dynamischen Konnektoren zwischen Diagrammknoten für ausdrucksstärkere und visuell ansprechendere Diagramme.

Tech Stack

Technologie	Rolle
Next.js 15	Frontend-Framework & API-Routing
TypeScript	Typsichere Codebasis
Vercel AI SDK	Streaming von KI-Antworten, Multi-Provider-Abstraktion
react-drawio	Diagramm-Rendering & -Manipulation
Tailwind CSS + shadcn/ui	UI-Komponenten & Styling
Docker	Containerisierte Bereitstellung

Multi-Provider LLM-Unterstützung

Die Anwendung abstrahiert die Konfiguration des LLM-Anbieters, sodass Benutzer jeden der folgenden Anbieter integrieren können:

AWS Bedrock (Standard)
OpenAI / OpenAI-kompatible APIs
Anthropic (Claude)
Google AI (Gemini)
Azure OpenAI
Ollama (lokale LLMs)
OpenRouter
DeepSeek

Hinweis: claude-sonnet-4-5 wird besonders für AWS-Architekturdiagramme empfohlen, da es auf draw.io-Diagrammen mit AWS-Logos trainiert wurde.

Projektstruktur

app/
  api/chat/           # Chat-API-Endpunkt mit KI-Toolaufrufen
  page.tsx            # Hauptanwendungsseite
components/
  chat-panel.tsx      # Chat-UI & Diagrammsteuerung
  chat-input.tsx      # Eingabe mit Unterstützung für Datei-Upload
  history-dialog.tsx  # Betrachter des Versionsverlaufs
  ui/                 # Wiederverwendbare UI-Komponenten
contexts/
  diagram-context.tsx # Verwaltung des globalen Diagrammzustands
lib/
  ai-providers.ts     # Konfiguration der Multi-Provider-KI
  utils.ts            # Hilfsprogramme zur XML-Verarbeitung
public/               # Statische Assets & Demo-SVGs

Erste Schritte

Schneller Start mit Docker

docker run -d -p 3000:3000 \
  -e AI_PROVIDER=openai \
  -e AI_MODEL=gpt-4o \
  -e OPENAI_API_KEY=your_api_key \
  ghcr.io/dayuanjiang/next-ai-draw-io:latest

Öffnen Sie dann http://localhost:3000 in Ihrem Browser.

Manuelle Installation

# Repository klonen
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io

# Abhängigkeiten installieren
npm install

# Umgebung konfigurieren
cp env.example .env.local
# Bearbeiten Sie .env.local mit Ihren KI-Anbieter-Einstellungen

# Entwicklungsserver ausführen
npm run dev

Bereitstellung auf Vercel

Klicken Sie auf die Schaltfläche unten oder folgen Sie der Next.js-Dokumentation zur Bereitstellung:

Anwendungsfallbeispiele

Eingabeaufforderung	Ausgabe
"Gib mir ein animiertes Konnektordiagramm der Transformer-Architektur."	Transformer-Architekturdiagramm mit animierten Konnektoren
"Generiere ein GCP-Architekturdiagramm mit GCP-Icons."	Vollständiges SVG für die GCP-Cloud-Architektur
"Generiere ein AWS-Architekturdiagramm mit AWS-Icons."	AWS-Cloud-Architektur mit offiziellen Icons
"Generiere ein Azure-Architekturdiagramm mit Azure-Icons."	Azure-Cloud-Architekturdiagramm
"Zeichne mir eine süße Katze."	Illustrierte Katzendarstellung im draw.io-Format

Community & Support

Probleme: https://github.com/DayuanJiang/next-ai-draw-io/issues
Sponsor: https://github.com/sponsors/DayuanJiang