Read this post in: de_DEen_USes_ESfr_FRhi_INid_IDjapt_PTru_RUvizh_CNzh_TW

Przewodnik po referencji do playbooka VPASCode PlantUML

Wybór artykułów z playbooka VPASCode PlantUML zawierający przewodniki składni dla diagramów UML i nie-UML w przepływach diagramów jako kodu.

Podstawy jądra i składni PlantUML

  1. Podstawy składni PlantUML: Opanuj podstawową składnię PlantUML, w tym deklarację diagramu za pomocą @startuml/@enduml, definicje encji, operatory relacji, dyrektywy stylizacji oraz typowe słowa kluczowe. Naucz się tworzyć czyste, czytelne skrypty PlantUML, które automatycznie generują profesjonalne diagramy. [[34]]

  2. Przewodnik po składni diagramów przypadków użycia PlantUML: Naucz się modelować wymagania funkcjonalne oraz interakcje aktorów za pomocą diagramów przypadków użycia PlantUML. Omawia aktorów, przypadki użycia, granice systemu, relacje include/extend oraz wzorce uogólnienia do dokumentowania wymagań i mapowania historii użytkownika.

  3. Przewodnik po składni diagramów klas PlantUML: Projektuj statyczne struktury systemu za pomocą diagramów klas PlantUML. Opanuj deklaracje klas/atrybutów/metod, modyfikatory widoczności, dziedziczenie (<|--), kompozycję (*--), agregację (o--), oraz relacje asociacji do dokumentowania architektury opartej na obiektach. [[49]]

  4. Przewodnik po składni diagramów sekwencji PlantUML: Modeluj przepływy komunikatów i interakcje czasowe między składnikami systemu. Naucz się deklaracji uczestników, komunikatów synchronicznych/asynchronicznych (->, -->), paski aktywacji, pętle, bloki alt/else oraz składnię tworzenia/deaktywacji do projektowania interfejsów API i diagramów komunikacji mikroserwisów. [[51]]

  5. Przewodnik po składni diagramów aktywności PlantUML: Wizualizuj procesy biznesowe i przepływy algorytmiczne za pomocą składni diagramów aktywności PlantUML. Omawia węzły startu/końca, działania, gałęzie warunkowe (if/then/else), pętle (repeat/while), równoległe gałęzie i strefy przepływu dla dokumentacji logiki proceduralnej. [[46]]

  6. Przewodnik po składni diagramów stanów PlantUML: Modeluj skończone maszyny stanów i przejścia cyklu życia obiektów. Naucz się deklaracji stanów, strzałek przejść (-->), akcji wejścia/wyjścia, stanów złożonych i obszarów współbieżnych do projektowania systemów sterowanych zdarzeniami i specyfikacji zachowań. [[36]]

  7. Przewodnik po składni diagramów obiektów PlantUML: Ilustruj konkretne instancje obiektów i ich relacje w czasie rzeczywistym w konkretnym momencie. Opanuj nazewnictwo obiektów, przypisywanie wartości atrybutów, składnię połączeń oraz powiązania na poziomie instancji do debugowania i wizualizacji scenariuszy testowych. [[15]]

  8. Przewodnik po składni diagramów składników PlantUML: Mapuj architekturę oprogramowania modułowego za pomocą składników, interfejsów i zależności. Naucz się deklaracji składników, dostarczanych/ wymaganych interfejsów (<>), strzałek zależności oraz grupowania pakietów do dokumentowania systemów mikroserwisów i opartych na wtyczkach. [[35]]

Zaawansowane typy diagramów PlantUML

  1. Przewodnik po składni diagramów wdrażania PlantUML: Modeluj infrastrukturę fizyczną i topologię wdrażania w czasie rzeczywistym. Opanuj węzeł, chmura, ramka, baza danych, oraz artefakt elementy, składnia zagnieżdżonych kontenerów oraz etykietowanie protokołów sieciowych do książek zadań DevOps i diagramów architektury chmury. [[31]]

@startuml
skinparam shadowing false
skinparam defaultFontName "Arial"

' Zdefiniuj style
skinparam node {
BackgroundColor #F1F8FF
BorderColor #005CC5
FontColor #032F62
}

skinparam database {
BackgroundColor #FFF5E6
BorderColor #D96F00
FontColor #5C3000
}

skinparam artifact {
BackgroundColor #E6FFF1
BorderColor #008670
FontColor #004D40
}

left to right direction

' Strefy sieciowe / Węzły
node "Sieć dostarczania treści" as cdn <<CDN>> {
artifact "Zachowane statyczne zasoby" as static
}

node "Balansowanie obciążenia" as lb <<F5 / HAProxy>>

