de_DEen_USes_ESfa_IRfr_FRhi_INja

Eine umfassende Schritt-für-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc)

Die C4-Modell, entwickelt von Simon Brown, ist eine einfache, hierarchische und entwicklungsfreundliche Methode zur Visualisierung von Softwarearchitekturen. Es verwendet vier Abstraktionsstufen (daher „C4“), um ein System von der höchsten Übersichtsebene bis hin zu Code-Ebenen detailliert zu beschreiben:

  1. Systemkontext (Ebene 1) – Das große Ganze: das System und seine Benutzer/externen Abhängigkeiten.
  2. Container (Ebene 2) – Hochrangige technologische Entscheidungen und Verantwortlichkeiten.
  3. Komponenten (Ebene 3) – Wichtige logische Bausteine innerhalb eines Containers.
  4. Code (Ebene 4) – Optional Details auf Klassenebene oder zur Code-Struktur.

Es wird durch drei zusätzliche Diagrammtypen unterstützt:

  • Systemlandschaft
  • Dynamisch
  • Bereitstellung

Das Modell ist notationsunabhängig (Sie können jedes Diagrammierungstool verwenden) und legt den Fokus auf Klarheit, Konsistenz und maßgeschneiderte Detailtiefe für die Zielgruppe. Es wird weithin eingesetzt, da es „Big Ball of Mud“-Architekturdiagramme vermeidet und von Whiteboard-Skizzen bis hin zu automatisierter Dokumentation skalierbar ist.

Für diese gezielte Fallstudie, verwenden wir das kanonische Beispiel von der offiziellen C4-Website: Internet-Banking-System für die fiktive „Big Bank plc“. Das Geschäftsziel besteht darin, privaten Kunden die Möglichkeit zu geben, ihre Konten online einzusehen und Zahlungen vorzunehmen, wobei das System mit den bestehenden Kernsystemen der Bank integriert wird.

Wir werden durch jede Ebene mit:

  • Zweck und Zielgruppe
  • Wichtige Elemente + Verantwortlichkeiten
  • Beziehungen
  • Ein sofort verwendbares PlantUML C4-Diagramm (PlantUML unterstützt C4-Syntax und wird in den meisten Markdown-Viewern wunderschön gerendert)
  • Rationale und wesentliche Entscheidungen
  • Wie das Diagramm die Stakeholder unterstützt

Schritt 1: Umfang definieren und das Systemkontextdiagramm erstellen (Ebene 1)

Zweck: Zeigen, wie das neue Internet-Banking-System in die Welt passt. Zielgruppe: Geschäftsstakeholder, nicht-technische Personen, neue Teammitglieder.

Elemente (aus dem offiziellen Beispiel):

  • Privatkunden des Online-Bankings (Person) – Ein Kunde mit einem oder mehreren privaten Bankkonten.
  • Internet-Banking-System (Software-System) – Das neue System, das wir entwickeln.
  • Kernbank-System (Software-System, vorhanden) – Mainframe, der Kundendaten, Konten und Transaktionen verwaltet.
  • E-Mail-System (Software-System, extern) – Amazon Web Services Simple Email Service (AWS SES) zur Versendung von Bestätigungen.

Beziehungen:

  • Kunde → nutzt → Internet-Banking-System (zum Anzeigen von Konten und zur Zahlung)
  • Internet-Banking-System → nutzt → Kernbank-System (für Kontodaten und Zahlungen)
  • Internet-Banking-System → sendet E-Mail über → E-Mail-System

Hier ist das PlantUML C4-Kontextdiagramm:

PlantUML


PlantUML in VPasCode bearbeiten
PlantUML Edit PlantUML in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title Systemkontextdiagramm (Ebene 1) für das Internet-Banking-System

Person(kunde, "Privatkunde des Online-Bankings", "Ein Kunde mit einem oder mehreren privaten Bankkonten.")
System(internet_banking_system, "Internet-Banking-System", "Das neue System zum Anzeigen von Konten und zur Zahlung.")
System(kernbank_system, "Kernbank-System", "Vorhandener Mainframe, der Kundendaten, Konten und Transaktionen verwaltet.")
System_Ext(email_system, "E-Mail-System", "Amazon Web Services Simple Email Service (AWS SES) zur Versendung von Bestätigungen.")

Rel(kunde, internet_banking_system, "Nutzt")
Rel(internet_banking_system, kernbank_system, "Nutzt")
Rel(internet_banking_system, email_system, "Sendet E-Mail über")

