de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

The model C4, opracowany przez Simona Browna, to potężna, hierarchiczna metoda wizualizacji architektury oprogramowania. Wykorzystuje cztery poziomy abstrakcji, aby zapewnić odpowiedni poziom szczegółowości dla różnych odbiorców, od stakeholderów biznesowych po programistów. Dzięki temu jest idealny do tworzenia jasnych, utrzymywalnych i skierowanych do konkretnych odbiorców dokumentów.

Introduction to C4 Model: a Quick Guide - Visual Paradigm Blog

Ten kompleksowy przewodnik opiera się na dobrze znanej studium przypadku System Internetowego Bankowości Big Bank plc — fikcyjny, ale realistyczny przykład budowy platformy internetowego bankowości dla klientów indywidualnych, którzy mogą przeglądać konta i dokonywać płatności. Studium przypadku pokazuje, jak stopniowo stosować model C4, wykorzystując PlantUML do „architektury jako kodu”. Wprowadza również nowoczesne narzędzia takie jak Visual Paradigm’s AI-zasilany C4 PlantUML Studio (wydany na przełomie 2025 roku), aby przyspieszyć tworzenie i utrzymanie.

Przegląd modelu C4

Model zawiera cztery poziomy:

  1. Poziom 1: Kontekst systemu — Wielka całość: system, użytkownicy i zależności zewnętrzne.

  2. Poziom 2: Kontenery — Główne jednostki wdrażalne (aplikacje, usługi, bazy danych) oraz wybrane na najwyższym poziomie technologie.

  3. Poziom 3: Komponenty — Wewnętrzne logiczne elementy budowlane wewnątrz kontenera.

  4. Poziom 4: Kod — Opcjonalne szczegółowe informacje na niskim poziomie (np. klasy); często pomijane na rzecz odwołań do kodu źródłowego.

Dodatkowe wspierające widoki obejmują diagramy dynamiczne (przepływy w czasie działania) oraz diagramy wdrażania.

Stosowanie modelu C4: Studium przypadku Systemu Internetowego Bankowości Big Bank plc

Poziom 1: Diagram kontekstu systemu

Cel: Zapewnienie ogólnego przeglądu dla stakeholderów biznesowych i odbiorców nieinformatycznych, pokazując, jak System Internetowego Bankowości pasuje do szerszego środowiska bez używania żargonu technicznego.

Kluczowe elementy:

  • Osoba: Klient prywatny — Klient posiadający jedno lub więcej kont prywatnych.

  • System oprogramowania: System bankowości internetowej — umożliwia klientom przeglądanie informacji o kontach i dokonywanie płatności.

  • Systemy zewnętrzne:

    • System bankowości główny (istniejący mainframe) — obsługuje dane klientów, konta i transakcje.

    • System poczty e-mail (np. AWS SES) — wysyła potwierdzenia i powiadomienia.

Związki:

  • Klient korzysta z systemu bankowości internetowej.

  • System bankowości internetowej korzysta z systemu bankowości głównego w celu danych i transakcji.

  • System bankowości internetowej wysyła e-mail przez system poczty e-mail.

Ten poziom utrzymuje rzeczy proste i jasne pod względem zakresu oraz integracji.

Przykład PlantUML (dostosowane z przypadku badawczego):

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

tytuł Diagram kontekstu systemu (poziom 1) dla systemu bankowości internetowej
Osoba(klient, "Klient bankowości osobistej", "Klient posiadający jedno lub więcej kont bankowych osobistych.")
System(system_bankowosci_internetowej, "System bankowości internetowej", "Zezwala klientom na przeglądanie kont i dokonywanie płatności.")
System(system_bankowosci_glownej, "System bankowości głównej", "Istniejący mainframe obsługujący dane klientów, konta i transakcje.")
System_Zew(system_poczty_e-mail, "System poczty e-mail", "Usługa prostego e-maila Amazon Web Services (AWS SES) do wysyłania potwierdzeń.")
Rel(klient, system_bankowosci_internetowej, "Korzysta z")
Rel(system_bankowosci_internetowej, system_bankowosci_glownej, "Korzysta z")
Rel(system_bankowosci_internetowej, system_poczty_e-mail, "Wysyła e-mail przez")
@enduml

Poziom 2: Diagram kontenerów

Cel: Powiększenie, aby pokazać główne elementy budowlane (kontenery) oraz wyboru technologii, skierowane do architektów, programistów i zespołów DevOps.