node "Serwer aplikacji" as appServer <<Ubuntu Linux>> {
node "Kontener Docker" as docker {
artifact "app.war" as artifactApp
}
}

node "Serwer bazy danych" as dbServer <<Klastrowy>> {
database "Baza produkcyjna" as db <<PostgreSQL>>
}

' Połączenia z etykietami protokołów
cdn --> lb : HTTP/HTTPS (Port 443)
lb --> artifactApp : HTTP (Port 8080)
artifactApp --> db : JDBC / SQL (Port 5432)

@enduml

Przykład: Klasyczna architektura trzywarstwowa pokazująca CDN, balansowanie obciążenia, serwer aplikacji z zagnieżdżonym artefaktem oraz warstwę bazy danych z połączeniami oznaczonymi protokołami. [[1]]

@startuml

skinparam shadowing false

skinparam defaultFontName "Arial"

skinparam linetype ortho

' Definicje stylów

skinparam rectangle {

    BackgroundColor #F4F6F9

    BorderColor #A0AAB2

    FontColor #232F3E

}

skinparam node {

    BackgroundColor #E2F3FC

    BorderColor #4A90E2

    FontColor #111111

}

skinparam database {

    BackgroundColor #FFF2E6

    BorderColor #FF9900

    FontColor #232F3E

}

' Punkt wejścia infrastruktury

node "AWS Route 53" as dns

node "AWS Application Load Balancer" as alb

dns --> alb : Przekieruj ruch

' Granica chmury globalnej

rectangle "Strefa chmury AWS" {

   

    ' Granica klastra Kubernetes między strefami dostępności

    rectangle "Klaster Amazon EKS" as eks {

       

        ' Strefa dostępności 1

        rectangle "Strefa dostępności us-east-1a" as az1 #line.dashed {

            node "Węzeł roboczy EC2 (AZ1)" as node1 {

                rectangle "Podd frontend" as podWeb1 <<K8s Pod>> {

                    artifact "Kontener Nginx" as containerWeb1

                }

                rectangle "Podd API backend" as podApi1 <<K8s Pod>> {

                    artifact "Kontener aplikacji Go" as containerApi1

                }

            }

        }

        ' Strefa dostępności 2

        rectangle "Strefa dostępności us-east-1b" as az2 #line.dashed {

            node "Węzeł roboczy EC2 (AZ2)" as node2 {

                rectangle "Podd frontend" as podWeb2 <<K8s Pod>> {

                    artifact "Kontener Nginx" as containerWeb2

                }

                rectangle "Podd API backend" as podApi2 <<K8s Pod>> {

                    artifact "Kontener aplikacji Go" as containerApi2

                }

            }

        }

    }

    ' Współdzielona warstwa bazy danych

    rectangle "Silnik magazynowania Amazon Aurora" as storage {

        database "Główna Aurora (pisarz)" as dbMaster

        database "Replika Aurora (czytelnik)" as dbReplica

    }

}

' Routing i macierz ruchu

alb --> podWeb1 : HTTP/S (Port 80/443)

alb --> podWeb2 : HTTP/S (Port 80/443)

podWeb1 --> podApi1 : gRPC (Port 50051)

podWeb2 --> podApi2 : gRPC (Port 50051)

podApi1 --> dbMaster : TCP (Port 5432)

podApi2 --> dbMaster : TCP (Port 5432)

dbMaster .right.> dbReplica : Automatyczna replikacja magazynu

@enduml

Przykład: Wdrożenie Kubernetes typu cloud-native na różnych strefach dostępności AWS z routowaniem przez balanser obciążenia, zagnieżdżaniem podów oraz współdzielonym klastrem bazy danych. [[1]]

  1. Przewodnik po składni diagramów czasowych PlantUML: Wizualizuj dokładne trwałości stanów i ograniczenia czasowe wzdłuż liniowych osi czasu. Poznaj solidny/zwięzły style uczestników, @punkt czasu przypisywanie stanów, zegar generowanie przebiegów i <-> adnotacje ograniczeń dla systemów wbudowanych i specyfikacji protokołów. [[30]]

@startuml
skinparam handwritten false
skinparam shadowing false
skinparam defaultFontName "Arial"

' Tytuł diagramu czasowego
title Chronologia synchronizacji rejestru magistrali danych

' Zdefiniuj okresowy przebieg zegara (okres 10 jednostek, wysoki 5 jednostek)
clock "Zegar systemowy" jako CLK z okresem 10 impuls 5

' Zdefiniuj uczestnika magistrali danych jako solidny
robust "Rejestr magistrali danych" jako BUS

' Czas 0: początkowy stan rejestru
@0
BUS jest Pusty

' Czas 10: magistrala danych przechodzi do stanu Odczytu
@10
BUS jest Odczyt