Lay_D(kunde, internet_banking_system)
Lay_D(internet_banking_system, kernbank_system)
Lay_U(email_system, internet_banking_system)
@enduml
Edit PlantUML in VPasCode



PlantUML in VPasCode bearbeiten

Rationale und Nutzen: Dieses einzige Diagramm beantwortet sofort die Frage „Was bauen wir und mit wem kommuniziert es?“. Es verhindert Scope Creep, indem externe Abhängigkeiten explizit gemacht werden. Geschäftsstakeholder lieben es, weil noch keine technischen Details enthalten sind.

Schritt 2: Container-Diagramm (Ebene 2)

Zweck: Zoomen Sie in das Internet-Banking-System hinein und zeigen Sie die wichtigsten bereitstellbaren/ausführbaren Einheiten (Container) sowie deren technologische Auswahl. Zielgruppe: Architekten, Leitentwickler, Betrieb.

Container innerhalb des Internet-Banking-Systems:

  • Einseitenanwendung (Web-Browser – JavaScript + Angular) – Vollständige Internet-Banking-Oberfläche.
  • Mobile App (Mobilgerät – iOS/Android-nativ oder React Native) – Eingeschränkte Funktionalität für den Einsatz unterwegs.
  • API-Anwendung (Server-seitig – Java + Spring Boot) – JSON/HTTPS-API, die von beiden Frontends genutzt wird.
  • Datenbank (Relationale DB – PostgreSQL) – Speichert Sitzungsdaten, Benutzereinstellungen, zwischengespeicherte Kontozusammenfassungen (Kerndaten verbleiben im Hauptrechner).

Wichtige Beziehungen (Identische externe Systeme wie Ebene 1):

  • SPA & Mobile-App → Aufruf → API-Anwendung
  • API-Anwendung ↔ Datenbank
  • API-Anwendung → Kernbankensystem & E-Mail-System

PlantUML C4-Container-Diagramm:

PlantUML


PlantUML in VPasCode bearbeiten
PlantUML Edit PlantUML in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/angular.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/java.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/postgresql.puml

LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title C4-Container-Diagramm für das Internet-Banking-System

Person(kunde, "Privatkundenkunde", "Ein Kunde mit einem oder mehreren privaten Bankkonten.")

System_Boundary(internet_banking_system, "Internet-Banking-System", "Das neue System zum Ansehen von Konten und Ausführen von Zahlungen.") {
Container(spa, "Einseitenanwendung", "JavaScript + Angular", "Vollständige Internet-Banking-Oberfläche", $sprite="angular")
Container(mobile_app, "Mobile App", "iOS/Android (React Native)", "Eingeschränkte Funktionalität für den Einsatz unterwegs", $sprite="react")
Container(api_app, "API-Anwendung", "Java + Spring Boot", "JSON/HTTPS-API, die von beiden Frontends genutzt wird", $sprite="java")
ContainerDb(database, "Datenbank", "PostgreSQL", "Speichert Sitzungsdaten, Benutzereinstellungen, zwischengespeicherte Kontozusammenfassungen", $sprite="postgresql")
}

System(kernbankensystem, "Kernbankensystem", "Vorhandener Hauptrechner, der Kundendaten, Konten und Transaktionen verwaltet.")
System_Ext(email_system, "E-Mail-System", "Amazon Web Services Simple Email Service (AWS SES) zur Versendung von Bestätigungen.")

' Beziehungen
Rel(kunde, spa, "Nutzt", "HTTPS")
Rel(kunde, mobile_app, "Nutzt", "HTTPS")
Rel(spa, api_app, "Ruft auf", "JSON/HTTPS")
Rel(mobile_app, api_app, "Ruft auf", "JSON/HTTPS")
Rel(api_app, database, "Liest aus und schreibt in", "JDBC/SQL")
Rel(api_app, kernbankensystem, "Abfragen / Aktualisieren", "JSON/HTTPS")
Rel(api_app, email_system, "Versendet E-Mail über", "HTTPS")

' Layout-Hinweise (optional – hilft PlantUML, Elemente besser anzuordnen)
Lay_D(kunde, internet_banking_system)
Lay_D(internet_banking_system, kernbankensystem)
Lay_U(email_system, internet_banking_system)

@enduml
Edit PlantUML in VPasCode



PlantUML in VPasCode bearbeiten

