de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

Opanowanie diagramu kontenerów C4: przybliżenie wyborów technologicznych, odpowiedzialności i komunikacji (z przykładami PlantUML)

Co to jest diagram kontenerów C4?

Diagram kontenerów toPoziom 2 w modelu C4 Simona Brown’a. Przybliża pojedynczy system oprogramowania (zdefiniowany na poziomie 1 – kontekst systemu), aby pokazać:

The Ultimate Guide to C4 Model Visualization with Visual Paradigm's AI Tools - ArchiMetric

  • Pojedynczykształt najwyższego poziomu architektury wewnątrz granic Twojego systemu.

  • Głównejednostki wdrażalne/uruchamialne nazywanekontenerami.

  • Wybory technologiczne dla każdego kontenera.

  • Jak kontenerywzajemnie oddziałują na siebie oraz z zewnętrznymi aktorami/systemami.

Ważna wyjaśnienie: „Kontener” w C4nie jest koniecznie kontenerem Docker. Jest to dowolna samodzielnie wdrażalna/uruchamialna jednostka, która wykonuje kod lub przechowuje dane. Przykłady:

  • Aplikacja internetowa / aplikacja jednostronicowa (SPA)

  • Aplikacja mobilna

  • Interfejs API po stronie serwera / mikroserwis

  • Baza danych (schemat)

  • Przechowywanie plików (pojemnik S3, folder systemu plików)

  • Broker komunikatów / kolejka (gdy jest modelowana jawnie)

  • Aplikacja stacjonarna / aplikacja konsolowa (CLI)

  • Proces partii / zaplanowana zadanie

Diagram pozostajewysokopoziomowy— brak szczegółów dotyczących klas lub kodu wewnętrznego (to poziom 3 Komponenty lub poziom 4 Kod).

Kiedy tworzyć diagram kontenerów

Twórz (i utrzymuj) diagram kontenerów, gdy:

  • Zakończyłeś (lub przynajmniej narysowałeś szkic) diagramu kontekst systemudiagram i musisz odpowiedzieć: „Jakie są główne elementy budowlane wewnątrz naszego systemu?”

  • Wprowadzanie nowych programistów, architektów lub pracowników działu operacyjnego — potrzebują szybko zrozumieć stos technologii i ogólne odpowiedzialności.

  • Przyjmowanie istotnych decyzji technologicznych lub architektonicznych (monolit → mikroserwisy, dodawanie aplikacji mobilnej, wybór bazy danych, wprowadzanie kolejek komunikatów, migracja do chmury).

  • Dokumentowanie w celu audytów, zgodności, przeglądów bezpieczeństwa lub reagowania na incydenty (pomaga pokazać powierzchnię ataku, przepływy danych).

  • Chcesz „architektury jako kodu”, który znajduje się w repozytorium i ewoluuje razem z systemem.

  • Większość zespołów zatrzymuje się tutaj— sam Simon Brown zauważa, że Kontekst systemu + kontenerydiagramy są wystarczające dla większości zespołów programistycznych. Przechodzisz głębiej (komponenty/kod) tylko wtedy, gdy złożoność wewnątrz kontenera to uzasadnia.

Pomiń lub odłóż, jeśli:

  • System jest bardzo prosty (jeden proces + baza danych).

  • Pracujesz nad bardzo wczesnym etapem ideacji i potrzebujesz tylko ogólnego kontekstu.

Dlaczego używać diagramów kontenerów? (Główne korzyści)

  • Jasność dla różnych grup odbiorców
    Programiści widzą technologie i punkty integracji.
    Zespoły operacyjne/infrastruktury widzą jednostki wdrażalne i ścieżki komunikacji.
    Architekci widzą granice odpowiedzialności i ryzyko długu technologicznego.
    Menadżerowie widzą wystarczająco neutralny pod kątem technologii, ale konkretny obraz.

  • Unika problemu „jednego dużego diagramu”
    Zapobiega wrzuceniu wszystkiego (użytkownicy + infrastruktura + klasy + ikony chmury) do jednego przeciążonego obrazu.

  • Wyróżnia istotne decyzje
    Jasno ujawnia wybory, takie jak SPA + API + relacyjna baza danych w porównaniu do renderowania po stronie serwera + NoSQL, lub synchroniczne w porównaniu do oparte na zdarzeniach.

  • Komunikacja i współpraca
    Działa jako wspólna mapa podczas sesji projektowych, analiz incydentów, modelowania zagrożeń i tworzenia planów rozwoju.

  • Żywą dokumentację
    Gdy napisane w PlantUML / Structurizr DSL / podobnym → wersjonowane w Git, automatycznie regenerowane w CI, zawsze aktualne.