' Czas 20: magistrala danych przechodzi do stanu Zapisu
@20
BUS jest Zapis

' Czas 22: wyświetl etykietę tekstową na osi czasu
@22
note top of BUS : T_ZAPIS

' Czas 30: magistrala danych staje się Zablokowana
@30
BUS jest Zablokowany

' Czas 35: wyświetl etykietę tekstową na osi czasu
@35
note top of BUS : T_BLOKADA

' Czas 40: magistrala danych powraca do stanu Pusty
@40
BUS jest Pusty

' Dodaj adnotacje ograniczeń czasowych przy użyciu jawnych punktów liczbowych
@22 <-> @35 : {13 jednostek czasu Trwałość}

@enduml

Przykład: Zwięzła linia czasu pokazująca stany rejestru magistrali danych (Pusty → Odczyt → Zapis → Zablokowany), zsynchronizowane z okresowym przebiegiem zegara systemowego. [[12]]

@startuml

skinparam shadowing false

skinparam defaultFontName "Arial"

' Tytuł diagramu czasowego wielowątkowego

title Synchronizacja wątku klienta internetowego i wątku pracownika uwierzytelniania

' Zadeklaruj linie czasu przy użyciu stylu uczestnika solidnego

robust "Wątek klienta internetowego" jako CLIENT

robust "Wątek pracownika uwierzytelniania" jako AUTH

' Czas 0ms: początkowe stany bezczynności

@0

CLIENT jest Bezczynny

AUTH jest Bezczynny

' Czas 10ms: Klient wyzwala żądanie uwierzytelnienia

@10

CLIENT jest "Oczekujące uwierzytelnienie"

AUTH jest "Weryfikacja poświadczeń"

' Czas 25ms: Klient wysyła dodatkowe dane / Uwierzytelnianie zaczyna generować token

@25

AUTH jest "Generowanie tokenu JWT"

' Czas 40ms: Uwierzytelnianie kończy generowanie tokenu i odpowiada klientowi

@40

AUTH jest Bezczynny

CLIENT jest "Zautoryzowany"

' Czas 55ms: Klient powraca do stanu domyślnego

@55

CLIENT jest Bezczynny

' Adnotacja okna ograniczeń czasowych 30ms (od @10 do @40)

@10 <-> @40 : {30ms Okno generacji}

@enduml

Przykład: Solidna linia czasu mapująca stany klienta internetowego i pracownika uwierzytelniania z adnotacją ograniczenia okna generacji 30ms. [[12]]

  1. Przewodnik po składni diagramów ERD PlantUML: Projektuj diagramy relacji encji do dokumentacji schematu bazy danych. Opanuj deklaracje encji, typowanie atrybutów, oznaczenia kluczy głównych/obcych oraz relacje liczności (1|o--o{) do modelowania danych i planowania migracji SQL.

  2. Przewodnik po składni diagramów ArchiMate PlantUML: Modeluj warstwy architektury przedsiębiorstwa przy użyciu specyfikacji ArchiMate. Poznaj elementy warstw biznesowej/aplikacji/technologii, koncepcje motywacji oraz typy relacji do strategicznego planowania IT i dokumentacji zarządzania.

  3. Przewodnik po składni modelu C4 PlantUML: Zaimplementuj model C4 do wizualizacji architektury oprogramowania na czterech poziomach abstrakcji: Kontekst, Kontener, Komponent i Kod. Opanuj Osoba, System, Kontener, i Składnik stereotypy z kontenerami granicznymi i stylizacją relacji do komunikacji architektonicznej dopasowanej do zainteresowań stakeholderów.

Uwaga dotyczące osadzonych diagramów: Wszystkie przykłady kodu PlantUML w dokumentacji VPASCode są renderowane jako interaktywne, edytowalne diagramy bezpośrednio w przeglądarce. Linki do obrazów PNG powyżej pokazują statyczne podglądy przykładów diagramów; aby uzyskać pełną interaktywność, w tym edycję w czasie rzeczywistym, weryfikację składni i eksport do PNG/SVG, odwiedź każdy artykuł bezpośrednio pod adresem vpascode.com/docs. [[54]]

Funkcje edytora VPasCode: Każdy artykuł zawiera przyciski „Edytuj PlantUML w VPasCode”, które uruchamiają przykład kodu w darmowym, przeglądarkowym edytorze VPasCode — nie wymaga logowania ani instalacji. Zmiany są natychmiast widoczne dzięki renderowaniu w czasie rzeczywistym. [[54]]

Źródło: zestawienie z dokumentacji VPasCode. VPasCode to darmowy, internetowy, przeglądarkowy edytor diagramów PlantUML, Mermaid i Graphviz, który nie wymaga logowania ani instalacji. [[54]]

Leave a Reply