Read this post in: en_USes_ESfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

VPASCode PlantUML Playbook Referenzhandbuch

Eine ausgewählte Liste von Artikeln aus dem VPASCode PlantUML Playbook mit Syntaxanleitungen für UML- und nicht-UML-Diagramme als Code-Workflows.

PlantUML Kern- und Syntaxgrundlagen

  1. PlantUML Syntaxgrundlagen: Beherrschen Sie die grundlegenden PlantUML-Syntaxelemente, einschließlich der Diagrammdeklaration mit @startuml/@enduml, Entitätsdefinitionen, Beziehungsoperatoren, Stilrichtlinien und gängige Schlüsselwörter. Lernen Sie, saubere, lesbare PlantUML-Skripte zu strukturieren, die professionelle Diagramme automatisch generieren. [[34]]

  2. PlantUML Use-Case-Diagramm-Syntaxanleitung: Erlernen Sie, funktionale Anforderungen und Interaktionen zwischen Akteuren mit Hilfe von PlantUML-Use-Case-Diagrammen zu modellieren. Umfasst Akteure, Use Cases, Systemgrenzen, include/extend-Beziehungen sowie Generalisierungsmuster für die Dokumentation von Anforderungen und die Zuordnung von Benutzerstories.

  3. PlantUML Klassendiagramm-Syntaxanleitung: Gestalten Sie statische Systemstrukturen mit PlantUML-Klassendiagrammen. Beherrschen Sie die Deklarationen von Klassen/Attributen/Methoden, Sichtbarkeitsmodifikatoren, Vererbung (<|--), Zusammensetzung (*--), Aggregation (o--), sowie Assoziationsbeziehungen für die Dokumentation objektorientierter Architekturen. [[49]]

  4. PlantUML Sequenzdiagramm-Syntaxanleitung: Modellieren Sie Nachrichtenflüsse und zeitliche Interaktionen zwischen Systemkomponenten. Erlernen Sie die Deklaration von Teilnehmern, synchrone/asynchrone Nachrichten (->, -->), Aktivierungsleisten, Schleifen, alt/else-Blöcke sowie Erstellungs-/Deaktivierungssyntax für die API-Entwicklung und Kommunikationsdiagramme von Microservices. [[51]]

  5. PlantUML Aktivitätsdiagramm-Syntaxanleitung: Visualisieren Sie Geschäftsprozesse und algorithmische Abläufe mit der Syntax von PlantUML-Aktivitätsdiagrammen. Umfasst Start-/Endknoten, Aktionen, bedingte Verzweigungen (if/then/else), Schleifen (repeat/while), parallele Verzweigungen und geteilte Swimlanes zur Dokumentation prozeduraler Logik. [[46]]

  6. PlantUML Zustandsdiagramm-Syntaxanleitung: Modellieren Sie endliche Zustandsmaschinen und Objekt-Lebenszyklus-Übergänge. Lernen Sie Zustandsdeklarationen, Übergangspfeile (-->), Eingangs-/Ausgangsaktionen, zusammengesetzte Zustände und gleichzeitige Bereiche für ereignisgesteuerte Systemgestaltung und Verhaltensspezifikation. [[36]]

  7. PlantUML Objektdiagramm-Syntaxanleitung: Zeigen Sie konkrete Objektinstanzen und ihre Laufzeitbeziehungen zu einem bestimmten Zeitpunkt an. Beherrschen Sie die Objektnamensgebung, die Zuweisung von Attributwerten, die Link-Syntax und assoziierte Instanzen auf Instanzebene zur Fehlersuche und Visualisierung von Test-Szenarien. [[15]]

  8. PlantUML Komponentendiagramm-Syntaxanleitung: Karten Sie modulare Softwarearchitekturen mit Komponenten, Schnittstellen und Abhängigkeiten ab. Lernen Sie Komponentendeklarationen, bereitgestellte/erforderliche Schnittstellen (<>), Abhängigkeitspfeile und Paketgruppierung zur Dokumentation von Microservices und pluginbasierten Systemen. [[35]]

Erweiterte PlantUML-Diagrammtypen

  1. PlantUML Bereitstellungsdiagramm-Syntaxanleitung: Modellieren Sie physische Infrastruktur und die Laufzeit-Bereitstellungs-Topologie. Beherrschen Sie Knoten, Cloud, Rahmen, Datenbank, und Artikel Elemente, verschachtelte Container-Syntax und Netzwerkprotokoll-Beschriftung für DevOps-Runbooks und Cloud-Architekturdiagramme. [[31]]

@startuml
skinparam shadowing false
skinparam defaultFontName "Arial"

' Stile definieren
skinparam node {
BackgroundColor #F1F8FF
BorderColor #005CC5
FontColor #032F62
}

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

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

links nach rechts direction