Jak stworzyć świetny diagram kontenerów (krok po kroku + najlepsze praktyki)

  1. Zacznij od poziomu 1
    Skopiuj Osoby + zewnętrzne systemy oprogramowania z diagramu kontekstu — stają się aktorami, które oddziałują na Twoje kontenery.

  2. Narysuj granicę systemu
    Użyj Granica_Systemu w PlantUML, aby jasno określić „wewnątrz naszego systemu”.

  3. Zidentyfikuj kontenery
    Zadaj pytanie: Co to są osobno uruchamiane/rozdzielane rzeczy, które zapewniają funkcjonalność systemu?
    Typowe wzorce:

    • Web SPA ↔ backend API ↔ baza danych

    • Aplikacja mobilna ↔ backend dla frontendu (BFF) ↔ wspólne usługi

    • Microserwisy z brokerem komunikatów

    • Starszy monolit + nowa warstwa API

  4. Dodaj technologię i krótki opis
    Każdy kontener powinien pokazywać: nazwę, technologię, krótki cel.
    Trzymaj opisy krótsze niż 15 słów.

  5. Zdefiniuj interakcje (relacje)
    Pokaż kierunek + protokół + cel (np. „JSON/HTTPS”, „Odczytuje i zapisuje do”, „Publikuje do”, „Konsument z”).
    Używaj czasowników w relacjach.

  6. Najlepsze praktyki

    • Zachowaj czytelność — dąż do mniej niż 10–12 kontenerów. Jeśli więcej → twórz skupione widoki (np. „kontenery podsystemu API”).

    • Bądź spójny — ten sam kierunek układu (z góry na dół / z lewej do prawej), ten sam poziom szczegółowości.

    • Używaj ikon/sprites — dodaj wizualny efekt (PlantUML obsługuje devicons, font-awesome itp.).

    • Legenda i klucz — włącz automatyczną legendę w PlantUML.

    • Unikaj zgiełku — pomijaj kolejki/tematy, jeśli nie przynoszą wartości; zamiast tego etykietuj protokoły na strzałkach.

    • Wersja i przechowywanie jako kod — zatwierdzaj pliki .puml w repozytorium.

    • Dostosowanie do odbiorców — jedna wersja dla deweloperów (szczegółowe technologie), lekka wersja dla stakeholderów.

Przykład PlantUML – Klasyczny system internetowego bankowości (styl Big Bank plc)

Oto czysty przykład zgodny z produkcją, wykorzystujący oficjalną bibliotekę C4-PlantUML.

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

' Opcjonalnie: dodaj ładne ikony (z zestawu tupadr3 sprites)
!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
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/android.puml

tytuł Diagram kontenerów: System internetowego bankowości

Osoba(klient, "Klient prywatny", "Klient Big Bank plc")

Granica_systemu(c1, "System internetowego bankowości") {
    Kontener(spa, "Aplikacja jednostronicowa", "JavaScript & Angular", "Dostarcza wszystkie funkcje internetowego bankowości klientom przez przeglądarkę internetową", $sprite="angular")
    Kontener(mobilna, "Aplikacja mobilna", "Android/iOS (React Native)", "Ograniczone funkcje internetowego bankowości", $sprite="android")
    Kontener(api, "Aplikacja API", "Java & Spring Boot", "Dostarcza funkcje internetowego bankowości przez interfejs API", $sprite="java")
    KontenerBazyZewnętrznej(db, "Baza danych bankowości", "PostgreSQL", "Przechowuje preferencje użytkownika, dane w pamięci podręcznej, sesje (główne konta/operacje pozostają na głównym komputerze)", $sprite="postgresql")
}

SystemZewnętrzny(core, "System bankowości głównej", "System główny – istniejący")
SystemZewnętrzny(email, "System e-mailowy", "Wysyła e-maile (np. AWS SES)")

Rel(klient, spa, "Używa", "HTTPS")
Rel(klient, mobilna, "Używa", "HTTPS")

Rel(spa, api, "Wywołuje", "JSON/HTTPS")
Rel(mobilna, api, "Wywołuje", "JSON/HTTPS")

Rel(api, db, "Odczytuje i zapisuje do", "JDBC/SQL")
Rel(api, core, "Używa", "JSON/HTTPS")
Rel(api, email, "Wysyła e-mail za pomocą", "HTTPS")

UŁOŻENIE_Z_LEGENDĄ()
UŁOŻENIE_Z_GÓRY_DO_DÓŁ()

@enduml

Wykres ten wyświetla czysty diagram z:

  • Granica systemu

  • Etykiety technologii

  • Sprite/ikony

  • Jasne relacje

  • Legenda

Możesz wkleić go bezpośrednio na serwerze online PlantUML lub w dowolnym zgodnym edytorze IDE.

Użyj tej struktury jako szablonu — zastąp elementy nazwami swojego systemu, technologiami i przepływami. Aby uzyskać zaawansowane stylizacje (tematy, niestandardowe kolory), sprawdź przykłady z GitHuba C4-PlantUML.

Miłego rysowania diagramów — i pamiętaj: celem jestskuteczna komunikacja, a nie doskonałość UML!

Zasób diagramu kontenerów C4

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