
2. Standard-Unified-Modeling-Language-(UML)-Diagramme
Im Kern wurde PlantUML entwickelt, um die Erstellung offizieller UML-Diagramme zu vereinfachen. Es teilt sich in zwei Hauptkategorien: strukturelle und Verhaltensdiagramme.
Strukturdigramme
Klassen- und Objektdiagramme
Modellieren Sie objektorientierte Strukturen, Klassenhierarchien, Schnittstellen, Attribute und Beziehungen (Vererbung, Aggregation, Komposition) direkt aus Code-Definitionen.

@startuml
title Hotel-Management-System
' Schnittstellen definieren
interface IReservable {
+ makeReservation(kunde: Customer, daten: DateRange): boolean
+ cancelReservation(reservierungsId: String): boolean
+ checkAvailability(datum: Date): boolean
}
interface IPayable {
+ processPayment(betrag: double): boolean
+ issueRefund(reservierungsId: String): boolean
+ getPaymentStatus(): String
}
' Abstrakte Klasse definieren
abstract class Person {
- id: String
- name: String
- email: String
- phone: String
+ getId(): String
+ getName(): String
+ getContactInfo(): String
+ updateContactInfo(info: String): void
}
' Konkrete Klassen definieren
class Customer {
- loyaltyPoints: int
- totalStays: int
- preferences: List
+ earnLoyaltyPoints(aufenthaltKosten: double): void
+ redeemLoyaltyPoints(punkte: int): boolean
+ getLoyaltyTier(): String
+ addPreference(praferenz: String): void
}
class Room {
- roomNumber: String
- roomType: RoomType
- capacity: int
- pricePerNight: double
- amenities: List
- isAvailable: boolean
+ bookRoom(kunde: Customer, daten: DateRange): boolean
+ releaseRoom(): void
+ getPrice(kunde: Customer): double
+ addAmenity(anlage: String): void
+ getRoomStatus(): String
}
class Reservation {
- reservationId: String
- checkInDate: Date
- checkOutDate: Date
- totalPrice: double
- status: ReservationStatus
- specialRequests: String
+ calculateTotalPrice(): double
+ confirmReservation(): void
+ checkIn(): void
+ checkOut(): boolean
+ updateDates(newCheckIn: Date, newCheckOut: Date): boolean
+ getDuration(): int
}
' Aufzählung
enum RoomType {
STANDARD
DELUXE
SUITE
PRESIDENTIAL
}
' Aufzählung
enum ReservationStatus {
PENDING
CONFIRMED
CHECKED_IN
CHECKED_OUT
CANCELLED
}
' Beziehungen
' Schnittstellenimplementierung (gestrichelte Linie mit Dreieck)
IReservable <|.. Reservation : implementiert
IPayable <|.. Reservation : implementiert
' Abstrakte Vererbung (volle Linie mit Dreieck)
Person <|-- Customer : erweitert
' Zusammensetzung (volles Diamant) – Room ist Teil von Reservation
Reservation *-- "1..*" Room : enthält >
' Assoziation (einfache volle Linie) mit Vielzahl
Customer "1" -- "0..*" Reservation : erstellt >
' Abhängigkeit (gestrichelte Pfeil) – Customer hängt von RoomType ab
Customer ..> RoomType : hat Loyalitätsebene basierend auf >
' Assoziation mit benutzerdefiniertem Label
Reservation "1" --o "1" Customer : gebucht von >
' Realisierung der Schnittstelle durch abstrakte Klasse (optionaler zusätzlicher Verbindungslinie)
IReservable <|.. Room : implementiert
@enduml Komponenten- und Bereitstellungsdiagramme
Karten Sie Softwarekomponenten, physische Knoten, Artefakte und Bereitstellungsumgebungen ab, um die Verteilung von Software über Hardware- oder Cloud-Infrastruktur zu visualisieren.
@startuml
title Komponentendiagramm der Webanwendung
package "Client-Ebene" {
[Web-Browser] als Browser
[Mobile-App] als Mobile
}
package "Anwendungsserver" {
[API-Gateway] als Gateway
[Benutzerdienst] als UserService
[Bestellungs-Dienst] als OrderService
[Zahlungs-Dienst] als PaymentService
}
package "Datenbank-Ebene" {
database "Benutzerdatenbank" als UserDB
database "Bestelldatenbank" als OrderDB
}
package "Drittanbieter-Dienste" {
[Stripe-API] als Stripe
}
' Verbindungen
Browser --> Gateway : HTTP / REST
Mobile --> Gateway : HTTP / REST
Gateway --> UserService : Internes REST
Gateway --> OrderService : Internes REST
UserService --> UserDB : Lesen / Schreiben
OrderService --> OrderDB : Lesen / Schreiben
OrderService --> PaymentService : Zahlung verarbeiten
PaymentService --> Stripe : HTTPS / API
@enduml 
@startuml
title Bereitstellungsdiagramm – 3-Schichten-Webanwendung
skinparam componentStyle rechteck
node "Client-Desktop" als clientNode {
node "Web-Browser" als browser {
artifact "Web-App-Frontend (HTML/JS)" als frontend
}
}
node "Anwendungsserver" als appServerNode {
node "Servlet-Container (Tomcat)" als tomcat {
artifact "Backend-API (WAR-Datei)" als appApi
}
}
node "Datenbank-Server" als databaseNode {
database "PostgreSQL" als postgres {
artifact "Anwendungsdatenbank-Schema" als dbSchema
}
}
clientNode -- appServerNode : HTTPS (Port 443)
appServerNode -- databaseNode : JDBC (Port 5432)
@enduml 
Verhaltens- und Interaktionsdiagramme
Sequenzdiagramme
Der beliebteste PlantUML-Diagrammtyp. Verfolgen Sie schrittweise Interaktionen, synchrone/asynchrone API-Aufrufe und Nachrichtenflüsse zwischen Akteuren und Systemen über die Zeit.
@startuml
title Benutzer-Authentifizierungsablauf
actor "Benutzer" als user
beteiligter "Web-App" als app
beteiligter "Auth-API" als auth
datenbank "Benutzer-DB" als db
user -> app : Anmeldeinformationen eingeben
aktiviere app
app -> auth : POST /api/v1/login
aktiviere auth
auth -> db : Benutzer per E-Mail abfragen
aktiviere db
db --> auth : Benutzerdatensatz & Hash zurückgeben
deaktiviere db
alternativ Gültige Anmeldeinformationen
auth -> auth : Passwort überprüfen & JWT generieren
auth --> app : 200 OK (Token & Profil)
app --> user : Weiterleitung zur Dashboard-Seite
anderenfalls Ungültige Anmeldeinformationen
auth --> app : 401 Unzulässig (Fehler)
app --> user : "Ungültige Anmeldeinformationen" anzeigen
ende
deaktiviere auth
deaktiviere app
@enduml 
Use-Case-Diagramme
Definieren Sie Systemgrenzen, Akteure, Benutzerziele und funktionalen Umfang.
@startuml
title Online-Einkaufssystem - Use-Case-Diagramm
von links nach rechts ausgerichtet
actor Kunde
actor "Registrierter Kunde" als RegKunde
actor "Zahlungsgateway" als Zahlungssystem
Kunde <|-- RegKunde rechteck "E-Commerce-System" { usecase "Produkte durchstöbern" als UC_Durchstöbern usecase "Artikel suchen" als UC_Suchen usecase "Warenkorb verwalten" als UC_Warenkorb usecase "Bestellung abschließen" als UC_Abschließen usecase "Rabatt-Gutschein anwenden" als UC_Gutschein usecase "Zahlung verarbeiten" als UC_Zahlung usecase "Bestellverlauf anzeigen" als UC_Verlauf } Kunde --> UC_Durchstöbern
Kunde --> UC_Suchen
Kunde --> UC_Warenkorb
Kunde --> UC_Abschließen
RegKunde --> UC_Verlauf
UC_Abschließen .> UC_Zahlung : <>
UC_Abschließen <.. UC_Gutschein : <>
UC_Zahlung -- Zahlungssystem
@enduml 
Aktivitäts- und Zustandsdiagramme
Flussdiagramme für komplexe Geschäftslogik, algorithmische Abläufe, Zustandsmaschinenübergänge und Konkurrenz.
@startuml
title Auftragsabwicklung
|Kunde|
start
:Auftrag platzieren;
:Zahlungsdetails übermitteln;
|Bestell-System|
wenn (Zahlung gültig?) dann (ja)
:Lagerbestand reservieren;
' Konkurrenzspaltung
fork
|Lager|
:Artikel von Regal nehmen;
:Artikel in Box verpacken;
fork wiederholen
|Abrechnung|
:Rechnungs-PDF generieren;
:Zahlungsmethode belasten;
end fork
|Versand|
:Versandetikett anbringen;
:An Kurier übergeben;
|Kunde|
:Paket erhalten;
stop
sonst (nein)
|Bestell-System|
:Benachrichtigung über Zahlungsfehler senden;
|Kunde|
:Zahlungsmethode aktualisieren;
stop
endif
@enduml 
@startuml
title Lebenszyklus eines E-Commerce-Auftrags
[*] --> Pending : Auftrag platziert
zustand Pending {
[*] --> AufWartendeZahlung
AufWartendeZahlung --> Zahlungsfehler : Zahlungsfehler
Zahlungsfehler --> AufWartendeZahlung : Zahlung erneut versuchen
}
Pending --> Verarbeitung : Zahlung autorisiert
Pending --> Storniert : Benutzer storniert Auftrag
zustand Verarbeitung {
[*] --> Verpacken
Verpacken --> Versandbereit : Qualitätsprüfung bestanden
}
Verarbeitung --> Versandt : Übergabe an Spediteur
Versandt --> Geliefert : Lieferung bestätigt
Versandt --> Zurückgesendet : Lieferung fehlgeschlagen / abgelehnt
Geliefert --> [*]
Storniert --> [*]
Zurückgesendet --> [*]
@enduml 
Zeitdiagramme
Detaillierte Darstellung präziser Zustandsübergänge und Objektinteraktionen über diskrete Zeitintervalle – ideal für eingebettete Systeme oder Echtzeit-Hardware-Entwicklung.
@startuml
title SPI-Datenübertragungs-Zeitdiagramm
robust "Takt (SCLK)" als CLK
binär "Chip Select (CS)" als CS
binär "Master Out (MOSI)" als MOSI
präzise "Datenbus (MISO)" als MISO
@0
CS ist Hoch
CLK ist Niedrig
MOSI ist Niedrig
MISO ist "ruhend"
@1
CS ist Niedrig
MISO ist "Kopfzeile"
@2
CLK ist Hoch
MOSI ist Hoch
@3
CLK ist Niedrig
@4
CLK ist Hoch
MOSI ist Niedrig
MISO ist "Dateninhalt"
@5
CLK ist Niedrig
@6
CS ist Hoch
CLK ist Niedrig
MOSI ist Niedrig
MISO ist "ruhend"
@enduml 
3. Hoch-Level-Architektur- und domänenspezifische Diagramme
Über traditionelle UML hinaus überzeugt PlantUML bei der Darstellung mehrschichtiger Software-Systeme und Datenarchitekturen mithilfe spezialisierter Erweiterungsbibliotheken.
C4-Modell-Diagramme
Drücken Sie die Softwarearchitektur auf unterschiedlichen Abstraktionsstufen aus – Kontext, Container, Komponente und Code – sodass das Systemdesign für technische und nicht-technische Stakeholder verständlich wird.
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
TITLE Systemkontext-Diagramm für das Internet-Banking-System
Person(kunde, "Privatkundenkunde", "Ein Kunde der Bank mit privaten Bankkonten.")
System(banking_system, "Internet-Banking-System", "Ermöglicht Kunden, Informationen zu ihren Bankkonten einzusehen und Zahlungen vorzunehmen.")
System_Ext(hauptrechner, "Hauptrechner-Banking-System", "Speichert alle zentralen Bankinformationen über Kunden, Konten, Transaktionen usw.")
System_Ext(email_system, "E-Mail-System", "Das interne Microsoft Exchange-E-Mail-System.")
Rel(kunde, banking_system, "Sieht Kontostände an und führt Zahlungen über")
Rel(banking_system, hauptrechner, "Holt Kontoinformationen ab und führt Zahlungen über")
Rel(banking_system, email_system, "Versendet E-Mail über")
Rel_Back(email_system, kunde, "Versendet E-Mails an")
@enduml 
ArchiMate-Diagramme
Unterstützung der Modellierung von Unternehmensarchitekturen über Geschäfts-, Anwendungs- und Technologiestufen hinweg, um strategische Organisationsziele mit operativen Systemen zu verknüpfen.
@startuml
!include <archimate/Archimate>
title ArchiMate-Beispiel – Online-Rechnungsbezahlung
Grouping(geschäft, "Geschäfts-Ebene"){
Business_Process(zahlRechnungProzess, "Zahlungsprozess für Rechnung")
Business_Object(kundenKonto, "Kundenbankkonto")
Business_Service(zahlungsService, "Rechnungsbezahlungsservice")
}
Grouping(anwendung, "Anwendungs-Ebene"){
Application_Component(bankingApp, "Mobile-Banking-Anwendung")
Application_Function(zahlungsVerarbeitung, "Logik zur Zahlungsverarbeitung")
Application_DataObject(transaktionsAuftrag, "Datenpaket der Transaktion")
}
Grouping(technologie, "Technologie-Ebene"){
Technology_Artifact(jwtToken, "Verschlüsselter Sitzungstoken")
Technology_Service(apiGateway, "API-Gateway-Dienst")
Technology_Service(dbService, "Kern-Datenbankdienst")
}
Rel_Flow_Right(zahlRechnungProzess, kundenKonto, "")
Rel_Serving_Up(zahlungsService, zahlRechnungProzess, "")
Rel_Specialization_Up(zahlungsVerarbeitung, zahlungsService, "")
Rel_Flow_Right(transaktionsAuftrag, zahlungsVerarbeitung, "")
Rel_Assignment_Left(bankingApp, zahlungsVerarbeitung, "")
Rel_Realization_Up(jwtToken, transaktionsAuftrag, "")
Rel_Serving_Up(apiGateway, zahlungsVerarbeitung, "")
Rel_Serving_Up(dbService, apiGateway, "")
@enduml 
Entitäts-Beziehungs-Diagramme (ERD)
Erzeugen Sie saubere Visualisierungen von Datenbank-Schemata, einschließlich der Standard-Crow’s-Foot-Notation und Chen-ERD-Modelle.
@startuml
title E-Commerce-Datenbank-Schema (Crow's Foot)
' Verstecke Kreis-Symbole für Entitäten
hide circle
skinparam linetype ortho
entity "Benutzer" as user {
* user_id : INT <>
--
* email : VARCHAR(255)
* password_hash : VARCHAR(255)
* created_at : TIMESTAMP
}
entity "Kundenprofil" as profile {
* profile_id : INT <>
--
* user_id : INT <>
* first_name : VARCHAR(100)
* last_name : VARCHAR(100)
phone : VARCHAR(20)
}
entity "Bestellung" as order {
* order_id : INT <>
--
* user_id : INT <>
* order_date : TIMESTAMP
* total_amount : DECIMAL(10,2)
* status : VARCHAR(50)
}
entity "Bestellposition" as item {
* order_item_id : INT <>
--
* order_id : INT <>
* product_id : INT <>
* quantity : INT
* unit_price : DECIMAL(10,2)
}
entity "Produkt" as product {
* product_id : INT <>
--
* sku : VARCHAR(50)
* name : VARCHAR(150)
description : TEXT
* price : DECIMAL(10,2)
}
' Beziehungen
user ||--o| profile : "hat"
user ||--o{ order : "stellt auf"
order ||--|{ item : "enthält"
product ||--o{ item : "erscheint in"
@enduml 
Netzwerk- und Infrastruktur-Karten
Darstellung von Netztopologien, Server-Knoten, Cloud-Verbindungen und Firewalls problemlos.
@startnwdiag
title Unternehmens-Netztopologie
nwdiag {
network Externe_Internet {
address = "0.0.0.0/0"
user_client [address = "203.0.113.15", description = "Remote-Benutzer"];
edge_firewall [address = "192.168.1.1", description = "Perimeter-FW"];
}
network DMZ_Zone {
address = "192.168.1.0/24"
edge_firewall;
load_balancer [address = "192.168.1.10", description = "Nginx-Lastverteiler"];
mail_server [address = "192.168.1.25", description = "SMTP-Server"];
internal_firewall [address = "192.168.1.254", description = "Internes FW"];
}
network Private_LAN {
address = "10.0.1.0/24"
internal_firewall;
app_server_01 [address = "10.0.1.50", description = "API-Knoten 1"];
app_server_02 [address = "10.0.1.51", description = "API-Knoten 2"];
db_master [address = "10.0.1.100", description = "PostgreSQL-Primär"];
}
network Management_Subnet {
address = "10.0.99.0/24"
internal_firewall;
admin_bastion [address = "10.0.99.5", description = "SSH-Bastion-Host"];
monitoring_node [address = "10.0.99.20", description = "Prometheus-Host"];
}
}
@endnwdiag 
4. Planungs-, Management- und Brainstorming-Visualisierungen
PlantUML ist nicht auf die Softwaregestaltung beschränkt – es ist auch ein leistungsstarkes Werkzeug für Projektmanagement und Team-Brainstorming.
Gantt-Diagramme
Planen Sie Projekttermine, Aufgabenabhängigkeiten, Meilensteine und Ressourcenallokation mit sauberer Text-Markup.
gantt
title Zeitplan für die Freigabe der Softwareprodukte
dateFormat YYYY-MM-DD
axisFormat %b %d
Abschnitt Planung & Design
Anforderungserhebung :a1, 2026-09-01, 10d
Architekturdesign :a2, nach a1, 10d
Abschnitt Entwicklung
Backend-API-Entwicklung :b1, nach a2, 15d
Frontend-UI-Entwicklung :b2, nach a2, 15d
Abschnitt Testen & Freigabe
Integrationstest :c1, nach b1 b2, 8d
Sicherheitsprüfung :c2, nach c1, 5d
Produktionsfreigabe :Meilenstein, m1, nach c2, 0d 
Arbeitsaufteilungsstruktur (WBS)
Komplexe Projekte in hierarchische Lieferungen und überschaubare Aufgabenblöcke zerlegen.
@startwbs
title Website-Neugestaltung WBS
* Website-Neugestaltung Projekt
** 1. Entdeckung & Strategie
*** 1.1 Stakeholder-Interviews
*** 1.2 Wettbewerbsanalyse
*** 1.3 Umfang & Strategie-Abnahme
** 2. UX/UI-Design
*** 2.1 Wireframing
**** 2.1.1 Desktop-Layouts
**** 2.1.2 Mobile-Layouts
*** 2.2 Design-System
**** 2.2.1 Komponentenbibliothek
**** 2.2.2 Typografie & Stilrichtlinien
** 3. Technische Entwicklung
*** 3.1 Frontend
**** 3.1.1 Seitenvorlagen
**** 3.1.2 API-Integrationen
*** 3.2 CMS & Backend
**** 3.2.1 Benutzerdefinierte Beitragsarten
**** 3.2.2 Datenbankmigration
** 4. QA & Launch
*** 4.1 Cross-Browser-Tests
*** 4.2 Inhaltsmigration
*** 4.3 DNS-Umstellung & Live-Schaltung
@endwbs 
Mind Maps
Strukturierte Ideen, Feature-Taxonomien und technische Erkundungsnotizen schnell während Team-Sitzungen erfassen.
@startmindmap
title Feature-Map für E-Commerce-Plattform
* E-Commerce-Plattform
** Benutzerkontoverwaltung
*** Soziale Authentifizierung (Google, Apple)
*** Mehrfaktor-Authentifizierung
*** Bestellverlauf & Verfolgung
** Produktkatalog & Suche
*** Facettierte Suche & Filter
*** Inventar-Synchronisierung
*** Produktbewertungen & -bewertungen
** Kasse & Zahlungen
*** Zahlungsgateways (Stripe, PayPal)
*** Gutschein- & Promo-Engine
*** Ein-Klick-Gast-Kasse
** Kundensupport
*** Live-Chat-Assistent
*** Automatisiertes Rückgabeportal
@endmindmap 
5. Schnelles Schreiben und Rendern von PlantUML: Der Vorteil von VPasCode
Während PlantUML äußerst leistungsfähig ist, kann die Einrichtung lokaler Java-Umgebungen, Graphviz-Abhängigkeiten und Befehlszeilentools zu Schwierigkeiten führen. Die Verwendung eines spezialisierten, webbasierten PlantUML-Tool beseitigt diese Hürden vollständig.
Visual Paradigm VPasCode ist eine integrierte Diagramm-as-Code-Plattform, die speziell dafür entwickelt wurde, Text-zu-Diagramm-Workflows zu optimieren.
Wichtige Vorteile von VPasCode:
- Plattform ohne Einrichtung: Greifen Sie sofort auf einen leistungsstarken Editor zu unter vpascode.com ohne lokale Compiler oder Plugins installieren zu müssen. Erfahren Sie mehr im VPasCode-Übersicht.
- Automatische Format-Erkennung & Echtzeit-Vorschau: Fügen Sie Ihren Skript ein, und VPasCode erkennt automatisch, ob es sich um PlantUML, Mermaid oder Graphviz handelt, und rendert Echtzeit-Updates sofort, während Sie tippen.
- KI-gestütztes Fehlerbeheben im Code: Wenn Sie einen Syntaxfehler auftreten, klicken Sie einfach „Beheben durch KI“. VPasCode repariert den Code und bietet einen Seiten-zu-Seiten-Vergleich mit klaren Erklärungen, damit Sie die PlantUML-Syntax schneller beherrschen können.
- Native KI-Diagrammübersetzung: Übersetzen Sie Diagrammbezeichnungen und Notizen direkt im Editor in mehrere Sprachen – ideal für globale Entwicklerteams.
- Flexible Export- und Dokumentationsintegration: Exportieren Sie hochauflösende PNGs oder skalierbare SVG-Vektorbilder kostenlos. Sie können Diagramme auch direkt in Visual Paradigm OpenDocs über deren Feature-Leitfaden für Diagramm-as-Code.
6. Schnellstart-Beispiel: Darstellung eines Sequenzdiagramms in VPasCode
Um zu sehen, wie einfach es ist, einen kostenlosen UML-Editorwie VPasCode zu verwenden ist, betrachten Sie dieses grundlegende PlantUML-Sequenzdiagrammskript:
@startuml
autonumber
aktor Benutzer
teilnehmer "VPasCode-Editor" als Editor
teilnehmer "KI-Engine" als KI
Benutzer -> Editor: PlantUML-Code einfügen
Editor -> Editor: Format automatisch erkennen & Echtzeit-Rendering
alternativ Syntaxfehler erkannt
Benutzer -> Editor: Klicken Sie auf "Beheben durch KI"
Editor -> KI: Gebrochenen Code senden
KI --> Editor: Korrigierten Code und Unterschied zurückgeben
ende
Editor --> Benutzer: Anzeige eines sauberen Vektor-Diagramms (SVG/PNG)
@enduml 
Kopieren Sie einfach den obigen Code, öffnen Sie VPasCode, und fügen Sie ihn in den Editor ein, um sofortige Echtzeit-Rendering zu sehen und mit automatisierten KI-Verbesserungen zu experimentieren.
7. Fazit und nächste Schritte
PlantUML ermöglicht es Teams, klare, versionierbare und konsistente visuelle Dokumentationen über UML, Architektur, Datenbank-Schemata und Projektmanagement-Diagramme hinweg zu pflegen. In Kombination mit einem modernen PlantUML-Toolwie VPasCode wird die technische Dokumentation schneller, fehlerfrei und nahtlos kooperativ.
Bereit, Ihren Diagramm-Workflow zu optimieren? Beginnen Sie heute kostenlos mit der Bearbeitung und Darstellung von PlantUML-Diagrammen auf vpascode.com.



