![\"KI-generiertes](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/bananaagsiCmdnbG9iYWw6OjAwMDA1NWNmZWM3MDAyNmQ6MDAwMDAwZWI6MTozZTAzZTg2ZmZlYzgxMTIwOjAwMDA1NWNmZWM3MDAyNmQ6MDAwMDAzMDllZmMwMzM2ODowMDA2NTk2ZmU0ZTU3ZjBmEAIYASIJaW1hZ2UvcG5n.png\"\/)
<\/p>\n
Dieses Update schlie\u00dft die L\u00fccke zwischen abstrakten Ideen und konkreten visuellen Modellen. Ob Sie als Softwarearchitekt ein Microservices-\u00d6kosystem entwerfen oder als Produktmanager Benutzerfl\u00fcsse definieren \u2013 VPasCode erm\u00f6glicht es Ihnen nun, sich auf Logik<\/em> und nicht auf Syntax<\/em>. Dieser Leitfaden erl\u00e4utert, wie Sie diese neuen generativen KI-Funktionen, die erweiterte Sprachunterst\u00fctzung und die f\u00fcnf neuen erweiterten Diagrammtypen nutzen k\u00f6nnen, die diese Version definieren.<\/p>\n Abbildung 1: Der VPasCode-Arbeitsablauf wandelt nat\u00fcrliche Sprach-Prompts in strukturierte Diagramme um und erm\u00f6glicht eine iterative, konversationelle Verfeinerung.<\/em><\/p>\n \u00a0<\/p>\n Das Herzst\u00fcck dieses Updates ist die Integration einer spezialisierten KI-Engine direkt in die Codierungsfl\u00e4che. Im Gegensatz zu generischen LLMs, die m\u00f6glicherweise ung\u00fcltige Syntax erfinden, wurde die VPasCode-KI auf die strengen grammatikalischen Regeln von Diagrammsprachen wie PlantUML, Mermaid und Graphviz feinjustiert [2]<\/a>.<\/p>\n Das Problem der “leeren Leinwand” wird mit der KI-generieren<\/strong>-Funktion gel\u00f6st. Sie m\u00fcssen keine spezifischen Schl\u00fcsselw\u00f6rter f\u00fcr Pfeile oder Container mehr abrufen.<\/p>\n So funktioniert es:<\/strong> Klicken Sie auf die KI-generieren<\/strong>-Schaltfl\u00e4che in der oberen Symbolleiste. Ein Dialogfeld \u00f6ffnet sich, in dem Sie Ihr System in einfacher englischer Sprache beschreiben k\u00f6nnen.<\/p>\n<\/li>\n Formatauswahl:<\/strong>Sie k\u00f6nnen die KI den besten Format automatisch erkennen lassen oder manuell aus PlantUML (C4, Sequenz, Klasse), Mermaid (Flussdiagramm, Mindmap) oder Graphviz ausw\u00e4hlen.<\/p>\n<\/li>\n Beispiel-Prompt:<\/strong>\u00a0\u201eErstellen Sie ein C4-Komponentendiagramm f\u00fcr eine E-Commerce-Plattform, das eine mobile App, einen API-Gateway und eine PostgreSQL-Datenbank umfasst.\u201c<\/em><\/p>\n<\/p>\n Ergebnis:<\/strong>Die KI schreibt das DSL-Skript (Domain Specific Language) und rendert das Live-Visualisierungsmodell sofort innerhalb des Editors.[1]<\/a>.<\/p>\n Architektur ist selten statisch. Das\u00a0Interaktive KI-Diagrammcode-\u00c4nderung<\/strong>Werkzeug erm\u00f6glicht es Ihnen, bestehende Diagramme zu refaktorisieren, ohne den Code manuell zu ber\u00fchren.<\/p>\n Ablauf:<\/strong>Wenn ein Diagramm ge\u00f6ffnet ist, klicken Sie auf die\u00a0KI<\/strong>Schaltfl\u00e4che \u00fcber dem Code-Panel und w\u00e4hlen Sie\u00a0\u00c4ndern<\/strong>.<\/p>\n<\/li>\n Konversationelles Bearbeiten:<\/strong>Geben Sie Anweisungen wie diese ein:<\/p>\n \u201eF\u00fcgen Sie der Checkout-Sequenz eine Verzweigung \u201aZahlung fehlgeschlagen\u2018 hinzu.\u201c<\/em><\/p>\n<\/li>\n \u201eFassen Sie alle Datenbankinteraktionen in einem einzigen Kasten zusammen.\u201c<\/em><\/p>\n<\/li>\n \u201e\u00c4ndern Sie den Stil, um das Skizzen-Thema \u201ahandschriftlich\u2018 zu verwenden.\u201c<\/em><\/p>\n<\/li>\n<\/ul>\n<\/li>\n Sicherheitsnetz:<\/strong>Bevor Sie \u00c4nderungen anwenden, k\u00f6nnen Sie auf\u00a0Details anzeigen<\/strong>klicken, um einen Code-Diff nebeneinander anzuzeigen und sicherzustellen, dass die KI kritische Logik nicht unbeabsichtigt ver\u00e4ndert hat.[1]<\/a>.<\/p>\n<\/li>\n<\/ul>\n Ein entscheidender Unterschied ist die tiefe Verkn\u00fcpfung zwischen dem\u00a0KI-Diagrammierungs-Chatbot<\/strong>\u00a0und dem Haupteditor. Wenn Sie eine Brainstorming-Sitzung im eigenst\u00e4ndigen KI-Chatbot starten, \u00fcbertr\u00e4gt ein spezieller \u201eIn VPasCode \u00f6ffnen”-Button das generierte Skript direkt in Ihren Arbeitsbereich zur Feinabstimmung und schafft so eine nahtlose Schleife zwischen Ideenfindung und Engineering.”[3]<\/a>.<\/p>\n VPasCode festigt weiterhin seine Position als zentraler Hub f\u00fcr alles, was \u201eText-zu-Diagramm” betrifft. Dieses Update erweitert die Unterst\u00fctzung in drei Schl\u00fcsselbereichen: Programmiersprachen, deklarative Sprachen und Datenstrukturen.<\/p>\n Das Reverse Engineering von Quellcode in UML-Klassendiagramme ist jetzt schneller und umfassender. Die Engine analysiert automatisch Anwendungscode, um Beziehungen, Vererbung und Abh\u00e4ngigkeiten zu visualisieren.<\/p>\n Unterst\u00fctzte Sprachen:<\/strong>\u00a0Java, TypeScript, Go, Rust, C#, Python, C, C++, PHP, Ruby, Scala, Kotlin, Swift und Elixir.<\/p>\n Neue Erg\u00e4nzung:<\/strong>\u00a0Zig<\/strong>\u00a0wurde hinzugef\u00fcgt, sodass Systemprogrammierer Speicher-sichere Code-Strukturen sofort visualisieren k\u00f6nnen.[4]<\/a>.<\/p>\n<\/li>\n<\/ul>\n F\u00fcr Entwickler, die einen modernen, deklarativen Ansatz f\u00fcr die Diagrammerstellung bevorzugen, bietet VPasCode nun umfassende Unterst\u00fctzung f\u00fcrD2<\/strong>. Dies erm\u00f6glicht es Benutzern, D2-Skripte in saubere visuelle Darstellungen zu kompilieren, die neben traditionellen PlantUML- und Mermaid-Workflows verwendet werden k\u00f6nnen.[5]<\/a>.<\/p>\n Die Visualisierung von Datenschemata ist f\u00fcr die Backend-Entwicklung entscheidend. Die Plattform enth\u00e4lt nun eine native Parsing-Funktion f\u00fcr:<\/p>\n TOML:<\/strong>\u00a0Ideal f\u00fcr Konfigurationsdateien.<\/p>\n Bereits vorhandene Unterst\u00fctzung:<\/strong>\u00a0JSON Schema, XML, DBML (Database Markup Language) und YAML-Compiler bleiben voll unterst\u00fctzt, sodass Sie rohe Datendefinitionen in Entity-Relationship-Diagramme (ERDs) umwandeln k\u00f6nnen.[6]<\/a>.<\/p>\n<\/li>\n<\/ul>\n Jenseits von Standard-Flussdiagrammen und Sequenzdiagrammen f\u00fchrt dieses Update f\u00fcnf spezialisierte Visualisierungstypen ein, die es Ingenieuren und Strategen erm\u00f6glichen, komplexe Layouts rein aus Text zu erstellen.<\/p>\n Zur strategischen Entscheidungsfindung eingesetzt, hilft dieses Diagramm Teams dabei, komplexe Probleme in f\u00fcnf Dom\u00e4nen (Klar, Kompliziert, Komplex, Chaotisch, Verwirrung) zu zerlegen, um die angemessene Managementreaktion zu bestimmen.<\/p>\n Perfekt f\u00fcr agile Retrospektiven oder Produktvergleiche: Radardiagramme erm\u00f6glichen es Ihnen, Leistungskennzahlen \u00fcber mehrere Dimensionen (z. B. Geschwindigkeit, Kosten, Qualit\u00e4t, Skalierbarkeit) gleichzeitig zu plotten, um St\u00e4rken und Schw\u00e4chen zu identifizieren.<\/p>\n Unverzichtbar f\u00fcr Compiler-Design und Dokumentation: Diese Diagramme visualisieren Syntaxregeln und strukturelle Grammatikpfade und machen komplexe Regex- oder Sprachspezifikationen auf einen Blick lesbar.<\/p>\n W\u00e4hrend einfache Flussdiagramme zeigenwas<\/em>geschieht, kl\u00e4ren Schwimmbahn-Diagrammewer<\/em>es tut. Dieses Update verbessert die F\u00e4higkeit, funktions\u00fcbergreifende Workflows zu plotten und die Aufgabenverantwortung zwischen Abteilungen wie \u201eFrontend<\/p>\n Skizzieren Sie schnell hierarchische Strukturen wie Site-Architekturen, Verzeichnisstrukturen oder verschachtelte JSON-Objekte. Dies bietet ein klares, lineares Layout zum Verst\u00e4ndnis von Tiefe und Parent-Child-Beziehungen[7]<\/a>.<\/p>\n Um diese leistungsstarken Funktionen zu unterst\u00fctzen, hat der zugrunde liegende Editor erhebliche Verbesserungen der Lebensqualit\u00e4t erhalten.<\/p>\n Hochwertige PDF-Exporte:<\/strong>Technische Dokumentation muss h\u00e4ufig offline geteilt werden. VPasCode vereinfacht dies nun mit scharfen, vektorbasierten PDF-Exportoptionen und stellt sicher, dass Diagramme in gedruckten Spezifikationen oder Berichten gestochen scharf aussehen.<\/p>\n Themen-Auswahl-UI & Theming:<\/strong>Die Anpassung des Aussehens Ihrer Diagramme ist einfacher geworden. Der aktualisierte Arbeitsbereich enth\u00e4lt eine verfeinerte Schnittstelle zur Themenwahl f\u00fcr PlantUML- und Mermaid-Engines. Sie k\u00f6nnen zwischen Themen (z. B. \u201ePlain”, \u201eSketchy[2]<\/a>.<\/p>\n PlantUML-Standardthema:<\/p>\n Ergebnis des Visual Paradigm-Themas:<\/p>\n Intelligente Diagnose:<\/strong>Ein KI-gest\u00fctzter Fehlerkorrektor l\u00e4uft im Hintergrund. Wenn ein Syntaxfehler Ihre Darstellung besch\u00e4digt, erkennt das Tool das Problem und schl\u00e4gt automatisch den korrekten Code vor, um Unterbrechungen des Workflows zu verhindern[2]<\/a>.<\/p>\n Um Ihnen den Einstieg zu erleichtern, finden Sie hier praktische Beispiele zur Anwendung dieser neuen Funktionen.<\/p>\n Ziel:<\/strong>Erstellen Sie eine hochlevelige \u00dcbersicht einer Food-Delivery-App. \u00d6ffnen Sie VPasCode.<\/p>\n<\/li>\n Klicken Sie aufKI generieren<\/strong>.<\/p>\n<\/li>\n Eingabeaufforderung:<\/strong>\u00a0\u201eErstellen Sie ein C4-Container-Diagramm f\u00fcr eine Food-Delivery-App. Enthalten Sie eine React Native Mobile-App, eine Spring Boot API, einen Redis-Cache und eine MongoDB-Datenbank. Zeigen Sie den Datenfluss f\u00fcr die Auftragserteilung.\u201c<\/em><\/p>\n<\/li>\n Ergebnis:<\/strong>Die KI generiert das Ziel:<\/strong>F\u00fcgen Sie eine Fehlerbehandlung zu einem bestehenden Anmelde-Flow hinzu. F\u00fcgen Sie Ihren bestehenden Mermaid-Sequenzcode in den Editor ein.<\/p>\n<\/li>\n Klicken Sie aufKI<\/strong>\u00a0->\u00a0\u00c4ndern<\/strong>.<\/p>\n<\/li>\n Eingabeaufforderung:<\/strong>\u00a0\u201eF\u00fcgen Sie einen alternativen Fragment hinzu, bei dem der Authentifizierungsdienst einen 401-Fehler zur\u00fcckgibt und der Benutzer aufgefordert wird, sein Passwort zur\u00fcckzusetzen.\u201c<\/em><\/p>\n<\/li>\n Ergebnis:<\/strong>\u00a0Die KI f\u00fcgt das\u00a0 Ziel:<\/strong>\u00a0Eine komplexe\u00a0 W\u00e4hlen Sie \u201eTOML\u201c aus dem Sprachmen\u00fc.<\/p>\n<\/li>\n F\u00fcgen Sie Ihren Konfigurationscode ein.<\/p>\n<\/li>\n Ergebnis:<\/strong>\u00a0VPasCode analysiert die Struktur und erstellt eine Baum- oder Schemaansicht, die Ihnen hilft, verschachtelte Tabellen und Schl\u00fcssel-Wert-Paare zu visualisieren, ohne den Rohtext lesen zu m\u00fcssen.<\/p>\n<\/li>\n<\/ol>\n Das neueste Update von Visual Paradigms VPasCode stellt eine Weiterentwicklung der Philosophie \u201eDiagramm als Code\u201c dar. Durch die direkte Integration einer kontextbewussten KI in den Editor hat Visual Paradigm die H\u00fcrde des Auswendiglernens von Syntax beseitigt und erm\u00f6glicht es Entwicklern und Architekten, im Tempo des Denkens zu arbeiten.<\/p>\n Egal, ob Sie das neue\u00a0Cynefin-Framework<\/strong>\u00a0f\u00fcr die strategische Planung nutzen, Code in UML zur\u00fcckentwickeln oder die KI einfach bitten, die \u201eAusrichtung\u201c eines Sequenzdiagramms zu korrigieren, ist der Workflow nun schneller, iterativer und deutlich zug\u00e4nglicher.Zig<\/strong>\u00a0Code in UML zur\u00fcckentwickeln oder einfach die KI bitten, die \u201eAusrichtung\u201c eines Sequenzdiagramms zu korrigieren, ist der Workflow nun schneller, iterativer und deutlich zug\u00e4nglicher. Da sich technische Dokumentation hin zu lebendigen, versionierten Assets entwickelt, positioniert sich VPasCode nicht nur als Editor, sondern als intelligenter Partner im Systemdesign.<\/p>\n Einf\u00fchrung Die Landschaft der technischen Dokumentation befindet sich in einem tiefgreifenden Wandel. Seit Jahren boten “Diagram-as-Code”-Tools wie PlantUML und Mermaid<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","footnotes":""},"categories":[81,116],"tags":[],"class_list":["post-11988","post","type-post","status-publish","format-standard","hentry","category-ai","category-vpascode"],"yoast_head":"\n![\"VPasCode-Workflow-Diagramm,](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a865213b6c59.png\")
<\/p>\n\ud83e\udd16 Kernfunktion: Erweiterung der generativen KI<\/h2>\n
1. Text-zu-Modell-Engine (sofortige Generierung)<\/h3>\n
![VPasCode-Oberfl\u00e4che, die den hervorgehobenen Button \"KI generieren\" in der Symbolleiste \u00fcber den Diagrammvorlagen zeigt.](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a865253ea30e.png\")
<\/p>\n\n
![VPasCode-Dialog f\u00fcr KI-Generierung, der die Eingabe eines Prompts f\u00fcr ein UML-Use-Case-Diagramm und den Button \"KI generieren\" zeigt.](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a865266c9123.png\")
<\/p>\n<\/li>\n![VPasCode-Funktion \"KI generieren\", die aus einer Texteingabe ein UML-Use-Case-Diagramm f\u00fcr ein Geldautomatensystem erstellt.](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a865277383f9.png\")
<\/p>\n<\/li>\n<\/ul>\n2. Iterative \u00c4nderung (das \u201e\u00c4ndern\u201c-Werkzeug)<\/h3>\n
\n
\n
3. Die VPasCode-Br\u00fccke<\/h3>\n
![Visual Paradigm KI-Chatbot-Oberfl\u00e4che, die ein ATM-Use-Case-Diagramm und den Button \"In VPasCode \u00f6ffnen\" zum \u00dcbertragen von Skripten zeigt.](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8652f98cd35.png\")
<\/p>\n\ud83d\udcbb Tiefgehende native Sprach- und Formatunterst\u00fctzung<\/h2>\n
Klassendiagramme in mehreren Sprachen<\/h3>\n
![\"VPasCode-Oberfl\u00e4che,](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8657067127d.png\")
<\/p>\n\n
![\"VPasCode-Oberfl\u00e4che,](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8656f418505.png\")
<\/p>\n<\/li>\nD2-Sprachintegration<\/h3>\n
![\"VPasCode-Oberfl\u00e4che,](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a86572100e1f.png\")
<\/p>\nWerkzeuge zur Datenstrukturierung<\/h3>\n
\n
![\"VPasCode-Oberfl\u00e4che](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8657aed9cb1.png\")
<\/p>\n<\/li>\n\ud83d\udcca F\u00fcnf neue erweiterte Diagrammtypen<\/h2>\n
1. Cynefin-Rahmenwerk (geschrieben in der Mermaid-Betaversion)<\/h3>\n
![\"VPasCode](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a86560078900.png\")
<\/p>\n2. Radardiagramme (Spinnennetzdiagramme)<\/h3>\n
![\"VPasCode](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8656161dc42.png\")
<\/p>\n3. Eisenbahn-Diagramme<\/h3>\n
![\"VPasCode-Oberfl\u00e4che,](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a865643ec3f2.png\")
<\/p>\n4. Schwimmbahn-Diagramme<\/h3>\n
![\"VPasCode-Swimlane-Diagramm,](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8656a5009f6.png\")
<\/p>\n5. Baumansicht-Diagramme<\/h3>\n
![VPasCode Mermaid-Diagramm-Men\u00fc, das die Option \"Baumansicht\" hervorhebt, um hierarchische Strukturen wie Verzeichnisstrukturen zu visualisieren.](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8656c5bcdfc.png\")
<\/p>\n\ud83d\udee0\ufe0f Editor-Verbesserungen & Benutzererfahrung<\/h2>\n
\n
![VPasCode-Editor, der Java-Code und ein generiertes UML-Diagramm zeigt, wobei die Option \"Als PDF exportieren\" hervorgehoben ist.](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8657f2d65fd.png\")
<\/p>\n<\/li>\n![\"VPasCode-Editor,](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8658e35cc35.png\")
<\/p>\n<\/li>\n![\"VPasCode-Dropdown-Men\u00fc](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8658418e029.png\")
<\/p>\n![\"VPasCode-Editor](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8659164559c.png\")
<\/p>\n\n
![\"VPasCode-Editor](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8659e10801a.png\")
<\/p>\n<\/li>\n<\/ul>\nGrundkonzepte und Beispiele<\/h2>\n
Beispiel 1: Erstellen einer Microservices-Architektur<\/h3>\n
\nAktion:<\/strong><\/p>\n\n
@startuml<\/code>\u00a0\u2026\u00a0@enduml<\/code>Block. Das Vorschau-Fenster zeigt sofort die Container und Beziehungen an.<\/p>\n<\/li>\n<\/ol>\nBeispiel 2: Verfeinern eines Sequenzdiagramms<\/h3>\n
\nAktion:<\/strong><\/p>\n\n
alt<\/code>\u00a0\/\u00a0else<\/code>\u00a0Logik in das Mermaid-Skript ein. Sie pr\u00fcfen die \u00c4nderungen, um sicherzustellen, dass die Logik korrekt ist, und akzeptieren dann die \u00c4nderung.<\/p>\n<\/li>\n<\/ol>\nBeispiel 3: Visualisierung einer Konfigurationsdatei<\/h3>\n
config.toml<\/code>\u00a0Datei verstehen.
\nAktion:<\/strong><\/p>\n\n
Fazit<\/h2>\n
Empfohlene Lekt\u00fcre & Ressourcen<\/h2>\n
\n