' Netzwerkzonen / Knoten
node "Content Delivery Network" as cdn <<CDN>> {
artifact "Gecachte statische Ressourcen" as static
}

node "Lastenausgleicher" as lb <<F5 / HAProxy>>

node "Anwendungsserver" as appServer <<Ubuntu Linux>> {
node "Docker-Container" as docker {
artifact "app.war" as artifactApp
}
}

node "Datenbankserver" as dbServer <<Cluster>> {
database "Produktions-DB" as db <<PostgreSQL>>
}

' Verbindungen mit Protokollbeschriftungen
cdn --> lb : HTTP/HTTPS (Port 443)
lb --> artifactApp : HTTP (Port 8080)
artifactApp --> db : JDBC / SQL (Port 5432)

@enduml

Beispiel: Klassische dreistufige Architektur mit CDN, Lastenausgleicher, Anwendungsserver mit verschachteltem Artikel und Datenbank-Ebene mit protokollbeschrifteten Verbindungen. [[1]]

@startuml

skinparam shadowing false

skinparam defaultFontName "Arial"

skinparam linetype ortho

' Stildefinitionen

skinparam rectangle {

    Hintergrundfarbe #F4F6F9

    Randfarbe #A0AAB2

    Schriftfarbe #232F3E

}

skinparam node {

    Hintergrundfarbe #E2F3FC

    Randfarbe #4A90E2

    Schriftfarbe #111111

}

skinparam database {

    Hintergrundfarbe #FFF2E6

    Randfarbe #FF9900

    Schriftfarbe #232F3E

}

' Infrastruktur-Einstiegspunkt

node "AWS Route 53" as dns

node "AWS Application Load Balancer" as alb

dns --> alb : Verkehrsroute

' Globale Cloud-Perimeter

rechteck "AWS Cloud Region" {

   

    ' Grenze des Kubernetes-Clusters über mehrere AZs

    rechteck "Amazon EKS Cluster" as eks {

       

        ' Verfügbarkeitszone 1

        rechteck "Verfügbarkeitszone us-east-1a" as az1 #linie.durchgezogen {

            node "EC2 Worker Node (AZ1)" as node1 {

                rechteck "Frontend-Pod" as podWeb1 <<K8s Pod>> {

                    artifact "Nginx-Container" as containerWeb1

                }

                rechteck "Backend-API-Pod" as podApi1 <<K8s Pod>> {

                    artifact "Go-App-Container" as containerApi1

                }

            }

        }

        ' Verfügbarkeitszone 2

        rechteck "Verfügbarkeitszone us-east-1b" as az2 #linie.durchgezogen {

            node "EC2 Worker Node (AZ2)" as node2 {

                rechteck "Frontend-Pod" as podWeb2 <<K8s Pod>> {

                    artifact "Nginx-Container" as containerWeb2

                }

                rechteck "Backend-API-Pod" as podApi2 <<K8s Pod>> {

                    artifact "Go-App-Container" as containerApi2

                }

            }

        }

    }

    ' Gemeinsame Datenbank-Ebene

    rechteck "Amazon Aurora Speicher-Engine" as storage {

        database "Aurora Primär (Schreiber)" as dbMaster

        database "Aurora Replik (Leser)" as dbReplica

    }

}

' Routing & Verkehrs-Matrix

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 : Speicher-Auto-Replikation

@enduml

Beispiel: Cloud-native Kubernetes-Bereitstellung über AWS-Verfügbarkeitszonen mit Lastenausgleichs-Routing, Pod-Verschachtelung und gemeinsam genutztem Datenbank-Cluster. [[1]]

  1. PlantUML Zeitdiagramm-Syntaxleitfaden: Visualisieren Sie genaue Zustandsdauern und zeitliche Beschränkungen entlang linearer Zeitachsen. Lernen Sie robust/präzise Teilnehmerstile, @zeitpunkt Zustandszuweisungen, Uhr Wellenformgenerierung und <-> Beschränkungsannotierungen für eingebettete Systeme und Protokollspezifikationen. [[30]]

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

' Titel des Zeitdiagramms
title Datenbus-Register-Synchronisations-Zeitachse

' Definieren einer periodischen Uhrwellenform (Periode 10 Einheiten, hoch 5 Einheiten)
clock "Systemuhr" als CLK mit Periode 10 Puls 5

' Definieren des robusten Teilnehmers Datenbus
robust "Datenbus-Register" als BUS

' Zeit 0: Anfänglicher Zustand des Registers
@0
BUS ist leer

' Zeit 10: Datenbus wechselt zu Lesen
@10
BUS ist Lesen

' Zeit 20: Datenbus wechselt zu Schreiben
@20
BUS ist Schreiben

' Zeit 22: Benutzerdefinierten Text auf der Zeitachse anzeigen
@22
note oben von BUS : T_SCHREIBEN