Begründung: Wir haben ein modernes SPA + API-Backend-Muster für das Web gewählt, eine native Mobile-App für Leistungsfähigkeit und die Datenbank leicht gehalten (die meisten Daten befinden sich im veralteten Hauptrechner). Dieses Diagramm ist die einzig wahre Quelle für Entscheidungen auf hoher Ebene bezüglich der Technologie und unterstützt DevOps bei der Planung der Infrastruktur.

Schritt 3: Komponentendiagramm (Ebene 3)

Zweck: Zoomen Sie in einen Container hinein (normalerweise der komplexeste – die API-Anwendung) und zeigen Sie deren wichtigste logische Komponenten. Zielgruppe: Entwicklerteams.

Beispiel: Komponenten innerhalb der API-Anwendung:

  • Konten-Controller (Spring MVC)
  • Authentifizierungs-Controller
  • Passwort-Zurücksetzungs-Controller
  • Sicherheitskomponente (verwaltet Authentifizierung, JWT usw.)
  • Komponente zur Kontoverwaltung (koordiniert Aufrufe an das Kernbanking-System)
  • Komponente für E-Mail-Benachrichtigungen

PlantUML C4-Komponentendiagramm (fokussiert auf die API-Anwendung):

PlantUML


PlantUML in VPasCode bearbeiten
PlantUML Edit PlantUML in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

LAYOUT_WITH_LEGEND()

title Komponentendiagramm für das Internet-Banking-System - API-Anwendung

Container(spa, "Einseitenanwendung", "javascript und angular", "Bietet allen Kunden über ihren Webbrowser die gesamte Internet-Banking-Funktionalität.")
Container(ma, "Mobile App", "Xamarin", "Bietet Kunden über ihr Mobilgerät eine eingeschränkte Auswahl an Internet-Banking-Funktionalitäten.")
ContainerDb(db, "Datenbank", "Relationales Datenbankschema", "Speichert Benutzerregistrierungsdaten, gehaschte Authentifizierungsdaten, Zugriffsprotokolle usw.")
System_Ext(mbs, "Mainframe-Bankensystem", "Speichert alle Kernbankinformationen zu Kunden, Konten, Transaktionen usw.")

Container_Boundary(api, "API-Anwendung") {
    Component(accounts, "Konten-Controller", "Spring MVC", "Bietet Kunden Kontenübersichten und Kontostände.")
    Component(auth, "Authentifizierungs-Controller", "Spring MVC", "Verwaltet Benutzeranmeldung, Sitzungsverwaltung und Tokenerzeugung.")
    Component(reset, "Passwort-Zurücksetzungs-Controller", "Spring MVC", "Ermöglicht Benutzern das Zurücksetzen ihres Passworts per E-Mail.")
    Component(security, "Sicherheitskomponente", "Spring-Bean", "Verwaltet Authentifizierung, JWT-Tokenerzeugung und Passwortsicherung.")
    Component(accountmgmt, "Komponente zur Kontoverwaltung", "Spring-Bean", "Koordiniert Aufrufe an das Kernbanking-System für Kontobearbeitungen.")
    Component(email, "Komponente für E-Mail-Benachrichtigungen", "Spring-Bean", "Versendet E-Mails zum Zurücksetzen des Passworts und zur Kontoverifizierung über SMTP.")

    Rel(accounts, security, "Verwendet")
    Rel(auth, security, "Verwendet")
    Rel(reset, security, "Verwendet")
    Rel(accountmgmt, mbs, "Verwendet", "XML/HTTPS")
    Rel(email, db, "Liest", "JDBC")
}

Rel(spa, accounts, "Verwendet", "JSON/HTTPS")
Rel(spa, auth, "Verwendet", "JSON/HTTPS")
Rel(spa, reset, "Verwendet", "JSON/HTTPS")
Rel(ma, accounts, "Verwendet", "JSON/HTTPS")
Rel(ma, auth, "Verwendet", "JSON/HTTPS")
Rel(ma, reset, "Verwendet", "JSON/HTTPS")
@enduml
Edit PlantUML in VPasCode



PlantUML in VPasCode bearbeiten

Begründung: Dieses Niveau zeigt, wie die Verantwortlichkeiten aufgeteilt sind (Trennung der Anliegen) und beschleunigt die Einarbeitung neuer Entwickler erheblich. Sie zeichnen Komponentendiagramme nur für Container, die komplex genug sind, um dies zu rechtfertigen.

Schritt 4: Code-Diagramm (Ebene 4) – Optional

Zweck: Zeigt die interne Struktur einer einzelnen Komponente (Klassendiagramm, Ablaufdiagramm usw.). Zielgruppe: Entwickler, die an diesem Code arbeiten.

