Stoppen Sie das Ziehen von Boxen: Erstellen von C4-Diagrammen über VPasCode und KI-Chatbots

Das Problem der GUI-zentrierten Architektur

Seit Jahren steckt die C4-Modellierung in einem Paradoxon fest: Wir setzen uns für „Architektur als Code” ein, doch die meisten Teams erstellen ihre C4-Diagramme immer noch, indem sie Boxen in einer GUI ziehen. Dies führt zu veralteter Dokumentation, Merge-Konflikten in Binärdateien und einer Diskrepanz zwischen dem Diagramm und dem tatsächlichen System.

Moderne Entwicklungsteams benötigen einen Workflow, bei demGespräche das Design anregen und Code es aufrechterhält. Durch die Kombination von Visual ParadigmsKI-Chatbot mit VPasCodekönnen Sie in wenigen Minuten von natürlichen Sprachanweisungen zu produktionsreifen C4-PlantUML-Diagrammen wechseln – ganz ohne die Maus zu berühren.

Dieser Leitfaden demonstriert diesen Workflow anhand konkreter PlantUML-Beispiele.

Phase 1: Konversationelles Design mit KI-Chatbot

Der KI-Chatbot in Visual Paradigm fungiert als Ihr architektonischer Co-Pilot. Anstatt mit einer leeren Leinwand zu beginnen, starten Sie mit einer klaren Absicht.

✅ Effektive Prompting-Strategie

Bitten Sie die KI nicht, „ein Diagramm zu zeichnen”. Bitten Sie sie stattdessen,ein System unter Verwendung von C4-Semantik zu modellieren. Seien Sie spezifisch bezüglich Grenzen, Technologien und Datenflüsse.

💬 Beispiel für einen KI-Chatbot-Prompt:
„Agieren Sie als Softwarearchitekt. Erstellen Sie ein C4-Container-Diagramm für ein ‚Online-Banking-System‘. Beziehen Sie eine Web-App (React), eine Mobile-App (Flutter), einen API-Gateway (Kong), einen Core-Banking-Service (.NET) und eine PostgreSQL-Datenbank ein. Zeigen Sie den Authentifizierungsfluss über OAuth2 und Kontostandabfragen. Geben Sie gültigen C4-PlantUML-Code unter Verwendung der offiziellen Makros aus.“

🤖 Erwarteter KI-Ausgabewert (verfeinert)

Die KI wird ein erstes Entwurfs-PlantUML-Modell generieren. Überprüfen Sie es kritisch – KI ist hervorragend in der Struktur, kann aber Beziehungen halluzinieren. Verwenden Sie nachfolgende Chat-Prompts zur Verfeinerung:„Fügen Sie einen Redis-Cache zwischen dem API-Gateway und dem Core-Banking-Service für das Session-Management hinzu“ oder „Markieren Sie die PostgreSQL-Datenbank als veraltet und fügen Sie einen neuen MongoDB-Cluster hinzu.“

Phase 2: Deterministische Modellierung mit VPasCode & PlantUML

Sobald die KI einen brauchbaren Entwurf generiert hat,beenden Sie das Chatten und beginnen Sie mit dem Codieren. Kopieren Sie das verfeinerte PlantUML in einen.pumlDatei, die von VPasCode verwaltet wird. Dies ist Ihre einzige Quelle der Wahrheit.

Im Folgenden finden Sie produktionsreife C4 PlantUML-Beispiele, die über diesen Workflow erstellt wurden. Stellen Sie sicher, dass Ihr Visual Paradigm-Projekt die C4-PlantUML-Bibliothek.

Beispiel 1: Systemkontextdiagramm (Ebene 1)

Dies definiert die Grenze Ihres Systems und seiner externen Akteure.

@startuml OnlineBanking_Context
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

title Systemkontext: Online-Banking-Plattform

Person(customer, "Bankkunde", "Konten einsehen, Gelder überweisen, Rechnungen bezahlen")
Person(admin, "Back-Office-Administrator", "Verwaltet Benutzer, überwacht Transaktionen")

System(banking, "Online-Banking-Plattform", "Bietet Internetbanking-Dienste über Web und Mobile an")

System_Ext(coreLegacy, "Core-Banking-Mainframe", "Verarbeitet Transaktionen, führt Hauptbuch")
System_Ext(email, "E-Mail-Dienst", "Sendet Benachrichtigungen und Kontoauszüge")
System_Ext(oauth, "OAuth2-Anbieter", "Verwaltet Identität und Authentifizierung")

Rel(customer, banking, "Verwendet", "HTTPS/WebSocket")
Rel(admin, banking, "Verwaltet", "HTTPS")
Rel(banking, coreLegacy, "Liest/Schreibt", "REST/SOAP")
Rel(banking, email, "Sendet Warnungen", "SMTP/API")
Rel(banking, oauth, "Authentifiziert", "OIDC")

@enduml

Beispiel 2: Container-Diagramm (Ebene 2)

Zerlegt das System in Laufzeit-Container. Beachten Sie die Verwendung von ContainerDb, ContainerQueueund Technologie-Tags – entscheidend für moderne Cloud-native Systeme.

@startuml OnlineBanking_Containers
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

title Container-Diagramm: Online-Banking-Plattform

Person(customer, "Bankkunde")