' Zeit 30: Datenbus wird gesperrt
@30
BUS ist Gesperrt

' Zeit 35: Benutzerdefinierten Text auf der Zeitachse anzeigen
@35
note oben von BUS : T_SPERRUNG

' Zeit 40: Datenbus kehrt zu leer zurück
@40
BUS ist leer

' Temporäre Beschränkungsannotierungen mit expliziten numerischen Punkten hinzufügen
@22 <-> @35 : {13 TU Dauer}

@enduml

Beispiel: Präzise Zeitachse, die die Zustände des Datenbus-Registers (Leer → Lesen → Schreiben → Gesperrt) mit einer periodischen Systemuhrwellenform synchronisiert. [[12]]

@startuml

skinparam shadowing false

skinparam defaultFontName "Arial"

' Titel des Mehrthread-Zeitdiagramms

title Web-Client- und Auth-Arbeitsthread-Synchronisation

' Zeitachsen mit dem robusten Teilnehmerstil deklarieren

robust "Web-Client-Thread" als CLIENT

robust "Auth-Arbeitsthread" als AUTH

' Zeit 0ms: Anfängliche Leerzustände

@0

CLIENT ist Leer

AUTH ist Leer

' Zeit 10ms: Client löst eine Authentifizierungsanforderung aus

@10

CLIENT ist "Wartend auf Authentifizierung"

AUTH ist "Überprüfung der Anmeldeinformationen"

' Zeit 25ms: Client sendet zusätzliche Daten / Auth beginnt mit der Tokenerzeugung

@25

AUTH ist "Erzeugung des JWT-Tokens"

' Zeit 40ms: Auth beendet die Tokenerzeugung und antwortet dem Client

@40

AUTH ist Leer

CLIENT ist "Authentifiziert"

' Zeit 55ms: Client kehrt zum Standardzustand zurück

@55

CLIENT ist Leer

' 30ms zeitliche Beschränkungs-Fenster-Anmerkung (von @10 bis @40)

@10 <-> @40 : {30ms Generierungs-Fenster}

@enduml

Beispiel: Robuste Mehrthread-Zeitachse zur Abbildung der Zustände des Web-Clients und des Auth-Arbeitsthreads mit einer zeitlichen Beschränkungsannotierung für ein 30ms-Generierungs-Fenster. [[12]]

  1. PlantUML ERD-Syntaxleitfaden: Entwerfen Sie Entitäts-Beziehungs-Diagramme zur Dokumentation von Datenbankschemata. Beherrschen Sie die Deklaration von Entitäten, Attributtypisierung, Notation für Primär- und Fremdschlüssel sowie Kardinalitätsbeziehungen (1|o--o{) für Datenmodellierung und SQL-Migrationsplanung.

  2. PlantUML ArchiMate-Diagramm-Syntaxleitfaden: Modellieren Sie Unternehmensarchitekturschichten mithilfe der ArchiMate-Spezifikation. Lernen Sie Elemente der Geschäfts-, Anwendungs- und Technologieschichten, Motivationskonzepte sowie Beziehungstypen für strategische IT-Planung und Governance-Dokumentation.

  3. PlantUML C4-Modell-Syntaxleitfaden: Implementieren Sie das C4-Modell zur Visualisierung von Softwarearchitekturen auf vier Abstraktionsstufen: Kontext, Container, Komponente und Code. Beherrschen Sie Person, System, Container, und Komponente Stereotypen mit Grenzcontainern und Beziehungssymbolik für architektonische Kommunikation, die an die Interessen der Stakeholder angepasst ist.

Hinweis zu eingebetteten Diagrammen: Alle PlantUML-Codebeispiele in der VPASCode-Dokumentation werden als interaktive, bearbeitbare Diagramme direkt im Browser gerendert. Die PNG-Bildlinks oben zeigen statische Vorschauen der Beispiel-Diagramme; für vollständige Interaktivität einschließlich Echtzeit-Editierung, Syntax-Validierung und Export in PNG/SVG besuchen Sie die jeweilige Artikel-URL direkt unter vpascode.com/docs. [[54]]

VPasCode-Editor-Funktionen: Jeder Artikel enthält die Schaltfläche „PlantUML in VPasCode bearbeiten“, die das Codebeispiel im kostenlosen, browserbasierten Editor von VPasCode startet – keine Anmeldung oder Installation erforderlich. Änderungen werden sofort mit Echtzeit-Rendering angezeigt. [[54]]

Quelle: Zusammenstellung aus der VPASCode-Dokumentation. VPasCode ist ein kostenloses, online verfügbares, browserbasiertes Editor-Tool für PlantUML-, Mermaid- und Graphviz-Diagramme, das keine Anmeldung oder Installation erfordert. [[54]]

Kommentar hinterlassen