Główne elementy (w obrębie granic systemu bankowości internetowej):

  • Aplikacja jednostronicowa (SPA) — JavaScript + Angular, pełna interfejs użytkownika w przeglądarce internetowej.

  • Aplikacja mobilna — iOS/Android z React Native (lub podobnym), ograniczona funkcjonalność.

  • Aplikacja API — Java + Spring Boot, interfejs API JSON/HTTPS obsługujący oba front-endy.

  • Baza danych — PostgreSQL, przechowuje dane sesji, ustawienia i przesumowane dane tymczasowe (dane główne pozostają na głównym komputerze).

Zewnętrzne — System bankowości główny i system pocztowy.

Związki:

  • Klient korzysta z aplikacji jednostronicowej i aplikacji mobilnej przez HTTPS.

  • Aplikacja jednostronicowa i aplikacja mobilna wywołują aplikację API (JSON/HTTPS).

  • Aplikacja API odczytuje/zapisuje do bazy danych (JDBC/SQL).

  • Aplikacja API komunikuje się z systemem bankowości głównego (JSON/HTTPS) i systemem pocztowym (HTTPS).

Ten diagram pełni rolę „jedynego źródła prawdy” w kwestiach decyzji technologicznych.

Przykład PlantUML (używa sprite’ów do ikon):

@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 Diagram kontenerów C4 dla systemu bankowości internetowej
Person(customer, "Klient bankowości osobistej", "Klient z jednym lub większą liczbą kont bankowych osobistych.")
System_Boundary(internet_banking_system, "System bankowości internetowej") {
    Container(spa, "Aplikacja jednostronicowa", "JavaScript + Angular", "Pełny interfejs użytkownika bankowości internetowej", $sprite="angular")
    Container(mobile_app, "Aplikacja mobilna", "iOS/Android (React Native)", "Ograniczona funkcjonalność", $sprite="react")
    Container(api_app, "Aplikacja API", "Java + Spring Boot", "Interfejs API JSON/HTTPS", $sprite="java")
    ContainerDb(database, "Baza danych", "PostgreSQL", "Dane sesji, ustawienia, przesumowane dane tymczasowe", $sprite="postgresql")
}
System(core_banking_system, "System bankowości główny", "Istniejący główny komputer...")
System_Ext(email_system, "System pocztowy", "AWS SES...")
Rel(customer, spa, "Korzysta z", "HTTPS")
Rel(customer, mobile_app, "Korzysta z", "HTTPS")
Rel(spa, api_app, "Wywołuje", "JSON/HTTPS")
Rel(mobile_app, api_app, "Wywołuje", "JSON/HTTPS")
Rel(api_app, database, "Odczytuje i zapisuje do", "JDBC/SQL")
Rel(api_app, core_banking_system, "Zapytania / Aktualizacje", "JSON/HTTPS")
Rel(api_app, email_system, "Wysyła e-mail przez", "HTTPS")
@enduml

Poziom 3: Diagram komponentów

Cel: Szczegółowa struktura wewnętrzna kluczowego kontenera (tutaj aplikacji API) dla zespołów programistycznych.

Kluczowe komponenty (w obrębie aplikacji API):

  • Kontroler kont (Spring MVC) — Zapewnia podsumowania i salda.

  • Kontroler uwierzytelniania (Spring MVC) — Logowanie, sesje, tokeny.

  • Kontroler resetu hasła (Spring MVC) — Resetowanie haseł przez e-mail.

  • Komponent zabezpieczeń (Spring Bean) — Uwierzytelnianie, JWT, haszowanie.

  • Komponent zarządzania kontami (Spring Bean) — Koordynuje wywołania systemu bankowości głównego.

  • Komponent powiadomień e-mail (Spring Bean) — Wysyła e-maile.

Interakcje — Kontrolery korzystają z zabezpieczeń; Zarządzanie kontami korzysta z bankowości głównej; e-mail korzysta z bazy danych; front-endy wywołują kontrolery.

Przykład PlantUML:

