![\"Vier-Schritte-Workflow,](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/09\/img_6aacd7d64dbf5.png\")
<\/p>\nDer Visual Paradigm AI-Chatbot erm\u00f6glicht es, ein C4-Systemkontextdiagramm aus einer Beschreibung in nat\u00fcrlicher Sprache einer Anwendung, ihrer Benutzer und der externen Systeme, mit denen sie interagiert, zu erstellen. Ein von einer KI generiertes Diagramm ist jedoch am n\u00fctzlichsten, wenn es nach der Generierung bearbeitbar und wartbar bleibt.<\/p>\n
Diese Anleitung zeigt einen End-to-End-Arbeitsablauf zur Erstellung eines Kontextdiagramms f\u00fcr eine Food-Delivery-Plattform unter Verwendung von C4-PlantUML. Sie lernen, wie Sie von einem von einer KI generierten Diagramm zu bearbeitbarem PlantUML-Code wechseln, das Modell in VPasCode verfeinern und es anschlie\u00dfend visuell in Visual Paradigm Online weiter bearbeiten. Der Ansatz kombiniert die Geschwindigkeit der KI-gest\u00fctzten Modellierung mit der Flexibilit\u00e4t von Diagramm-as-Code und der Benutzerfreundlichkeit eines grafischen Diagramm-Editors.<\/p>\n
<\/p>\n
Visual Paradigm bietet einen praktischen Arbeitsablauf, um eine Architekturbeschreibung in nat\u00fcrlicher Sprache in ein bearbeitbares C4-Kontextdiagramm umzuwandeln:<\/p>\n
Beschreiben Sie das System im Visual Paradigm AI-Chatbot.<\/p>\n
![\"Der](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/09\/img_6aacd32cad84d.png\")
<\/p>\n<\/li>\n
Generieren und \u00fcberpr\u00fcfen Sie das C4-Systemkontextdiagramm.<\/p>\n<\/li>\n
\u00d6ffnen Sie das Ergebnis in VPasCode als C4-PlantUML.<\/p>\n
![\"Der](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/09\/img_6aacd349bc71b.png\")
<\/p>\n<\/li>\n
\u00c4ndern Sie das Diagramm durch Bearbeiten des PlantUML-Codes.<\/p>\n
![\"VPasCode-Schnittstelle,](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/09\/img_6aacd35c46b64.png\")
<\/p>\n<\/li>\n
Senden Sie das Ergebnis optional an Visual Paradigm Online.<\/p>\n
![\"Visual](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/09\/img_6aacd36bb1156.png\")
<\/p>\n<\/li>\n
\u00c4ndern Sie das Diagramm visuell mithilfe des Drag-and-Drop-Diagramm-Editors.<\/p>\n<\/li>\n<\/ol>\n
Dies bietet Ihnen zwei Bearbeitungspfade:<\/p>\n
Code-basierte Bearbeitung:<\/strong>VPasCode und C4-PlantUML<\/p>\n<\/li>\n GUI-basierte Bearbeitung:<\/strong>Visual Paradigm Online Diagramm-Editor<\/p>\n<\/li>\n<\/ul>\n Der AI-Chatbot von Visual Paradigm unterst\u00fctzt C4-Systemkontext-, Container-, Komponenten- und Bereitstellungsdiagramme. Er kann ein generiertes Diagramm auch durch Befehle in nat\u00fcrlicher Sprache verfeinern, wie das Hinzuf\u00fcgen, Entfernen, Umbenennen oder Neuverbinden von Elementen.<\/p>\n Ein C4-Kontextdiagramm ist die Ansicht auf h\u00f6chster Ebene eines Softwaresystems. Es zeigt:<\/p>\n DasSystem von Interesse<\/strong><\/p>\n<\/li>\n Menschliche Benutzer und organisatorische Akteure<\/p>\n<\/li>\n Externe Softwaresysteme<\/p>\n<\/li>\n Wichtige Beziehungen zwischen diesen Elementen<\/p>\n<\/li>\n Eine kurze Beschreibung, wie jede Beziehung funktioniert<\/p>\n<\/li>\n<\/ul>\n Es zeigt normalerweise keine internen Dienste, Datenbanken, Klassen, APIs oder Infrastrukturdetails. Diese geh\u00f6ren in C4-Diagramme auf niedrigeren Ebenen.<\/p>\n Ein Kontextdiagramm f\u00fcr eine Online-Food-Delivery-Plattform k\u00f6nnte beispielsweise Folgendes enthalten:<\/p>\n Kunde<\/p>\n<\/li>\n Restaurantmanager<\/p>\n<\/li>\n Lieferfahrer<\/p>\n<\/li>\n Zahlungsanbieter<\/p>\n<\/li>\n Karten- und Geolokalisierungsdienst<\/p>\n<\/li>\n Benachrichtigungsdienst<\/p>\n<\/li>\n Essenslieferplattform<\/p>\n<\/li>\n<\/ul>\n Das zentrale System sollte im visuellen Fokus bleiben. Externe Personen und Systeme sollten darum herum platziert werden.<\/p>\n Die Qualit\u00e4t des generierten Diagramms h\u00e4ngt stark von der dem Chatbot bereitgestellten Architekturbeschreibung ab.<\/p>\n Ein n\u00fctzlicher Prompt spezifiziert:<\/p>\n Der Systemname<\/p>\n<\/li>\n Der Zweck des Systems<\/p>\n<\/li>\n Die Personen, die es verwenden<\/p>\n<\/li>\n Externe Systeme, mit denen es kommuniziert<\/p>\n<\/li>\n Die Beziehungen zwischen ihnen<\/p>\n<\/li>\n Das gew\u00fcnschte C4-Diagramm-Level<\/p>\n<\/li>\n Das gew\u00fcnschte Ausgabeformat<\/p>\n<\/li>\n Was nicht enthalten sein sollte<\/p>\n<\/li>\n<\/ul>\n Die explizite Anweisung, interne Details auszuschlie\u00dfen, ist wichtig. Ohne diese kann ein KI-Generator ein Diagramm erzeugen, das Informationen auf Kontextebene und Containerebene mischt.<\/p>\n \u00d6ffnen Sie den Visual Paradigm AI-Chatbot und starten Sie eine neue Konversation oder Diagramm-Generierungssitzung.<\/p>\n Je nach Schnittstelle und Abonnementausgabe kann der Chatbot einen Diagrammtyp-Ausw\u00e4hler bereitstellen. W\u00e4hlen Sie:<\/p>\n C4-Modell<\/strong><\/p>\n<\/li>\n Systemkontextdiagramm<\/strong><\/p>\n<\/li>\n<\/ul>\n Geben Sie dann den Prompt ein.<\/p>\n Der allgemeine Chatbot-Arbeitsablauf von Visual Paradigm ist:<\/p>\n Beschreiben Sie das Diagramm.<\/p>\n<\/li>\n Lassen Sie die KI das initiale Modell generieren.<\/p>\n<\/li>\n \u00dcberpr\u00fcfen Sie das Ergebnis.<\/p>\n<\/li>\n Verfeinern Sie es mit Befehlen in nat\u00fcrlicher Sprache.<\/p>\n<\/li>\n Exportieren Sie das Ergebnis oder fahren Sie mit der Bearbeitung in einem anderen Visual Paradigm-Tool fort.<\/p>\n<\/li>\n<\/ol>\n Pr\u00fcfen Sie, ob das Diagramm Folgendes enth\u00e4lt:<\/p>\n Genau ein zentrales System<\/p>\n<\/li>\n Alle erforderlichen Personen<\/p>\n<\/li>\n Alle relevanten externen Systeme<\/p>\n<\/li>\n Korrekte Beziehungsrichtungen<\/p>\n<\/li>\n Knappe Beziehungsbeschreibungen<\/p>\n<\/li>\n Keine unn\u00f6tigen internen Dienste oder Datenbanken<\/p>\n<\/li>\n Konsistente Benennung<\/p>\n<\/li>\n Lesbares Layout<\/p>\n<\/li>\n<\/ul>\n Ein generiertes Diagramm ist ein Ausgangspunkt, kein Ersatz f\u00fcr eine Architektur\u00fcberpr\u00fcfung.<\/p>\n Der Chatbot kann das Diagramm mit gew\u00f6hnlicher Sprache modifizieren.<\/p>\n Die Dokumentation des KI-Chatbots beschreibt diesen iterativen Ansatz, einschlie\u00dflich Befehle zum Hinzuf\u00fcgen von Payment-Gateways, zum Umbenennen von Elementen, zum \u00c4ndern von Beziehungen und zum Refactoring von Diagrammen.<\/p>\n Nach dem Erstellen und Verfeinern des Diagramms verwenden Sie die Aktion, die \u00e4hnlich beschriftet ist wie:<\/p>\n In VPasCode \u00f6ffnen<\/strong><\/p>\n<\/li>\n In VPasCode bearbeiten<\/strong><\/p>\n<\/li>\n Code \u00f6ffnen<\/strong><\/p>\n<\/li>\n Code zum Bearbeiten generieren<\/strong><\/p>\n<\/li>\n<\/ul>\n Die genaue Beschriftung des Buttons kann je nach aktueller Benutzeroberfl\u00e4che variieren.<\/p>\n Dadurch wird der Code des Diagramms in VPasCode \u00fcbertragen, wo Sie das Diagramm als Text bearbeiten k\u00f6nnen, w\u00e4hrend Sie eine Live-Vorschau angezeigt bekommen. Visual Paradigm beschreibt VPasCode als einen browserbasierten Diagramm-als-Code-Editor, der PlantUML, C4-Modelle, Mermaid, Graphviz und andere Syntaxformate unterst\u00fctzt.<\/p>\n Der generierte Code sollte C4-PlantUML verwenden, typischerweise mit:<\/p>\n1. Verstehen Sie das C4-Kontextdiagramm<\/h2>\n
\n
\n
2. Erstellen Sie ein gutes KI-Prompt<\/h2>\n
\n
Beispiel-Prompt<\/h3>\n
Erstellen Sie ein C4-Systemkontextdiagramm f\u00fcr eine Online-Essenslieferplattform.\r\n\r\nInteressenssystem:\r\nEssenslieferplattform \u2014 erm\u00f6glicht Kunden, Restaurants zu durchsuchen, Bestellungen aufzugeben, Zahlungen zu t\u00e4tigen und Lieferungen zu verfolgen.\r\n\r\nPersonen:\r\n1. Kunde \u2014 durchsucht Restaurants, gibt Bestellungen auf, zahlt und verfolgt die Lieferung.\r\n2. Restaurantmanager \u2014 verwaltet Speisekarten, akzeptiert Bestellungen und aktualisiert den Bestellstatus.\r\n3. Lieferfahrer \u2014 akzeptiert Lieferauftr\u00e4ge und aktualisiert den Lieferfortschritt.\r\n4. Operations-Administrator \u2014 \u00fcberwacht die Plattformaktivit\u00e4t und bearbeitet Supportprobleme.\r\n\r\nExterne Systeme:\r\n1. Zahlungsanbieter \u2014 autorisiert und erfasst Kundenzahlungen.\r\n2. Karten- und Geolokalisierungsdienst \u2014 stellt Adressen, Routen und Lieferorte bereit.\r\n3. Benachrichtigungsdienst \u2014 sendet E-Mails, SMS und Push-Benachrichtigungen.\r\n\r\nBeziehungen:\r\n- Der Kunde verwendet die Essenslieferplattform, um Restaurants zu durchsuchen, Bestellungen aufzugeben, Zahlungen zu t\u00e4tigen und Lieferungen zu verfolgen.\r\n- Der Restaurantmanager verwendet die Essenslieferplattform, um Speisekarten zu verwalten und Bestellungen zu bearbeiten.\r\n- Der Lieferfahrer verwendet die Essenslieferplattform, um Lieferauftr\u00e4ge zu erhalten und den Lieferstatus zu aktualisieren.\r\n- Der Operations-Administrator verwendet die Essenslieferplattform, um den Betrieb zu \u00fcberwachen und Probleme zu l\u00f6sen.\r\n- Die Essenslieferplattform verwendet den Zahlungsanbieter, um Zahlungen zu autorisieren und zu erfassen.\r\n- Die Essenslieferplattform verwendet den Karten- und Geolokalisierungsdienst, um Routen zu berechnen und Standorte zu verfolgen.\r\n- Die Essenslieferplattform verwendet den Benachrichtigungsdienst, um Benachrichtigungen zu senden.\r\n\r\nErstellen Sie ein sauberes C4-Systemkontextdiagramm. Zeigen Sie keine internen Container, Komponenten, Datenbanken, Klassen oder Bereitstellungsinfrastrukturen. Verwenden Sie pr\u00e4gnante Bezeichnungen f\u00fcr die Beziehungen.\r\n<\/code><\/pre>\n3. Generieren Sie das Diagramm im Visual Paradigm AI-Chatbot<\/h2>\n
\n
\n
\u00dcberpr\u00fcfen Sie das erste Ergebnis<\/h3>\n
\n
4. Verfeinern Sie das Diagramm durch Konversation<\/h2>\n
Ein Element hinzuf\u00fcgen<\/h3>\n
F\u00fcgen Sie einen Kundenbetreuer hinzu, der die Food-Delivery-Plattform nutzt, um Kundenprobleme zu untersuchen und R\u00fcckerstattungen zu bearbeiten.\r\n<\/code><\/pre>\nEin externes System hinzuf\u00fcgen<\/h3>\n
F\u00fcgen Sie einen externen Betrugserkennungsdienst hinzu, der von der Food-Delivery-Plattform genutzt wird, um verd\u00e4chtige Zahlungen zu bewerten.\r\n<\/code><\/pre>\nEin Element umbenennen<\/h3>\n
Benennen Sie \u201eNotification Service\u201c in \u201eMessaging and Notification Service\u201c um.\r\n<\/code><\/pre>\nEine Beziehung \u00e4ndern<\/h3>\n
\u00c4ndern Sie die Beziehung zwischen dem Lieferfahrer und der Food-Delivery-Plattform zu:\r\n\u201eErh\u00e4lt Lieferauftr\u00e4ge und \u00fcbermittelt Statusupdates zur Lieferung.\u201c\r\n<\/code><\/pre>\nEin Element entfernen<\/h3>\n
Entfernen Sie den Operations Administrator aus dem Diagramm.\r\n<\/code><\/pre>\nDas Layout verbessern<\/h3>\n
Ordnen Sie das Diagramm so um, dass Personen oben erscheinen, externe Systeme unten und die Food-Delivery-Plattform zentriert bleibt.\r\n<\/code><\/pre>\nDas Diagramm vereinfachen<\/h3>\n
Vereinfachen Sie dies zu einem strengen C4-Systemkontextdiagramm. Entfernen Sie Implementierungsdetails, Datenbanken, APIs, Microservices und interne Komponenten.\r\n<\/code><\/pre>\nEine Konsistenz\u00fcberpr\u00fcfung anfordern<\/h3>\n
\u00dcberpr\u00fcfen Sie das Diagramm auf fehlende Beziehungen, mehrdeutige Beschriftungen, doppelte Systeme und Elemente, die nicht in ein C4-Kontextdiagramm geh\u00f6ren.\r\n<\/code><\/pre>\nTeil 1: \u00d6ffnen Sie das Diagramm in VPasCode f\u00fcr die Code-Bearbeitung<\/h1>\n
5. Verwenden Sie \u201eIn VPasCode \u00f6ffnen” oder \u201eIn VPasCode bearbeiten”<\/h2>\n
\n
\n\nPlantUML<\/span>
\n
\n