System_Boundary(banking, "Online-Banking-Plattform") {
    Container(webapp, "Webanwendung", "React + Node.js", "SPA für browserbasiertes Banking")
    Container(mobile, "Mobile App", "Flutter", "Native Erfahrung für iOS/Android")
    Container(api, "API-Gateway", "Kong", "Leitet Anfragen weiter, Rate Limiting, Auth-Validierung")
    Container(service, "Kontendienst", ".NET 8", "Geschäftslogik für Konten & Guthaben")
    Container(cache, "Sitzungscache", "Redis", "Speichert JWT-Tokens & Sitzungsstatus")
    ContainerDb(db, "Kontendatenbank", "PostgreSQL", "Kundenkonten, Guthaben, Transaktionen")
    ContainerQueue(events, "Event-Bus", "RabbitMQ", "Asynchrone Transaktionsbenachrichtigungen")
}

System_Ext(oauth, "OAuth2-Anbieter")
System_Ext(legacy, "Core-Banking-Mainframe")

Rel(customer, webapp, "Verwendet", "HTTPS")
Rel(customer, mobile, "Verwendet", "HTTPS")
Rel(webapp, api, "Ruft auf", "REST/JSON")
Rel(mobile, api, "Ruft auf", "REST/JSON")
Rel(api, oauth, "Validiert Token", "OIDC")
Rel(api, service, "Leitet weiter an", "gRPC")
Rel(service, cache, "Liest/Schreibt Sitzung", "TCP")
Rel(service, db, "Fragt ab", "SQL/TCP")
Rel(service, events, "Veröffentlicht", "AMQP")
Rel(service, legacy, "Synchronisiert Hauptbuch", "SOAP")

@enduml

Beispiel 3: Komponentendiagramm (Ebene 3) – Kontendienst

Zoomt in einen einzelnen Container hinein. Hier zeigt sich VPasCode von seiner besten Seite: Komponenten werden direkt Code-Modulen zugeordnet.

@startuml AccountService_Components
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

title Komponentendiagramm: Kontendienst (.NET 8)

Container(api, "API-Gateway", "Kong")
ContainerDb(db, "Kontendatenbank", "PostgreSQL")
ContainerQueue(events, "Event-Bus", "RabbitMQ")

Component(auth, "Auth-Middleware", "ASP.NET-Filter", "Validiert JWT, extrahiert Benutzerkontext")
Component(controller, "AccountController", "ASP.NET-API", "REST-Endpunkte für /accounts")
Component(domain, "AccountDomainService", "C#-Klassenbibliothek", "Guthabenberechnung, Überweisungsregeln")
Component(repo, "AccountRepository", "EF Core", "Datenzugriff, Query-Optimierung")
Component(publisher, "EventPublisher", "MassTransit", "Veröffentlicht TransactionCompleted-Events")

Rel(api, auth, "Reicht Anfrage weiter")
Rel(auth, controller, "Leitet authentifizierte Anfrage weiter")
Rel(controller, domain, "Ruft Geschäftslogik auf")
Rel(domain, repo, "Fragt ab/Speichert")
Rel(repo, db, "Führt SQL aus")
Rel(domain, publisher, "Gibt Domänen-Events ab")
Rel(publisher, events, "Veröffentlicht", "AMQP")

@enduml

Phase 3: Integration von VPasCode in Ihren Entwicklungs-Workflow

Das Erstellen von PlantUML ist nur die halbe Miete. So bringen Sie es in einem modernen Team zum Durchbruch:

Versionieren Sie alles

Speichern Sie alle .puml Dateien zusammen mit Ihrem Anwendungscode im selben Repository. Behandeln Sie Diagramme wie Infrastructure-as-Code:

/docs/architecture/c4/
├── 01-context.puml
├── 02-containers.puml
├── 03-account-service-components.puml
└── README.md

Rendering in CI/CD automatisieren

Verwenden Sie die CLI von Visual Paradigm oder eine GitHub Action, um bei jedem PR PNGs/SVGs zu rendern. Geben Sie gerenderte Bilder niemals manuell in das Repository ein.

# Beispiel für einen GitHub Action-Ausschnitt
- name: C4-Diagramme rendern
  run: |
    vp-cli render -i docs/architecture/c4/*.puml 
                  -o docs/architecture/output/ 
                  -f svg --c4-layout auto

Zweiseitige Synchronisation mit VPasCode

VPasCode ist nicht nur ein Renderer – es ist ein Modell-Synchronisations-Engine. Wenn Sie PlantUML aktualisieren:

• Das zentrale Modell von Visual Paradigm wird automatisch aktualisiert

• Querverweise (z. B. die Verknüpfung einer Komponente mit einem Jira-Epic oder einem Git-Repository) bleiben erhalten

• Teammitglieder, die die GUI verwenden, sehen Änderungen in Echtzeit

• KI-Chatbot-Gespräche können auf den aktuellen Modellzustand verweisen, nicht auf einen veralteten Schnappschuss

⚠️ Kritische Warnung: Lassen Sie niemals von KI generiertes PlantUML ohne menschliche Prüfung zu. KI erfindet häufig nicht existierende APIs, bezeichnet Protokolle falsch oder lässt kritische Sicherheitsgrenzen weg. Validieren Sie generierten Code vor dem Commit immer gegen Ihre tatsächliche Codebasis und Ihr Bedrohungsmodell.

Übernahmekontrolleliste für moderne Teams

Abschließender Gedanke

C4-Modellierung sollte keine Belastung für die Geschwindigkeit Ihres Teams sein. Indem man KI als den kreativen Funken und VPasCode als den deterministischen Anker erhält man das Beste aus beiden Welten: schnelle Exploration und nachhaltige Dokumentation. Hören Sie auf, Kästen zu ziehen. Beginnen Sie mit der Architekturierung im Tempo von Gesprächen.