PlantUML Diagram

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
LAYOUT_WITH_LEGEND()
tytuł Diagram komponentów dla systemu internetowego bankowości – aplikacja API
Container(spa, "Aplikacja jednostronicowa", "javascript i angular", "...")
Container(ma, "Aplikacja mobilna", "...", "...")
ContainerDb(db, "Baza danych", "...", "...")
System_Ext(mbs, "System bankowy mainframe", "...")
Container_Boundary(api, "Aplikacja API") {
    Component(accounts, "Kontroler kont", "Spring MVC", "...")
    Component(auth, "Kontroler uwierzytelniania", "Spring MVC", "...")
    Component(reset, "Kontroler resetu hasła", "Spring MVC", "...")
    Component(security, "Komponent zabezpieczeń", "Spring Bean", "...")
    Component(accountmgmt, "Komponent zarządzania kontami", "Spring Bean", "...")
    Component(email, "Komponent powiadomień e-mail", "Spring Bean", "...")
    Rel(accounts, security, "Używa")
    Rel(auth, security, "Używa")
    Rel(reset, security, "Używa")
    Rel(accountmgmt, mbs, "Używa", "XML/HTTPS")
    Rel(email, db, "Odczytuje", "JDBC")
}
Rel(spa, accounts, "Używa", "JSON/HTTPS")
Rel(spa, auth, "Używa", "JSON/HTTPS")
Rel(spa, reset, "Używa", "JSON/HTTPS")
Rel(ma, accounts, "Używa", "JSON/HTTPS")
Rel(ma, auth, "Używa", "JSON/HTTPS")
Rel(ma, reset, "Używa", "JSON/HTTPS")
@enduml

Poziom 4: Diagram kodu (opcjonalny)

Cel: Pokazuje szczegóły na poziomie klas dla określonych obszarów (np. uwierzytelnianie).

Często pomijane – zamiast tego wskazuje się na kod źródłowy.

Przykład — Diagram klas UML dla uwierzytelniania:

  • AuthenticationController używa JwtTokenProvider i UserRepository.

Przykład PlantUML:

@startuml
classDiagram
class "AuthenticationController" {
    +login(credencjaly)
    +refreshToken()
}
class "JwtTokenProvider" {
    +generateToken(użytkownik)
    +validateToken(token)
}
class "UserRepository" {
    +findByUsername()
}
AuthenticationController ..> JwtTokenProvider : "używa"
AuthenticationController ..> UserRepository : "używa"
@enduml

Wspierające widoki

  • Diagram dynamiczny (np. sekwencja „Wyświetl podsumowanie konta”): Klient → SPA → API → Baza danych/centralny system bankowy → Odpowiedź.

  • Diagram wdrażania: Mapuje kontenery na infrastrukturę (np. AWS EC2 dla API, RDS dla bazy danych, mainframe lokalny).

Wykorzystanie narzędzi AI wizualizacji Visual Paradigm

Narzędzia Visual ParadigmStudio C4 PlantUML z możliwością AI (wysokość 2025 roku) rewolucjonizuje ten proces:

  • Wprowadź język naturalny (np. „Utwórz model C4 dla systemu internetowego bankowości z SPA, aplikacją mobilną, API Spring Boot, PostgreSQL i integracją z mainframe”).

  • AI generuje kod PlantUML i diagramy dla wszystkich poziomów.

  • Użyj czatobota AI do iteracji (np. „Dodaj uwierzytelnianie dwuetapowe do komponentu uwierzytelniania” lub „Wygeneruj widok wdrażania na AWS”).

  • Zachowuj spójność między poziomami i wspieraj „żywą dokumentację”.

  • Eksportuj, zarządzaj wersjami i integruj z repozytoriami.

To narzędzie zapewnia strukturalne, zgodne z C4 wyjście znacznie bardziej wiarygodnie niż ogólne narzędzia AI.

Najlepsze praktyki

  1. Zacznij od warsztatów — Używaj tablic do poziomu 1 w celu skoordynowania zainteresowanych stron.

  2. Traktuj architekturę jak kod — Przechowuj pliki PlantUML w swoim repozytorium, aby automatycznie aktualizować je wraz z zmianami kodu.

  3. Automatyzuj za pomocą AI — Użyj Visual Paradigm, aby szybko generować i doskonać diagramy.

  4. Skupienie na odbiorcach — Pomijaj szczegóły techniczne na poziomie 1; dodawaj je stopniowo.

  5. Zachowaj lekkość — Szczegółowo opisuj tylko złożone kontenery na poziomie 3; pomiń poziom 4, chyba że jest to konieczne.

  6. Rozwijaj dokumentację — Robiąc diagramy „żywymi”, zapobiegaj utracie aktualności dokumentacji.

Przypadek badawczy The Big Bank plc nadal stanowi kanoniczny przykład skuteczności modelu C4 w rzeczywistych scenariuszach, wspierając przejrzystość, współpracę i skalowalną komunikację architektury. Aby dowiedzieć się więcej, odwiedź oficjalną stronę C4 lub narzędzia AI Visual Paradigm.

Ten post dostępny jest również w Deutsch, English, Español, فارسی, Français, English, Bahasa Indonesia, 日本語, Portuguese, Ру́сский, Việt Nam, 简体中文 and 繁體中文