Dieser Leitfaden konzentriert sich speziell auf das Container-Diagramm<\/strong><\/a>, die zweite Ebene des C4-Modells, wobei das “Internet-Banking-System” als praktisches Fallbeispiel dient. Wir werden untersuchen, wie man Visual Paradigm<\/strong>,<\/a> dessen KI-Chatbot<\/strong><\/a> und das VPasCode<\/strong><\/a> Skriptsprache nutzen, um diese Diagramme effizient zu erstellen, zu pflegen und weiterzuentwickeln. Durch die Integration KI-gest\u00fctzter Unterst\u00fctzung mit Infrastructure-as-Code-Prinzipien k\u00f6nnen Teams statische Diagramme in lebendige architektonische Dokumentation verwandeln.<\/p>\n Ein Container<\/a> im C4-Modell stellt eine Anwendung oder einen Datenspeicher dar. Es ist eine Laufzeitgrenze, die Verhalten und Technologieentscheidungen kapselt. Basierend auf dem bereitgestellten Internet-Banking-System-Diagramm sind dies die Kernkonzepte:<\/p>\n Es ist entscheidend, C4-Container nicht mit Docker-Containern oder UML-Komponenten zu verwechseln. In diesem Diagramm:<\/p>\n UI (Single-Page Application):<\/strong> Eine JavaScript-SPA, die im Browser ausgef\u00fchrt wird.<\/p>\n<\/li>\n Backend (API-Anwendung):<\/strong> Ein Java\/Spring Boot-Service, der die Gesch\u00e4ftslogik verarbeitet.<\/p>\n<\/li>\n Kontoauszugs-Speicher & Datenbank:<\/strong> Spezialisierte Pfeile in C4-Diagrammen m\u00fcssen sowohl mit dem\u00a0Zweck<\/em>\u00a0als auch mit dem\u00a0Technologie<\/em>Das bereitgestellte Diagramm veranschaulicht diese Best Practice vorbildlich:<\/p>\n Die\u00a0 Das manuelle Erstellen und Pflegen von C4-Diagrammen ist fehleranf\u00e4llig. Die Kombination aus Visual Paradigm (VP), KI-Chatbot und VPasCode schafft einen leistungsstarken Workflow.<\/p>\n Diese Tools bilden einen Feedback-Loop<\/strong>:<\/p>\n KI-Chatbot<\/strong> fungiert als \u00dcbersetzer zwischen menschlicher Absicht und maschinenlesbarem VPasCode.<\/p>\n<\/li>\n VPasCode<\/strong> dient als einzige Wahrheitsquelle, die in Git neben dem Anwendungscode gespeichert wird.<\/p>\n<\/li>\n<\/ol>\n Visual Paradigm<\/strong> rendert das VPasCode in interaktive Diagramme, bereichert sie mit Metadaten und ver\u00f6ffentlicht sie f\u00fcr die Stakeholder.<\/p>\n<\/li>\n<\/ol>\n Wenn Sie das VPasCode aktualisieren (manuell oder \u00fcber KI), aktualisiert Visual Paradigm das Diagramm automatisch. Wenn Sie die KI auffordern, “eine Caching-Schicht hinzuzuf\u00fcgen”, modifiziert sie das VPasCode direkt und bewahrt Layout-Anweisungen wie Im Folgenden finden Sie den vollst\u00e4ndigen VPasCode-Quellcode f\u00fcr das Container-Diagramm des Internet-Banking-Systems. Dieser Code zeigt die korrekte Verwendung der C4-PlantUML-Standardbibliothek innerhalb des Visual-Paradigm-\u00d6kosystems.<\/p>\n![\"Visual](\"https:\/\/www.hi-posts.com\/wp-content\/uploads\/2026\/08\/img_6a8544d10297c.png\")
<\/p>\nSchl\u00fcsselkonzepte: Die C4-Container-Ebene<\/h2>\n
1. Container vs. Komponenten<\/a><\/h3>\n
\n
ContainerDb<\/code>\u00a0Elemente, die jeweils NoSQL- und RDBMS-Technologien darstellen.<\/p>\n<\/li>\n<\/ul>\n2. Beziehungen und Protokolle<\/h3>\n
\n
Rel(ui, backend, \"Sendet JSON\/HTTPS-API-Anfragen\", \"JSON\/HTTPS\")<\/code>\u00a0definiert den Vertrag eindeutig.<\/p>\n<\/li>\nRel(backend, coreBanking, \"F\u00fchrt API-Aufrufe durch...\", \"XML\/HTTPS\")<\/code>\u00a0hebt Legacy-Integrationsmuster hervor.<\/p>\n<\/li>\nRel(ses, customer, \"Liefert E-Mails aus...\", \"E-Mail\")<\/code>\u00a0zeigt asynchrone ausgehende Kommunikation.<\/p>\n<\/li>\n<\/ul>\n3. Systemgrenzen<\/h3>\n
Container_Boundary(system, \"Internet-Banking-System\")<\/code>\u00a0fasst interne Container separat von externen Systemen (System_Ext<\/code>). Diese visuelle Unterscheidung zeigt den Lesern sofort, was das Team besitzt, und wovon es abh\u00e4ngig ist (z. B. AWS SES, Core-Banking-System).<\/p>\nTooling-Synergie: Visual Paradigm + KI-Chatbot + VPasCode<\/h2>\n
![\"Tooling-Synergie:](\"https:\/\/chat.visual-paradigm.com\/wp-content\/uploads\/2025\/11\/Generating-C4-System-Context-Diagram.png\")
<\/p>\nWarum diesen Stack verwenden?<\/h3>\n
\n\n
\n \nTool<\/th>\n Rolle<\/th>\n Nutzen im C4-Modellierung<\/th>\n<\/tr>\n<\/thead>\n \n Visual Paradigm<\/strong><\/td>\n Modellierungsplattform<\/td>\n Native C4-Unterst\u00fctzung, Unternehmens-Repository, Export in mehreren Formaten und R\u00fcckverfolgbarkeit zu Anforderungen.<\/td>\n<\/tr>\n \n KI-Chatbot<\/strong><\/td>\n Intelligenter Assistent<\/td>\n Erstellt VPasCode aus nat\u00fcrlicher Sprache, validiert die C4-Syntax, schl\u00e4gt fehlende Beziehungen vor und erkl\u00e4rt architektonische Entscheidungen.<\/td>\n<\/tr>\n \n VPasCode<\/strong><\/td>\n Skriptsprache<\/td>\n Textbasierte Diagrammdefinition (\u00e4hnlich wie PlantUML), versionskontrollierbar, erm\u00f6glicht CI\/CD-Integration und Masseneditoring.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Die Beziehung zwischen den Tools<\/h3>\n
\n
![\"VPasCode](\"https:\/\/www.visual-paradigm.com\/servlet\/editor-content\/guide\/comprehensive-guide-to-vpascode-by-visual-paradigm\/sites\/7\/2026\/06\/img_6a1d22176276f.png\")
<\/p>\n\n
LAYOUT_TOP_DOWN()<\/code>.<\/p>\nPraktisches Beispiel: Internet-Banking-System<\/h2>\n
![\"Visual](\"https:\/\/www.hi-posts.com\/wp-content\/uploads\/2026\/08\/img_6a85444017d7f.png\")
<\/p>\n
\n
\n