Beispiel für die Authentifizierungs-ControllerKomponente – ein einfaches UML-Klassendiagramm in PlantUML:

PlantUML


PlantUML in VPasCode bearbeiten
PlantUML Edit PlantUML in VPasCode 

@startuml
classDiagram

skinparam {
roundcorner 8
ArrowColor #444444
ArrowFontColor #444444
BorderColor #444444

Class {
BorderColor #1A237E
BackgroundColor #E8EAF6
FontColor #1A237E
}
}

class "AuthenticationController" {
+login(credentials)
+refreshToken()
}

class "JwtTokenProvider" {
+generateToken(user)
+validateToken(token)
}

class "UserRepository" {
+findByUsername()
}

AuthenticationController ..> JwtTokenProvider : "verwendet"
AuthenticationController ..> UserRepository : "verwendet"
@enduml
Edit PlantUML in VPasCode



PlantUML in VPasCode bearbeiten

In echten Projekten überspringen Sie Level 4 oft und verweisen stattdessen auf den eigentlichen Quellcode.

Schritt 5: Unterstützende Diagramme

Dynamisches Diagramm (Beispiel: Ablauf „Kontenübersicht anzeigen“)

PlantUML


PlantUML in VPasCode bearbeiten
PlantUML Edit PlantUML in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

title Dynamisches Diagramm für Ansicht Kontozusammenfassung

Person(kunde, "Privatkundenkunde") {
Container(spa, "Einseitenanwendung") {
Container(api, "API-Anwendung") {
ContainerDb(db, "Datenbank") {
System_Ext(coreBanking, "Kernbankensystem")
}
}
}
}

Rel(kunde, spa, "1. Klickt auf 'Konten'", "")
Rel(spa, api, "2. GET /accounts", "JSON/HTTPS")
Rel(api, db, "3. Gelesene zwischengespeicherte Zusammenfassung", "")
Rel(api, coreBanking, "4. Abrufen der neuesten Daten", "")
Rel(api, spa, "5. Rückgabe von JSON", "")

SHOW_LEGEND()
@enduml
Edit PlantUML in VPasCode



PlantUML in VPasCode bearbeiten

Bereitstellungsdigramm (hohe Ebene physische Abbildung):

PlantUML


PlantUML in VPasCode bearbeiten
PlantUML Edit PlantUML in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

title Bereitstellungsdigramm für Internetbanking-System

Deployment_Node(aws, "Amazon Web Services", "Cloud") {
Deployment_Node(ec2, "EC2 Auto-Scaling-Gruppe", "Linux") {
Container(api, "API-Anwendung", "Java Spring Boot")
}
Deployment_Node(rds, "RDS", "PostgreSQL") {
ContainerDb(db, "Datenbank")
}
}

Deployment_Node(kundenGerät, "Gerät des Kunden", "Web/Mobil") {
Container(spa, "Einseitenanwendung")
Container(mobil, "Mobile App")
}

System_Ext(coreBanking, "Kernbankensystem (on-prem Mainframe)")

Rel(spa, api, "Stellt API-Aufrufe an", "HTTPS")
Rel(mobil, api, "Stellt API-Aufrufe an", "HTTPS")
Rel_U(api, spa, "Liefert an den Webbrowser des Kunden")
Rel_U(api, mobil, "Liefert an die Mobile App")

SHOW_LEGEND()
@enduml
Edit PlantUML in VPasCode



PlantUML in VPasCode bearbeiten

So verwenden Sie dieses Fallbeispiel in der Praxis

  1. Beginnen Sie mit einer Workshop-Sitzung: Zeichnen Sie den Kontext an einer Tafel.
  2. Gehen Sie schrittweise zu Containern und Komponenten mit Hilfe von PlantUML C4 über.
  3. Halten Sie Diagramme im Code-Repository (als Code!) aufrecht, damit sie aktuell bleiben.
  4. Generieren Sie lebendige Dokumentation automatisch.

Dieses exakte Beispiel für ein Internetbanking-System ist die offizielle Referenz, die von Simon Brown erstellt wurde, und wird weltweit von Tausenden von Organisationen genutzt. Durch die Einhaltung dieser Schritte verfügen Sie nun über eine vollständige, produktionsfertige Architekturbeschreibung, die jeder – von der CEO bis zum neuen Junior-Entwickler – auf der richtigen Detailstufe verstehen kann.

C4-Diagramm-Artikel

Der Artikel ist auch in English, Español, فارسی, Français, English and 日本語 verfügbar.