{"id":11840,"date":"2026-03-05T10:48:15","date_gmt":"2026-03-05T02:48:15","guid":{"rendered":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"modified":"2026-03-05T10:48:15","modified_gmt":"2026-03-05T02:48:15","slug":"a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","title":{"rendered":"Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc)"},"content":{"rendered":"<p>Die\u00a0<strong>C4-Modell<\/strong>, entwickelt von Simon Brown, ist eine einfache, hierarchische und entwicklungsfreundliche Methode zur Visualisierung von Softwarearchitekturen. Es verwendet vier Abstraktionsstufen (daher \u201eC4\u201c), um ein System von der h\u00f6chsten \u00dcbersichtsebene bis hin zu Code-Ebenen detailliert zu beschreiben:<\/p>\n<ol>\n<li>\n<p><strong>Systemkontext<\/strong>\u00a0(Ebene 1) \u2013 Das gro\u00dfe Ganze: das System und seine Benutzer\/externen Abh\u00e4ngigkeiten.<\/p>\n<\/li>\n<li>\n<p><strong>Container<\/strong>\u00a0(Ebene 2) \u2013 Hochrangige technologische Entscheidungen und Verantwortlichkeiten.<\/p>\n<\/li>\n<li>\n<p><strong>Komponenten<\/strong>\u00a0(Ebene 3) \u2013 Wichtige logische Bausteine innerhalb eines Containers.<\/p>\n<\/li>\n<li>\n<p><strong>Code<\/strong>\u00a0(Ebene 4) \u2013 Optional Details auf Klassenebene oder zur Code-Struktur.<\/p>\n<\/li>\n<\/ol>\n<p>Es wird durch drei zus\u00e4tzliche Diagrammtypen unterst\u00fctzt:<\/p>\n<ul>\n<li>\n<p><strong>Systemlandschaft<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Dynamisch<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Bereitstellung<\/strong><\/p>\n<\/li>\n<\/ul>\n<p class=\"\">Das Modell ist notationsunabh\u00e4ngig (Sie k\u00f6nnen jedes Diagrammierungstool verwenden) und legt den Fokus auf Klarheit, Konsistenz und ma\u00dfgeschneiderte Detailtiefe f\u00fcr die Zielgruppe. Es wird weithin eingesetzt, da es \u201eBig Ball of Mud\u201c-Architekturdiagramme vermeidet und von Whiteboard-Skizzen bis hin zu automatisierter Dokumentation skalierbar ist.<\/p>\n<p>F\u00fcr diese\u00a0<strong>gezielte Fallstudie<\/strong>, verwenden wir das kanonische Beispiel von der offiziellen C4-Website:\u00a0<strong>Internet-Banking-System<\/strong>\u00a0f\u00fcr die fiktive \u201eBig Bank plc\u201c. Das Gesch\u00e4ftsziel besteht darin, privaten Kunden die Online-Ansicht ihrer Konten und die Durchf\u00fchrung von Zahlungen zu erm\u00f6glichen, w\u00e4hrend gleichzeitig die Integration mit den bestehenden Kernsystemen der Bank erfolgt.<\/p>\n<p>Wir werden durch\u00a0<strong>jede Ebene<\/strong>\u00a0mit:<\/p>\n<ul>\n<li>\n<p>Zweck und Zielgruppe<\/p>\n<\/li>\n<li>\n<p>Wichtige Elemente + Verantwortlichkeiten<\/p>\n<\/li>\n<li>\n<p>Beziehungen<\/p>\n<\/li>\n<li>\n<p>Ein sofort verwendbares\u00a0<strong>PlantUML C4-Diagramm<\/strong>(PlantUML unterst\u00fctzt C4-Syntax und wird in den meisten Markdown-Viewern wundersch\u00f6n gerendert)<\/p>\n<\/li>\n<li>\n<p>Rationale und zentrale Entscheidungen<\/p>\n<\/li>\n<li>\n<p>Wie das Diagramm Stakeholder unterst\u00fctzt<\/p>\n<\/li>\n<\/ul>\n<h3>Schritt 1: Umfang definieren und das Systemkontextdiagramm erstellen (Ebene 1)<\/h3>\n<p><strong>Zweck<\/strong>: Zeigt, wie das neue Internet-Banking-System in die Welt passt. Zielgruppe: Gesch\u00e4ftsstakeholder, nicht-technische Personen, neue Teammitglieder.<\/p>\n<p><strong>Elemente<\/strong>\u00a0(aus dem offiziellen Beispiel):<\/p>\n<ul>\n<li>\n<p><strong>Privatkunden des Online-Bankings<\/strong>\u00a0(Person) \u2013 Ein Kunde mit einem oder mehreren privaten Bankkonten.<\/p>\n<\/li>\n<li>\n<p><strong>Internet-Banking-System<\/strong>\u00a0(Software-System) \u2013 Das neue System, das wir entwickeln.<\/p>\n<\/li>\n<li>\n<p><strong>Kernbank-System<\/strong>\u00a0(Software-System, vorhanden) \u2013 Mainframe, der Kundendaten, Konten und Transaktionen verwaltet.<\/p>\n<\/li>\n<li>\n<p><strong>E-Mail-System<\/strong>\u00a0(Software-System, extern) \u2013 Amazon Web Services Simple Email Service (AWS SES) zur Versendung von Best\u00e4tigungen.<\/p>\n<\/li>\n<\/ul>\n<p><strong>Beziehungen<\/strong>:<\/p>\n<ul>\n<li>\n<p>Kunde \u2192 nutzt \u2192 Internet-Banking-System (zum Anzeigen von Konten und zur Zahlung)<\/p>\n<\/li>\n<li>\n<p>Internet-Banking-System \u2192 nutzt \u2192 Kernbank-System (f\u00fcr Kontendaten und Zahlungen)<\/p>\n<\/li>\n<li>\n<p>Internet-Banking-System \u2192 sendet E-Mail \u00fcber \u2192 E-Mail-System<\/p>\n<\/li>\n<\/ul>\n<p>Hier ist das\u00a0<strong>PlantUML C4-Kontextdiagramm<\/strong>:<\/p>\n<p id=\"GeUKeRH\"><img alt=\"\" class=\"alignnone size-full wp-image-15959\" decoding=\"async\" height=\"739\" loading=\"lazy\" sizes=\"auto, (max-width: 527px) 100vw, 527px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png 527w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5-214x300.png 214w\" width=\"527\"\/><code data-language=\"mermaid\"><\/code><\/p>\n<pre class=\"relative p-4 text-sm overflow-auto h-full box-border !bg-gray-900 text-gray-100\"><code class=\"text-gray-100\">@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Context.puml\r\n\r\nLAYOUT_TOP_DOWN()\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle Systemkontextdiagramm (Ebene 1) f\u00fcr das Internet-Banking-System\r\n\r\nPerson(kunde, \"Privatkunde des Online-Bankings\", \"Ein Kunde mit einem oder mehreren privaten Bankkonten.\")\r\nSystem(internet_banking_system, \"Internet-Banking-System\", \"Das neue System zum Anzeigen von Konten und zur Zahlung.\")\r\nSystem(kernbank_system, \"Kernbank-System\", \"Vorhandener Mainframe, der Kundendaten, Konten und Transaktionen verwaltet.\")\r\nSystem_Ext(email_system, \"E-Mail-System\", \"Amazon Web Services Simple Email Service (AWS SES) zur Versendung von Best\u00e4tigungen.\")\r\n\r\nRel(kunde, internet_banking_system, \"Nutzt\")\r\nRel(internet_banking_system, kernbank_system, \"Nutzt\")\r\nRel(internet_banking_system, email_system, \"Sendet E-Mail \u00fcber\")\r\n\r\nLay_D(kunde, internet_banking_system)\r\nLay_D(internet_banking_system, kernbank_system)\r\nLay_U(email_system, internet_banking_system)\r\n@enduml<\/code><\/pre>\n<pre class=\"lang-mermaid\"><code data-language=\"mermaid\"><\/code><\/pre>\n<p><strong>Rationale und Nutzen<\/strong>: Dieses einzige Diagramm beantwortet sofort die Frage \u201eWas bauen wir und mit wem kommuniziert es?\u201c. Es verhindert Scope Creep, indem externe Abh\u00e4ngigkeiten explizit gemacht werden. Gesch\u00e4ftsstakeholder lieben es, weil noch keine technischen Details enthalten sind.<\/p>\n<h3>Schritt 2: Container-Diagramm (Ebene 2)<\/h3>\n<p><strong>Zweck<\/strong>: Vergr\u00f6\u00dfert das Internet-Banking-System und zeigt die wichtigsten bereitstellbaren\/ausf\u00fchrbaren Einheiten (Container) sowie deren technologische Auswahl. Zielgruppe: Architekten, Leitentwickler, Betrieb.<\/p>\n<p><strong>Container innerhalb des Internet-Banking-Systems<\/strong>:<\/p>\n<ul>\n<li>\n<p><strong>Einzelseitenanwendung<\/strong>\u00a0(Web-Browser \u2013 JavaScript + Angular) \u2013 Vollst\u00e4ndige Internet-Banking-Oberfl\u00e4che.<\/p>\n<\/li>\n<li>\n<p><strong>Mobile App<\/strong>\u00a0(Mobilger\u00e4t \u2013 iOS\/Android-nativ oder React Native) \u2013 Eingeschr\u00e4nkte Funktionalit\u00e4t f\u00fcr den Einsatz unterwegs.<\/p>\n<\/li>\n<li>\n<p><strong>API-Anwendung<\/strong>\u00a0(Server-seitig \u2013 Java + Spring Boot) \u2013 JSON\/HTTPS-API, die von beiden Frontends genutzt wird.<\/p>\n<\/li>\n<li>\n<p><strong>Datenbank<\/strong>\u00a0(Relationale DB \u2013 PostgreSQL) \u2013 Speichert Sitzungsdaten, Benutzereinstellungen, zwischengespeicherte Kontozusammenfassungen (Kerndaten verbleiben im Mainframe).<\/p>\n<\/li>\n<\/ul>\n<p><strong>Wichtige Beziehungen<\/strong>\u00a0(\u00e4hnliche externe Systeme wie Ebene 1):<\/p>\n<ul>\n<li>\n<p>SPA und Mobile App \u2192 Aufruf \u2192 API-Anwendung<\/p>\n<\/li>\n<li>\n<p>API-Anwendung \u2194 Datenbank<\/p>\n<\/li>\n<li>\n<p>API-Anwendung \u2192 Kernbankensystem und E-Mail-System<\/p>\n<\/li>\n<\/ul>\n<p><strong>PlantUML C4-Container-Diagramm<\/strong>:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/uml.planttext.com\/plantuml\/png\/lLN1ZY8t4BqZyGyL52azoW27x2bIf6M0P2TY1tORDCe9LNSNuCHjExORbaIHyW_vm_sIBRiRwDbXjCfbEU5oLRrNhbVLhvr7wwjITZlV29NBgY3OUM_SZyCXNtcH3_R2LIZx1YqMObiESbqEZKGLelhE5r9am_6h_YAOLczdmnAT9ykczLWhZqAH7PZh21OFWwtmkogh7DcStKdv2E0hWuNzuG8a-BQ_OO--CrPuSYUSWlRXpWrHRIk9NmVhTzpZLm4oslcj9VUdRE2wdTdej_bgkLxE5-l9_F4XkJcR7k-NRzQpwI_JXqcmTZjUU4amVWNdJi14uDPY2HjjuPwfMKKUxb3z8TGMqYEZbo5oGTPfbUILyxeaUmkzseBox3nkxdfyEOAJ9nouTD2AW05ARGdCAJ3ZGC0yrvNoRj2B36l4zHtR2hJ7H3IKrbcDidRHWI5U81lGbpi2HGUeVMDfUq67u7I20rG5b1W33HvBgYd0tzqEyE_yFeapo1bJzfFKN-2MO6IC53cFWbO1x5TkVPfROJny3wDQSy7-SoKbdEX3GnzMztptRTtTdtgDH4FfJr5BdGb9QpI6CxsDXu0RyefvEXofmcfHGFAUCFVmm6JsT1DkPwBap0LiAfK7XYY5FyONO6Nv7VMt6bY6RH8sv7XE0Orey4UB-sj5Sxaff-2YxhJsqPhE7uPlbij52Y66SGh8Zf1fLi361bcJAbmREypDC-X9bXJeCKD7d7JI_0q0YrhzwRjPEAMUvUJ0aNDC2qBCRG2rO2njo9BAoTr2ZlcEYJIT1rUL9Lf1JtXSnYgm-UUYn2HdZEVY6mSXFnVUz8DmFfXABcJ3OyLRW8KcW-ay43NFan1lenAzHUKmTgoUX6OEfXzyGfnCNg2duTZ279Nu5rV_I1caP7bDy9EaeZIicCQrja8oUamXdQOtKGwEMn5fQRKHjiGBTBVp7RmdMLjsmhXkXu-jqOyZSVhrLYu-vSKG1H0IFOrgI_fBKMs4imxPQOnIjiDQYZk5jc7-PsZB7Iu2X1uFMU62WClOgqFSpE1rbFpaRZmCUhoIuxfqtbKKr0T3M1b6YS_m1JAVAI0DKrGRUQzXY3-7XkRDyAWh3piHzboYJRq7uEE__y6Ef75m-ZG3MjOThpII53SWPEHvOOKl21xNarRtNjZ3PyyNz_ILHsY2Lfyf-sM8RkSrbyoVkqy0\"\/><\/p>\n<p>@startuml<br \/>\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Container.puml<br \/>\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/angular.puml<br \/>\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/java.puml<br \/>\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/postgresql.puml<\/p>\n<p>LAYOUT_TOP_DOWN()<br \/>\nLAYOUT_WITH_LEGEND()<\/p>\n<p>Titel C4-Container-Diagramm f\u00fcr das Internet-Banking-System<\/p>\n<p>Person(kunde, \u201ePrivatkundenkunde\u201c, \u201eEin Kunde mit einem oder mehreren privaten Bankkonten.\u201c)<\/p>\n<p>System_Grenze(internet_banking_system, \u201eInternet-Banking-System\u201c, \u201eDas neue System zum Anzeigen von Konten und Ausf\u00fchren von Zahlungen.\u201c) {<br \/>\nContainer(spa, \u201eEinzelseitenanwendung\u201c, \u201eJavaScript + Angular\u201c, \u201eVollst\u00e4ndige Internet-Banking-Oberfl\u00e4che\u201c, $sprite=&#8221;angular&#8221;)<br \/>\nContainer(mobile_app, \u201eMobile App\u201c, \u201eiOS\/Android (React Native)\u201c, \u201eEingeschr\u00e4nkte Funktionalit\u00e4t f\u00fcr den Einsatz unterwegs\u201c, $sprite=&#8221;react&#8221;)<br \/>\nContainer(api_app, \u201eAPI-Anwendung\u201c, \u201eJava + Spring Boot\u201c, \u201eJSON\/HTTPS-API, die von beiden Frontends genutzt wird\u201c, $sprite=&#8221;java&#8221;)<br \/>\nContainerDb(database, \u201eDatenbank\u201c, \u201ePostgreSQL\u201c, \u201eSpeichert Sitzungsdaten, Benutzereinstellungen und zwischengespeicherte Kontozusammenfassungen\u201c, $sprite=&#8221;postgresql&#8221;)<br \/>\n}<\/p>\n<p>System(core_banking_system, \u201eKernbankensystem\u201c, \u201eBestehende Mainframe-Plattform zur Verwaltung von Kundendaten, Konten und Transaktionen.\u201c)<br \/>\nSystem_Ext(email_system, \u201eE-Mail-System\u201c, \u201eAmazon Web Services Simple Email Service (AWS SES) zur Versendung von Best\u00e4tigungen.\u201c)<\/p>\n<p>\u2018 Beziehungen<br \/>\nRel(kunde, spa, \u201eNutzt\u201c, \u201eHTTPS\u201c)<br \/>\nRel(kunde, mobile_app, \u201eNutzt\u201c, \u201eHTTPS\u201c)<br \/>\nRel(spa, api_app, \u201eRuft auf\u201c, \u201eJSON\/HTTPS\u201c)<br \/>\nRel(mobile_app, api_app, \u201eRuft auf\u201c, \u201eJSON\/HTTPS\u201c)<br \/>\nRel(api_app, database, \u201eLiest aus und schreibt in\u201c, \u201eJDBC\/SQL\u201c)<br \/>\nRel(api_app, core_banking_system, \u201eAbfragen \/ Aktualisieren\u201c, \u201eJSON\/HTTPS\u201c)<br \/>\nRel(api_app, email_system, \u201eVersendet E-Mail \u00fcber\u201c, \u201eHTTPS\u201c)<\/p>\n<p>\u2018 Layout-Hinweise (optional \u2013 hilft PlantUML, Elemente besser anzuordnen)<br \/>\nLay_D(kunde, internet_banking_system)<br \/>\nLay_D(internet_banking_system, core_banking_system)<br \/>\nLay_U(email_system, internet_banking_system)<\/p>\n<p>@enduml<code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>Begr\u00fcndung<\/strong>: Wir haben ein modernes SPA + API-Backend-Muster f\u00fcr die Webanwendung gew\u00e4hlt, eine native Mobile-App f\u00fcr bessere Leistung und die Datenbank leicht gehalten (die meisten Daten befinden sich im veralteten Mainframe). Diese Darstellung ist die einzig wahre Quelle f\u00fcr strategische technische Entscheidungen und unterst\u00fctzt DevOps bei der Planung der Infrastruktur.<\/p>\n<h3>Schritt 3: Komponentendiagramm (Ebene 3)<\/h3>\n<p><strong>Zweck<\/strong>: Vergr\u00f6\u00dferung eines Containers (normalerweise der komplexeste \u2013 die API-Anwendung) zur Darstellung ihrer wichtigsten logischen Komponenten. Zielgruppe: Entwicklerteams.<\/p>\n<p><strong>Beispiel: Komponenten innerhalb der API-Anwendung<\/strong>:<\/p>\n<ul>\n<li>\n<p>Accounts-Controller (Spring MVC)<\/p>\n<\/li>\n<li>\n<p>Authentifizierungs-Controller<\/p>\n<\/li>\n<li>\n<p>Controller f\u00fcr Passwort zur\u00fccksetzen<\/p>\n<\/li>\n<li>\n<p>Sicherheitskomponente (verwaltet Authentifizierung, JWT usw.)<\/p>\n<\/li>\n<li>\n<p>Komponente f\u00fcr Kontoverwaltung (koordiniert Aufrufe zum Kernbankensystem)<\/p>\n<\/li>\n<li>\n<p>Komponente f\u00fcr E-Mail-Benachrichtigungen<\/p>\n<\/li>\n<\/ul>\n<p><strong>PlantUML C4 Komponentendiagramm<\/strong>\u00a0(fokussiert auf die API-Anwendung):<\/p>\n<p id=\"fzJuCAx\"><img alt=\"\" class=\"alignnone size-full wp-image-15962\" decoding=\"async\" height=\"916\" loading=\"lazy\" sizes=\"auto, (max-width: 1684px) 100vw, 1684px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62.png 1684w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-300x163.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-1024x557.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-768x418.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-1536x835.png 1536w\" width=\"1684\"\/><\/p>\n<pre class=\"relative p-4 text-sm overflow-auto h-full box-border !bg-gray-900 text-gray-100\"><code class=\"text-gray-100\">@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Component.puml\r\n\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle Komponentendiagramm f\u00fcr das Internet-Banking-System - API-Anwendung\r\n\r\nContainer(spa, \"Einseitige Anwendung\", \"javascript und angular\", \"Bietet allen Kunden \u00fcber ihren Webbrowser die gesamte Internet-Banking-Funktionalit\u00e4t.\")\r\nContainer(ma, \"Mobile App\", \"Xamarin\", \"Bietet Kunden \u00fcber ihr Mobilger\u00e4t eine eingeschr\u00e4nkte Auswahl an Internet-Banking-Funktionalit\u00e4ten.\")\r\nContainerDb(db, \"Datenbank\", \"Relationales Datenbankschema\", \"Speichert Benutzerregistrierungsdaten, gehaschte Authentifizierungsdaten, Zugriffsprotokolle usw.\")\r\nSystem_Ext(mbs, \"Mainframe-Bankensystem\", \"Speichert alle Kernbankinformationen zu Kunden, Konten, Transaktionen usw.\")\r\n\r\nContainer_Boundary(api, \"API-Anwendung\") {\r\n    Component(accounts, \"Kontrolller f\u00fcr Konten\", \"Spring MVC\", \"Bietet Kunden Konten\u00fcbersichten und Kontost\u00e4nde an.\")\r\n    Component(auth, \"Authentifizierungs-Kontroller\", \"Spring MVC\", \"Verwaltet Benutzeranmeldungen, Sitzungsmanagement und Token-Erzeugung.\")\r\n    Component(reset, \"Passwort-Zur\u00fccksetzungs-Kontroller\", \"Spring MVC\", \"Erm\u00f6glicht Benutzern das Zur\u00fccksetzen ihres Passworts per E-Mail.\")\r\n    Component(security, \"Sicherheitskomponente\", \"Spring Bean\", \"Verwaltet Authentifizierung, JWT-Token-Erzeugung und Passwort-Hashing.\")\r\n    Component(accountmgmt, \"Kontomanagement-Komponente\", \"Spring Bean\", \"Koordiniert Aufrufe an das Kernbankensystem f\u00fcr Kontobearbeitungen.\")\r\n    Component(email, \"E-Mail-Benachrichtigungs-Komponente\", \"Spring Bean\", \"Versendet Passwort-Zur\u00fccksetzungs-E-Mails und E-Mail-Best\u00e4tigungen per SMTP.\")\r\n\r\n    Rel(accounts, security, \"Verwendet\")\r\n    Rel(auth, security, \"Verwendet\")\r\n    Rel(reset, security, \"Verwendet\")\r\n    Rel(accountmgmt, mbs, \"Verwendet\", \"XML\/HTTPS\")\r\n    Rel(email, db, \"Liest\", \"JDBC\")\r\n}\r\n\r\nRel(spa, accounts, \"Verwendet\", \"JSON\/HTTPS\")\r\nRel(spa, auth, \"Verwendet\", \"JSON\/HTTPS\")\r\nRel(spa, reset, \"Verwendet\", \"JSON\/HTTPS\")\r\nRel(ma, accounts, \"Verwendet\", \"JSON\/HTTPS\")\r\nRel(ma, auth, \"Verwendet\", \"JSON\/HTTPS\")\r\nRel(ma, reset, \"Verwendet\", \"JSON\/HTTPS\")\r\n@enduml<\/code><\/pre>\n<p><code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>Begr\u00fcndung<\/strong>: Auf dieser Ebene wird sichtbar, wie die Verantwortlichkeiten aufgeteilt sind (Trennung der Anliegen), und beschleunigt die Einarbeitung neuer Entwickler erheblich. Sie zeichnen Komponentendiagramme nur f\u00fcr Container, die komplex genug sind, um dies zu rechtfertigen.<\/p>\n<h3>Schritt 4: Code-Diagramm (Ebene 4) \u2013 Optional<\/h3>\n<p><strong>Zweck<\/strong>: Zeigt die interne Struktur einer einzelnen Komponente (Klassendiagramm, Ablaufdiagramm usw.). Zielgruppe: Entwickler, die an diesem Code arbeiten.<\/p>\n<p>Beispiel f\u00fcr die\u00a0<strong>Authentifizierungs-Kontroller<\/strong>Komponente \u2013 ein einfaches UML-Klassendiagramm in PlantUML:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/uml.planttext.com\/plantuml\/png\/XL91QiCm4BmR_0VXNX8AWRIb3Js4ECOvz5HA-m0XRHnXUJUiv8HGylTQTkea3gM2rM5cPtPMQE6yP5zNDexYo9K6jv9b9RxZI0Yc6hKYHc0n2q3AJFkCBB6uUsfFZwu8_Gsp9DR0Dt2ep4hdkZ63lcdwyFYIdmYfogADSIBpMPwkdZloOkHPSuoZOrX5jVv9MliDe3TAUaEODGecQu6JRlIzfSBWI37eq2Mj6xSmmvh1RJwf11oDhotVzhx5tvbsHf-j2cZUINheHBK3xhnsqXhTupxS0yUlflS3jkIC9pxy-gqDwkKXS2Whw5FyjP6OJEPYc4syYgH9uf9_TDS9BbGBGDryZXy0\"\/><\/p>\n<p>@startuml<br \/>\nclassDiagram<\/p>\n<p>skinparam {<br \/>\nroundcorner 8<br \/>\nArrowColor #444444<br \/>\nArrowFontColor #444444<br \/>\nBorderColor #444444<\/p>\n<p>Class {<br \/>\nBorderColor #1A237E<br \/>\nBackgroundColor #E8EAF6<br \/>\nFontColor #1A237E<br \/>\n}<br \/>\n}<\/p>\n<p>class \u201eAuthenticationController\u201c {<br \/>\n+login(Berechtigungen)<br \/>\n+refreshToken()<br \/>\n}<\/p>\n<p>class \u201eJwtTokenProvider\u201c {<br \/>\n+generateToken(Benutzer)<br \/>+validateToken(token)<br \/>\n}<\/p>\n<p>class \u201eUserRepository\u201c {<br \/>\n+findByUsername()<br \/>\n}<\/p>\n<p>AuthenticationController ..&gt; JwtTokenProvider : \u201everwendet\u201c<br \/>\nAuthenticationController ..&gt; UserRepository : \u201everwendet\u201c<br \/>\n@enduml<\/p>\n<p><code data-language=\"mermaid\"><br \/>\n<\/code>In echten Projekten \u00fcberspringt man oft Ebene 4 und verweist stattdessen auf den eigentlichen Quellcode.<\/p>\n<h3>Schritt 5: Unterst\u00fctzende Diagramme<\/h3>\n<p><strong>Dynamisches Diagramm<\/strong>\u00a0(Beispiel: \u201eKonten\u00fcbersicht anzeigen\u201c-Fluss)<\/p>\n<p><img alt=\"\" class=\"alignnone size-full wp-image-15964\" decoding=\"async\" height=\"823\" loading=\"lazy\" sizes=\"auto, (max-width: 533px) 100vw, 533px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f.png 533w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f-194x300.png 194w\" width=\"533\"\/><\/p>\n<p>@startuml<br \/>\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml<\/p>\n<p>title Dynamisches Diagramm f\u00fcr Konten\u00fcbersicht anzeigen<\/p>\n<p>Person(kunde, \u201ePrivatkundenkunde\u201c) {<br \/>\nContainer(spa, \u201eEinzelseitenanwendung\u201c) {<br \/>\nContainer(api, \u201eAPI-Anwendung\u201c) {<br \/>\nContainerDb(db, \u201eDatenbank\u201c) {<br \/>\nSystem_Ext(coreBanking, \u201eKernbankensystem\u201c)<br \/>\n}<br \/>\n}<br \/>\n}<br \/>\n}<\/p>\n<p>Rel(kunde, spa, \u201e1. Klickt auf \u201aKonten\u2018\u201c, \u201e\u201c)<br \/>\nRel(spa, api, \u201e2. GET \/accounts\u201c, \u201eJSON\/HTTPS\u201c)<br \/>\nRel(api, db, \u201e3. Gelesene zwischengespeicherte Zusammenfassung\u201c, \u201e\u201c)<br \/>\nRel(api, coreBanking, \u201e4. Abruf der neuesten Daten\u201c, \u201e\u201c)<br \/>\nRel(api, spa, \u201e5. R\u00fcckgabe von JSON\u201c, \u201e\u201c)<\/p>\n<p>SHOW_LEGEND()<br \/>\n@enduml<code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>Bereitstellungsdiagramm<\/strong>\u00a0(hohe Ebene physische Abbildung):<\/p>\n<p id=\"EQNbTiP\"><img alt=\"\" class=\"alignnone size-full wp-image-15965\" decoding=\"async\" height=\"562\" loading=\"lazy\" sizes=\"auto, (max-width: 714px) 100vw, 714px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca.png 714w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca-300x236.png 300w\" width=\"714\"\/><\/p>\n<p>@startuml<br \/>\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml<\/p>\n<p>Titel Bereitstellungsdiagramm f\u00fcr das Internet-Banking-System<\/p>\n<p>Bereitstellungs-Knoten(aws, \u201eAmazon Web Services\u201c, \u201eCloud\u201c) {<br \/>\nBereitstellungs-Knoten(ec2, \u201eEC2 Auto-Scaling-Gruppe\u201c, \u201eLinux\u201c) {<br \/>\nContainer(api, \u201eAPI-Anwendung\u201c, \u201eJava Spring Boot\u201c)<br \/>\n}<br \/>\nBereitstellungs-Knoten(rds, \u201eRDS\u201c, \u201ePostgreSQL\u201c) {<br \/>\nContainerDb(db, \u201eDatenbank\u201c)<br \/>\n}<br \/>\n}<\/p>\n<p>Bereitstellungs-Knoten(customerDevice, \u201eGer\u00e4t des Kunden\u201c, \u201eWeb\/Mobil\u201c) {<br \/>\nContainer(spa, \u201eEinzelseitenanwendung\u201c)<br \/>\nContainer(mobile, \u201eMobile App\u201c)<br \/>\n}<\/p>\n<p>System_Ext(coreBanking, \u201eKern-Banking-System (on-prem Mainframe)\u201c)<\/p>\n<p>Rel(spa, api, \u201eMacht API-Aufrufe an\u201c, \u201eHTTPS\u201c)<br \/>\nRel(mobile, api, \u201eMacht API-Aufrufe an\u201c, \u201eHTTPS\u201c)<br \/>\nRel_U(api, spa, \u201eLiefert an den Web-Browser des Kunden\u201c)<br \/>\nRel_U(api, mobile, \u201eLiefert an die Mobile-App\u201c)<\/p>\n<p>SHOW_LEGEND()<br \/>\n@enduml<\/p>\n<pre class=\"lang-mermaid\"><code data-language=\"mermaid\"><\/code><\/pre>\n<h3>Wie man dieses Fallbeispiel in der Praxis einsetzt<\/h3>\n<ol>\n<li>\n<p>Beginnen Sie mit einem Workshop: Zeichnen Sie den Kontext an eine Tafel.<\/p>\n<\/li>\n<li>\n<p>Iterieren Sie zu Containern und Komponenten mit PlantUML C4.<\/p>\n<\/li>\n<li>\n<p>Halten Sie Diagramme im Code-Repository (als Code!) aufrecht, damit sie aktuell bleiben.<\/p>\n<\/li>\n<li>\n<p>Generieren Sie lebendige Dokumentation automatisch.<\/p>\n<\/li>\n<\/ol>\n<p>Dieses exakte Beispiel f\u00fcr ein Internet-Banking-System ist die offizielle Referenz, die von Simon Brown erstellt wurde, und wird weltweit von Tausenden von Organisationen genutzt. Indem Sie diese Schritte befolgen, verf\u00fcgen Sie nun \u00fcber eine vollst\u00e4ndige, produktionsfertige Architekturbeschreibung, die jeder \u2013 von der Gesch\u00e4ftsf\u00fchrung bis hin zu einem neuen Junior-Entwickler \u2013 auf der richtigen Detailtiefe verstehen kann.<\/p>\n<h3>C4-Diagramm-Artikel<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.archimetric.com\/the-ultimate-guide-to-c4-model-visualization-with-visual-paradigms-ai-tools\/\"><strong>Der ultimative Leitfaden zur Visualisierung des C4-Modells mit den KI-Tools von Visual Paradigm<\/strong><\/a>: Dieser Leitfaden erkl\u00e4rt, wie Sie KI-gest\u00fctzte Werkzeuge nutzen, um die Visualisierung des C4-Modells zu automatisieren und zu verbessern, um die Software-Architekturgestaltung schneller zu gestalten.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/leveraging-visual-paradigms-ai-c4-studio-a-comprehensive-guide-to-streamlined-architectural-documentation\/\"><strong>Nutzen Sie Visual Paradigms AI C4 Studio zur vereinfachten Architekturdokumentation<\/strong><\/a>: Dieser Artikel beschreibt die Nutzung eines KI-optimierten Studios zur Erstellung sauberer, skalierbarer und wartbarer Dokumentation der Softwarearchitektur.<\/li>\n<li><a href=\"https:\/\/blog.visual-paradigm.com\/the-ultimate-guide-to-c4-plantuml-studio-revolutionizing-software-architecture-design\/\"><strong>Der ultimative Leitfaden zum C4-PlantUML Studio: Die Revolutionierung der Software-Architekturgestaltung<\/strong><\/a>: Diese Ressource untersucht die Kombination von KI-getriebener Automatisierung, der Klarheit des C4-Modells und der Flexibilit\u00e4t von PlantUML zu einem einzigen leistungsstarken Werkzeug.<\/li>\n<li><a href=\"https:\/\/www.cybermedian.com\/%F0%9F%A7%A0-a-comprehensive-guide-to-visual-paradigms-ai-powered-c4-plantuml-studio\/\"><strong>Ein umfassender Leitfaden zu Visual Paradigms KI-gest\u00fctztem C4-PlantUML Studio<\/strong><\/a>: Dieser Leitfaden beschreibt ein speziell entwickeltes Werkzeug, das Ende 2025 ver\u00f6ffentlicht wurde und nat\u00fcrliche Sprachbefehle in mehrschichtige C4-Diagramme umwandelt.<\/li>\n<li><a href=\"https:\/\/www.visual-paradigm.com\/features\/c4-plantuml-studio\/\"><strong>C4-PlantUML Studio | KI-gest\u00fctzter C4-Diagramm-Generator<\/strong><\/a>: Diese Funktions\u00fcbersicht hebt ein KI-getriebenes Werkzeug hervor, das entwickelt wurde, um C4-Softwarearchitektur-Diagramme aus einfachen Textbeschreibungen zu generieren.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/comprehensive-tutorial-generating-and-modifying-c4-component-diagrams-with-visual-paradigm-ai-chatbot\/\"><strong>Erzeugen und \u00c4ndern von C4-Komponentendiagrammen mit dem AI-Chatbot von Visual Paradigm<\/strong><\/a>: Dieses Tutorial zeigt, wie man einen KI-gest\u00fctzten Chatbot verwendet, um schrittweise die Architektur auf Komponentenebene f\u00fcr komplexe Systeme zu erstellen und zu verfeinern.<\/li>\n<li><a href=\"https:\/\/ai.visual-paradigm.com\/tool\/ai-powered-c4-plantuml-studio\/about-the-diagrams\/\"><strong>KI-gest\u00fctzter C4-Diagramm-Generator: Kernlevel und unterst\u00fctzende Ansichten<\/strong><\/a>: Diese Seite erkl\u00e4rt, wie der KI-Generator die vier Kernlevel des C4-Modells \u2013 Kontext, Container, Komponente und Bereitstellung \u2013 unterst\u00fctzt, um umfassende Dokumentation zu liefern.<\/li>\n<li><a href=\"https:\/\/updates.visual-paradigm.com\/releases\/ai-diagram-generator-complete-c4-model\/\"><strong>KI-Diagramm-Generator: Release mit vollst\u00e4ndiger C4-Modellunterst\u00fctzung<\/strong><\/a>: Dieses Update beschreibt die Integration von KI-gest\u00fctzten Funktionen zur automatisierten Erstellung hierarchischer C4-Modell-Diagramme.<\/li>\n<li><a href=\"https:\/\/www.ez-knowledge.com\/beyond-the-code-how-ai-automates-c4-model-diagrams-for-devops-and-cloud-teams\/\"><strong>C4-Modell-KI-Generator: Automatisierung des gesamten Modellierungs-Lebenszyklus<\/strong><\/a>: Diese Ressource hebt hervor, wie ein spezialisierter KI-Chatbot konversationelle Eingaben nutzt, um Konsistenz in der Architekturdokumentation f\u00fcr DevOps-Teams sicherzustellen.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/comprehensive-review-generic-ai-chatbots-vs-visual-paradigms-c4-tools\/\"><strong>Umfassende Bewertung: Allgemeine KI-Chatbots im Vergleich zu Visual Paradigms C4-Werkzeugen<\/strong><\/a>: Dieser Vergleich erkl\u00e4rt, warum spezialisierte Werkzeuge wie das C4-PlantUML Studio strukturiertere und professionellere Ergebnisse liefern als allgemeine Sprachmodelle.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Die\u00a0C4-Modell, entwickelt von Simon Brown, ist eine einfache, hierarchische und entwicklungsfreundliche Methode zur Visualisierung von Softwarearchitekturen. Es verwendet vier Abstraktionsstufen<\/p>\n","protected":false},"author":11,"featured_media":11841,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","footnotes":""},"categories":[110],"tags":[],"class_list":["post-11840","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-c4-model"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc) - Cybermedian<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc) - Cybermedian\" \/>\n<meta property=\"og:description\" content=\"Die\u00a0C4-Modell, entwickelt von Simon Brown, ist eine einfache, hierarchische und entwicklungsfreundliche Methode zur Visualisierung von Softwarearchitekturen. Es verwendet vier Abstraktionsstufen\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\" \/>\n<meta property=\"og:site_name\" content=\"Cybermedian\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-05T02:48:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/><meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"527\" \/>\n\t<meta property=\"og:image:height\" content=\"739\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"curtis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"8\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.cybermedian.com\/de\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"headline\":\"Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc)\",\"datePublished\":\"2026-03-05T02:48:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"},\"wordCount\":1611,\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/de\/wp-content\/uploads\/sites\/12\/2026\/03\/img_69a8e7e9e8ab5.png\",\"articleSection\":[\"C4 Model\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\",\"url\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\",\"name\":\"Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc) - Cybermedian\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/de\/wp-content\/uploads\/sites\/12\/2026\/03\/img_69a8e7e9e8ab5.png\",\"datePublished\":\"2026-03-05T02:48:15+00:00\",\"author\":{\"@id\":\"https:\/\/www.cybermedian.com\/de\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\",\"url\":\"https:\/\/www.cybermedian.com\/de\/wp-content\/uploads\/sites\/12\/2026\/03\/img_69a8e7e9e8ab5.png\",\"contentUrl\":\"https:\/\/www.cybermedian.com\/de\/wp-content\/uploads\/sites\/12\/2026\/03\/img_69a8e7e9e8ab5.png\",\"width\":527,\"height\":739},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.cybermedian.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.cybermedian.com\/de\/#website\",\"url\":\"https:\/\/www.cybermedian.com\/de\/\",\"name\":\"Cybermedian\",\"description\":\"Jeden Tag eine neue Sache lernen\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.cybermedian.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.cybermedian.com\/de\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.cybermedian.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"caption\":\"curtis\"},\"url\":\"https:\/\/www.cybermedian.com\/de\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc) - Cybermedian","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","og_locale":"de_DE","og_type":"article","og_title":"Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc) - Cybermedian","og_description":"Die\u00a0C4-Modell, entwickelt von Simon Brown, ist eine einfache, hierarchische und entwicklungsfreundliche Methode zur Visualisierung von Softwarearchitekturen. Es verwendet vier Abstraktionsstufen","og_url":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","og_site_name":"Cybermedian","article_published_time":"2026-03-05T02:48:15+00:00","og_image":[{"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","type":"","width":"","height":""},{"width":527,"height":739,"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","type":"image\/png"}],"author":"curtis","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","twitter_misc":{"Verfasst von":"curtis","Gesch\u00e4tzte Lesezeit":"8\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#article","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"author":{"name":"curtis","@id":"https:\/\/www.cybermedian.com\/de\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"headline":"Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc)","datePublished":"2026-03-05T02:48:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"wordCount":1611,"image":{"@id":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/de\/wp-content\/uploads\/sites\/12\/2026\/03\/img_69a8e7e9e8ab5.png","articleSection":["C4 Model"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","url":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","name":"Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc) - Cybermedian","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"image":{"@id":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/de\/wp-content\/uploads\/sites\/12\/2026\/03\/img_69a8e7e9e8ab5.png","datePublished":"2026-03-05T02:48:15+00:00","author":{"@id":"https:\/\/www.cybermedian.com\/de\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"breadcrumb":{"@id":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage","url":"https:\/\/www.cybermedian.com\/de\/wp-content\/uploads\/sites\/12\/2026\/03\/img_69a8e7e9e8ab5.png","contentUrl":"https:\/\/www.cybermedian.com\/de\/wp-content\/uploads\/sites\/12\/2026\/03\/img_69a8e7e9e8ab5.png","width":527,"height":739},{"@type":"BreadcrumbList","@id":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cybermedian.com\/de\/"},{"@type":"ListItem","position":2,"name":"Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc)"}]},{"@type":"WebSite","@id":"https:\/\/www.cybermedian.com\/de\/#website","url":"https:\/\/www.cybermedian.com\/de\/","name":"Cybermedian","description":"Jeden Tag eine neue Sache lernen","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cybermedian.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/www.cybermedian.com\/de\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d","name":"curtis","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.cybermedian.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","caption":"curtis"},"url":"https:\/\/www.cybermedian.com\/de\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.cybermedian.com\/de\/wp-json\/wp\/v2\/posts\/11840","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cybermedian.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cybermedian.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/de\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/de\/wp-json\/wp\/v2\/comments?post=11840"}],"version-history":[{"count":0,"href":"https:\/\/www.cybermedian.com\/de\/wp-json\/wp\/v2\/posts\/11840\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/de\/wp-json\/wp\/v2\/media\/11841"}],"wp:attachment":[{"href":"https:\/\/www.cybermedian.com\/de\/wp-json\/wp\/v2\/media?parent=11840"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/de\/wp-json\/wp\/v2\/categories?post=11840"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cybermedian.com\/de\/wp-json\/wp\/v2\/tags?post=11840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}