Next AI Draw.io: draw.io-Diagramme per Sprachbefehl mit Next.js erzeugen
Eine next.js-Webanwendung, die KI-Funktionen mit draw.io-Diagrammen integriert. Mit dieser App können Sie Diagramme durch Befehle in natürlicher Sprache und KI-gestützte Visualisierung erstellen, ändern und verbessern.
Auf einen Blick
- Was ist das?
- Wie die TypeScript-Anwendung von DayuanJiang Sprachmodelle mit draw.io verbindet, welche Wege über Demo, Desktop, Docker, MCP server und die Port-6002-Entwicklungsumgebung führen und wie die Multi-Provider-Konfiguration aufgebaut ist.
- Für wen ist es gedacht?
- Next AI Draw.io passt zu Nutzern, die Architektur- und Flussdiagramme in draw.io-Qualität schnell aus Beschreibungen, Bildern oder PDFs gewinnen wollen und einen eigenen API-Schlüssel mitbringen. Wichtig ist die Kenntnis der konkreten Stellschrauben: der lokale Start über npm run dev auf Port 6002, die Provider-Auswahl über ai-models.json beziehungsweise das Admin-Panel unter /admin und der MCP-Zugang mit @next-ai-drawio/mcp-server@latest.
- Darf ich es kommerziell nutzen?
- Ja. Apache-2.0 ist eine freizügige Lizenz: Sie dürfen darauf aufbauende Software nutzen, verändern und verkaufen, solange Sie die Urheberrechts- und Lizenzhinweise beibehalten.
- Wird es noch gepflegt?
- Ja. Die letzten Commits kamen vor 1 Tag.
- In welcher Sprache ist es geschrieben?
- Hauptsächlich TypeScript, laut der Sprachstatistik von GitHub.
Die Antworten beruhen auf den GitHub-Daten des Projekts (zuletzt abgeglichen am 15. September 2026) und auf unserer Analyse. Sie sind keine Rechtsberatung.
TIEFGEHENDE OPEN-SOURCE-ANALYSE
Next AI Draw.io: Diagramme aus natürlichsprachlichen Befehlen
Das Repository DayuanJiang/next-ai-draw-io enthält eine Webanwendung, die Sprachmodellfähigkeiten mit draw.io verbindet. Der Anwendungsfall laut README: Diagramme über natürliche Sprachbefehle erstellen, verändern und verbessern, unterstützt durch KI-Visualisierung. Die Umsetzung liegt in TypeScript auf Next.js-Basis, das Projekt steht unter Apache-2.0 und zählt zum Aufnahmezeitpunkt 35373 Sterne bei 3799 Forks, mit 185 offenen Issues auf dem Branch main.
Ausprobiert werden kann die Anwendung ohne Installation auf der Demoseite next-ai-drawio.jiang.jp. Die README dankt ByteDance Doubao als Sponsor und weist darauf hin, dass die Demoseite das Modell glm-4.7 nutzt. Ein zweiter Sponsor, Atlas Cloud, bietet eine OpenAI-kompatible API, über die DeepSeek, Qwen, GLM, Kimi und MiniMax mit einer Provider-Verbindung erreichbar sind. Beispiel-Prompts im README reichen von einem animierten Connector-Diagramm der Transformer-Architektur bis zu einem RAG-Fluss für eine Chat-Anwendung.
Funktionsumfang von Bildreplikation bis Diagramm-Historie
Acht Funktionen listet die README auf. Neben der LLM-gestützten Diagrammerstellung gehört dazu die Replikation bestehender Diagramme aus hochgeladenen Bildern, sowie der Upload von PDF- und Textdateien, aus denen die KI Inhalte extrahiert und in Diagramme überführt. Für Modelle wie OpenAI o1/o3, Gemini und Claude lässt sich der Denkprozess der KI einblenden, und eine Diagramm-Historie sichert alle Änderungen versioniert, sodass Vorversionen aus der Zeit vor der KI-Bearbeitung wiederherstellbar sind.
Dazu kommen eine interaktive Chat-Oberfläche zur schrittweisen Verfeinerung, Spezialunterstützung für Cloud-Architekturdiagramme von AWS, GCP und Azure sowie animierte Verbinder zwischen Diagrammelementen. Die Beispieltabelle im README zeigt die Bandbreite der Prompts: von einer Authentifizierung mit React und AWS in Serverless-Architektur bis zur Visualisierung des Open-Innovation-Modells von Henry Chesbrough. Aussagen zur Genauigkeit der erzeugten Diagramme macht die README nicht.
MCP server: Diagrammbefehle aus Claude, Cursor und VS Code
Eigener Bestandteil des Projekts ist ein MCP-Serverpaket, über das KI-Agenten wie Claude Desktop, Cursor und VS Code Diagramme erzeugen können. Die Konfiguration folgt dem üblichen mcpServers-Schema mit dem Befehl npx und dem Paket @next-ai-drawio/mcp-server@latest. Für die Claude Code CLI lautet die Zeile: claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest.
Nach der Einrichtung genügt eine Anfrage wie das Erstellen eines Flussdiagramms für User Authentication mit Login, MFA und Sitzungsverwaltung; das Diagramm erscheint laut README in Echtzeit im Browser. Details für weitere Clients wie VS Code und Cursor stehen in der separaten README unter packages/mcp-server/README.md. Dieser Weg verlagert die Diagrammerstellung in den Workflow der Agenten, ohne dass die Webanwendung geöffnet werden muss.
Lokaler Start über npm install und Port 6002
Für die lokale Entwicklung gibt die README eine klare Befehlsfolge vor: git clone https://github.com/DayuanJiang/next-ai-draw-io, Wechsel in das Verzeichnis, npm install, dann cp env.example .env.local. Die Konfiguration der einzelnen Provider ist im Provider Configuration Guide unter docs/en/ai-providers.md beschrieben. Gestartet wird mit npm run dev, die Anwendung ist danach unter http://localhost:6002 erreichbar.
Neben der Quellausführung gibt es eine native Desktop-Anwendung für Windows, macOS und Linux auf der Releases-Seite sowie eine Docker-Variante, deren Anleitung in einem eigenen Dokument unter docs/en/docker.md liegt. Wer nur testen will, nutzt die Demoseite und trägt über das Einstellungssymbol im Chat-Panel einen eigenen API-Schlüssel ein; dieser wird laut README lokal im Browser gespeichert und niemals auf dem Server abgelegt, was die Nutzungslimits der Demo umgeht.
Bereitstellung auf EdgeOne Pages, Vercel und Cloudflare Workers
Drei Deploy-Ziele dokumentiert die README. Für Tencent EdgeOne Pages existiert ein Ein-Klick-Button, der das Repository direkt verdrahtet; die README erwähnt dort ein tägliches kostenloses Kontingent für DeepSeek-Modelle. Details hält die EdgeOne-Pages-Dokumentation bereit, die verlinkt ist.
Bei Vercel werden die Umgebungsvariablen im Dashboard gesetzt und sollen der .env.local entsprechen. Für Cloudflare Workers verweist die README auf einen separaten Leitfaden, statt die Schritte selbst aufzuführen. Welche Skalierungsgrenzen und Leistungswerte für diese Ziele gelten, sagt die README nicht; bei den Sponsoring-Kontingenten wie dem DeepSeek-Freikontingent auf EdgeOne Pages handelt es sich um angebotene Konditionen, die sich jederzeit ändern können.
Multi-Provider-Konfiguration und das Admin-Panel unter /admin
Die Providerliste ist lang: AWS Bedrock ist als Standard eingetragen, dazu OpenAI, Anthropic, Google AI, Google Vertex AI, Azure OpenAI, Ollama, OpenRouter, AIHubMix, DeepSeek, SiliconFlow, ModelScope, SGLang und Vercel AI Gateway; alle außer AWS Bedrock und OpenRouter unterstützen laut README benutzerdefinierte Endpunkte. Serverseitig lässt sich ein Multi-Modell-Setup über die Umgebungsvariable AI_MODELS_CONFIG als JSON-String oder über eine ai-models.json-Datei aufbauen; für einen einzelnen Anbieter reicht die einfachere, kommaseparierte Variable AI_MODEL.
Wer Konfiguration ohne Editieren von .env-Dateien bevorzugt, aktiviert das Admin-Panel durch Setzen von ADMIN_PASSWORD und öffnet den Pfad /admin. Dort werden Modelle, Zugangscodes, Funktionen, Beobachtbarkeit und Kontingente verwaltet. Diese Trennung zwischen clientseitigem Schlüssel im Browser und serverseitigem Modellkatalog macht die Anwendung für Teams nutzbar, die Provider zentral vorgeben wollen.
Wartungsstand und Releases bis v0.4.16
Die Release-Liste zeigt einen gemäßigten Takt: v0.4.14 erschien am 30. März 2026, v0.4.15 am 14. April 2026 und v0.4.16 am 21. Mai 2026, das ist zugleich der letzte gepushte Stand des Repositories. Die Versionsnummern innerhalb der 0.4.x-Reihe deuten auf laufende Weiterentwicklung vor dem ersten stabilen Stand hin.
Für die Versionswahl heißt das: Die Release-Notizen zwischen v0.4.15 und v0.4.16 prüfen, bevor man ein Update durchführt, denn die README listet keine Kompatibilitätsversprechen. Technisch ruht die Anwendung auf drei Pfeilern, die die README benennt: Next.js für Frontend und Routing, das Vercel AI SDK für Streaming-Antworten und Multi-Anbieter-Support, und react-drawio für die Diagrammdarstellung. Diagramme werden als XML dargestellt, das draw.io rendert; die KI erzeugt oder verändert genau dieses XML.
Fazit: Wofür sich Next AI Draw.io eignet
Das Projekt trifft einen klaren Nutzen: schnell zu brauchbaren draw.io-Diagrammen kommen, ohne jede Box von Hand zu setzen. Der Weg über natürliche Sprache, Bildreplikation und PDF-Upload deckt drei typische Ausgangslagen ab, und die Diagramm-Historie sichert ab, dass KI-Änderungen rückholbar bleiben. Der MCP server erweitert den Nutzen auf Agenten-Workflows, in denen Diagramme als Ergebnis von Anfragen entstehen.
Nicht der richtige Einsatz ist es, wenn verbindliche Zusagen zu Genauigkeit, Sicherheit oder Skalierung erwartet werden; dazu macht die README keine Angaben. Wer einsteigt, sollte zunächst auf der Demoseite mit eigenem API-Schlüssel die Modellqualität des gewählten Providers prüfen, danach lokal mit npm run dev und der .env.local aufbauen und für die Verwaltung mehrerer Modelle das Admin-Panel unter /admin mit gesetztem ADMIN_PASSWORD nutzen.
Redaktionelles Fazit
Next AI Draw.io passt zu Nutzern, die Architektur- und Flussdiagramme in draw.io-Qualität schnell aus Beschreibungen, Bildern oder PDFs gewinnen wollen und einen eigenen API-Schlüssel mitbringen. Wichtig ist die Kenntnis der konkreten Stellschrauben: der lokale Start über npm run dev auf Port 6002, die Provider-Auswahl über ai-models.json beziehungsweise das Admin-Panel unter /admin und der MCP-Zugang mit @next-ai-drawio/mcp-server@latest.
Community-Notizen