de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

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 Online-Ansicht ihrer Konten und die Durchführung von Zahlungen zu ermöglichen, während gleichzeitig die Integration mit den bestehenden Kernsystemen der Bank erfolgt.

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 zentrale Entscheidungen

  • Wie das Diagramm Stakeholder unterstützt

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

Zweck: Zeigt, 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 Kontendaten und Zahlungen)

  • Internet-Banking-System → sendet E-Mail über → E-Mail-System

Hier ist das PlantUML C4-Kontextdiagramm:

@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

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: Vergrößert das Internet-Banking-System und zeigt die wichtigsten bereitstellbaren/ausführbaren Einheiten (Container) sowie deren technologische Auswahl. Zielgruppe: Architekten, Leitentwickler, Betrieb.

Container innerhalb des Internet-Banking-Systems:

  • Einzelseitenanwendung (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 Mainframe).

Wichtige Beziehungen (ähnliche externe Systeme wie Ebene 1):

  • SPA und Mobile App → Aufruf → API-Anwendung

  • API-Anwendung ↔ Datenbank

  • API-Anwendung → Kernbankensystem und E-Mail-System

PlantUML C4-Container-Diagramm:

@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()

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

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

System_Grenze(internet_banking_system, „Internet-Banking-System“, „Das neue System zum Anzeigen von Konten und Ausführen von Zahlungen.“) {
Container(spa, „Einzelseitenanwendung“, „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 und zwischengespeicherte Kontozusammenfassungen“, $sprite=”postgresql”)
}

System(core_banking_system, „Kernbankensystem“, „Bestehende Mainframe-Plattform zur Verwaltung von Kundendaten, Konten und Transaktionen.“)
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, core_banking_system, „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, core_banking_system)
Lay_U(email_system, internet_banking_system)

@enduml

Begründung: Wir haben ein modernes SPA + API-Backend-Muster für die Webanwendung gewählt, eine native Mobile-App für bessere Leistung und die Datenbank leicht gehalten (die meisten Daten befinden sich im veralteten Mainframe). Diese Darstellung ist die einzig wahre Quelle für strategische technische Entscheidungen und unterstützt DevOps bei der Planung der Infrastruktur.

Schritt 3: Komponentendiagramm (Ebene 3)

Zweck: Vergrößerung eines Containers (normalerweise der komplexeste – die API-Anwendung) zur Darstellung ihrer wichtigsten logischen Komponenten. Zielgruppe: Entwicklerteams.

Beispiel: Komponenten innerhalb der API-Anwendung:

  • Accounts-Controller (Spring MVC)

  • Authentifizierungs-Controller

  • Controller für Passwort zurücksetzen

  • Sicherheitskomponente (verwaltet Authentifizierung, JWT usw.)

  • Komponente für Kontoverwaltung (koordiniert Aufrufe zum Kernbankensystem)

  • Komponente für E-Mail-Benachrichtigungen

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

@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, "Einseitige Anwendung", "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, "Kontrolller für Konten", "Spring MVC", "Bietet Kunden Kontenübersichten und Kontostände an.")
    Component(auth, "Authentifizierungs-Kontroller", "Spring MVC", "Verwaltet Benutzeranmeldungen, Sitzungsmanagement und Token-Erzeugung.")
    Component(reset, "Passwort-Zurücksetzungs-Kontroller", "Spring MVC", "Ermöglicht Benutzern das Zurücksetzen ihres Passworts per E-Mail.")
    Component(security, "Sicherheitskomponente", "Spring Bean", "Verwaltet Authentifizierung, JWT-Token-Erzeugung und Passwort-Hashing.")
    Component(accountmgmt, "Kontomanagement-Komponente", "Spring Bean", "Koordiniert Aufrufe an das Kernbankensystem für Kontobearbeitungen.")
    Component(email, "E-Mail-Benachrichtigungs-Komponente", "Spring Bean", "Versendet Passwort-Zurücksetzungs-E-Mails und E-Mail-Bestätigungen per 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


Begründung: 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ü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-KontrollerKomponente – ein einfaches UML-Klassendiagramm in PlantUML:

@startuml
classDiagram

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

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

class „AuthenticationController“ {
+login(Berechtigungen)
+refreshToken()
}

class „JwtTokenProvider“ {
+generateToken(Benutzer)
+validateToken(token)
}

class „UserRepository“ {
+findByUsername()
}

AuthenticationController ..> JwtTokenProvider : „verwendet“
AuthenticationController ..> UserRepository : „verwendet“
@enduml


In echten Projekten überspringt man oft Ebene 4 und verweist stattdessen auf den eigentlichen Quellcode.

Schritt 5: Unterstützende Diagramme

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

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

title Dynamisches Diagramm für Kontenübersicht anzeigen

Person(kunde, „Privatkundenkunde“) {
Container(spa, „Einzelseitenanwendung“) {
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. Abruf der neuesten Daten“, „“)
Rel(api, spa, „5. Rückgabe von JSON“, „“)

SHOW_LEGEND()
@enduml

Bereitstellungsdiagramm (hohe Ebene physische Abbildung):

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

Titel Bereitstellungsdiagramm für das Internet-Banking-System

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

Bereitstellungs-Knoten(customerDevice, „Gerät des Kunden“, „Web/Mobil“) {
Container(spa, „Einzelseitenanwendung“)
Container(mobile, „Mobile App“)
}

System_Ext(coreBanking, „Kern-Banking-System (on-prem Mainframe)“)

Rel(spa, api, „Macht API-Aufrufe an“, „HTTPS“)
Rel(mobile, api, „Macht API-Aufrufe an“, „HTTPS“)
Rel_U(api, spa, „Liefert an den Web-Browser des Kunden“)
Rel_U(api, mobile, „Liefert an die Mobile-App“)

SHOW_LEGEND()
@enduml

Wie man dieses Fallbeispiel in der Praxis einsetzt

  1. Beginnen Sie mit einem Workshop: Zeichnen Sie den Kontext an eine Tafel.

  2. Iterieren Sie zu Containern und Komponenten mit PlantUML C4.

  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 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ügen Sie nun über eine vollständige, produktionsfertige Architekturbeschreibung, die jeder – von der Geschäftsführung bis hin zu einem neuen Junior-Entwickler – auf der richtigen Detailtiefe verstehen kann.

C4-Diagramm-Artikel

Der Artikel ist auch in English, Español, فارسی, Français, English, Bahasa Indonesia, 日本語, Polski, Portuguese, Ру́сский, Việt Nam, 简体中文 and 繁體中文 verfügbar.