{"id":1922,"date":"2026-08-03T07:51:11","date_gmt":"2026-08-03T07:51:11","guid":{"rendered":"https:\/\/www.vpascode.com\/de\/what-types-of-diagrams-can-you-create-with-plantuml-complete-guide-2\/"},"modified":"2026-08-03T07:51:11","modified_gmt":"2026-08-03T07:51:11","slug":"what-types-of-diagrams-can-you-create-with-plantuml-complete-guide-2","status":"publish","type":"post","link":"https:\/\/www.vpascode.com\/de\/what-types-of-diagrams-can-you-create-with-plantuml-complete-guide-2\/","title":{"rendered":"Welche Arten von Diagrammen k\u00f6nnen Sie mit PlantUML erstellen? (Komplette Anleitung)"},"content":{"rendered":"

\"Hero<\/p>\n

\n
In der modernen Softwareentwicklung und Systemarchitektur bleiben traditionelle Drag-and-Drop-Diagramm-Tools oft hinter den Erwartungen zur\u00fcck. Sie k\u00f6nnen langsam zum Aktualisieren sein, schwer in Versionskontrollsystemen wie Git zu pflegen und anf\u00e4llig f\u00fcr inkonsistente Stile. Genau hier kommt Diagramm-as-Code (DaC)<\/strong> ins Spiel, und PlantUML<\/strong> gilt als eine der vielseitigsten und am weitesten verbreiteten textbasierten Diagrammsprachen in der Entwicklerwelt. Durch die Definition von Visualisierungen mit reinem Text k\u00f6nnen Entwickler architektonische Dokumentation direkt neben ihrem Quellcode halten. Aber welche Arten von Diagrammen k\u00f6nnen Sie tats\u00e4chlich damit erstellen? Ob Sie standardm\u00e4\u00dfige strukturelle Karten der Unified Modeling Language (UML), hochrangige Ansichten der Unternehmensarchitektur oder Projektmanagement-Zeitlinien ben\u00f6tigen \u2013 PlantUML deckt praktisch jedes technische Kommunikationsbed\u00fcrfnis ab. In dieser Anleitung werden wir die umfassende Palette an Diagrammtypen untersuchen, die von PlantUML unterst\u00fctzt werden, und zeigen, wie die Verwendung eines intuitiven PlantUML-Editor<\/strong> wie VPasCode<\/a> Ihre Darstellungs- und Bearbeitungserfahrung verbessert.<\/section>\n
\n

2. Standard-Unified-Modeling-Language-(UML)-Diagramme<\/h2>\n

Im Kern wurde PlantUML entwickelt, um die Erstellung offizieller UML-Diagramme zu vereinfachen. Es teilt sich in zwei Hauptkategorien: strukturelle und Verhaltensdiagramme.<\/p>\n

Strukturdigramme<\/h3>\n

Klassen- und Objektdiagramme<\/h4>\n

Modellieren Sie objektorientierte Strukturen, Klassenhierarchien, Schnittstellen, Attribute und Beziehungen (Vererbung, Aggregation, Komposition) direkt aus Code-Definitionen.<\/p>\n

\"Main<\/p>\n

\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Plantuml<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Plantuml in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
@startuml\r\n  \r\ntitle Hotel-Management-System\r\n\r\n' Schnittstellen definieren\r\ninterface IReservable {\r\n    + makeReservation(kunde: Customer, daten: DateRange): boolean\r\n    + cancelReservation(reservierungsId: String): boolean\r\n    + checkAvailability(datum: Date): boolean\r\n}\r\n\r\ninterface IPayable {\r\n    + processPayment(betrag: double): boolean\r\n    + issueRefund(reservierungsId: String): boolean\r\n    + getPaymentStatus(): String\r\n}\r\n\r\n' Abstrakte Klasse definieren\r\nabstract class Person {\r\n    - id: String\r\n    - name: String\r\n    - email: String\r\n    - phone: String\r\n    + getId(): String\r\n    + getName(): String\r\n    + getContactInfo(): String\r\n    + updateContactInfo(info: String): void\r\n}\r\n\r\n' Konkrete Klassen definieren\r\nclass Customer {\r\n    - loyaltyPoints: int\r\n    - totalStays: int\r\n    - preferences: List\r\n    + earnLoyaltyPoints(aufenthaltKosten: double): void\r\n    + redeemLoyaltyPoints(punkte: int): boolean\r\n    + getLoyaltyTier(): String\r\n    + addPreference(praferenz: String): void\r\n}\r\n\r\nclass Room {\r\n    - roomNumber: String\r\n    - roomType: RoomType\r\n    - capacity: int\r\n    - pricePerNight: double\r\n    - amenities: List\r\n    - isAvailable: boolean\r\n    + bookRoom(kunde: Customer, daten: DateRange): boolean\r\n    + releaseRoom(): void\r\n    + getPrice(kunde: Customer): double\r\n    + addAmenity(anlage: String): void\r\n    + getRoomStatus(): String\r\n}\r\n\r\nclass Reservation {\r\n    - reservationId: String\r\n    - checkInDate: Date\r\n    - checkOutDate: Date\r\n    - totalPrice: double\r\n    - status: ReservationStatus\r\n    - specialRequests: String\r\n    + calculateTotalPrice(): double\r\n    + confirmReservation(): void\r\n    + checkIn(): void\r\n    + checkOut(): boolean\r\n    + updateDates(newCheckIn: Date, newCheckOut: Date): boolean\r\n    + getDuration(): int\r\n}\r\n\r\n' Aufz\u00e4hlung\r\nenum RoomType {\r\n    STANDARD\r\n    DELUXE\r\n    SUITE\r\n    PRESIDENTIAL\r\n}\r\n\r\n' Aufz\u00e4hlung\r\nenum ReservationStatus {\r\n    PENDING\r\n    CONFIRMED\r\n    CHECKED_IN\r\n    CHECKED_OUT\r\n    CANCELLED\r\n}\r\n\r\n' Beziehungen\r\n' Schnittstellenimplementierung (gestrichelte Linie mit Dreieck)\r\nIReservable <|.. Reservation : implementiert\r\nIPayable <|.. Reservation : implementiert\r\n\r\n' Abstrakte Vererbung (volle Linie mit Dreieck)\r\nPerson <|-- Customer : erweitert\r\n\r\n' Zusammensetzung (volles Diamant) \u2013 Room ist Teil von Reservation\r\nReservation *-- \"1..*\" Room : enth\u00e4lt >\r\n\r\n' Assoziation (einfache volle Linie) mit Vielzahl\r\nCustomer \"1\" -- \"0..*\" Reservation : erstellt >\r\n\r\n' Abh\u00e4ngigkeit (gestrichelte Pfeil) \u2013 Customer h\u00e4ngt von RoomType ab\r\nCustomer ..> RoomType : hat Loyalit\u00e4tsebene basierend auf >\r\n\r\n' Assoziation mit benutzerdefiniertem Label\r\nReservation \"1\" --o \"1\" Customer : gebucht von >\r\n\r\n' Realisierung der Schnittstelle durch abstrakte Klasse (optionaler zus\u00e4tzlicher Verbindungslinie)\r\nIReservable <|.. Room : implementiert\r\n\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Komponenten- und Bereitstellungsdiagramme<\/h4>\n
Karten Sie Softwarekomponenten, physische Knoten, Artefakte und Bereitstellungsumgebungen ab, um die Verteilung von Software \u00fcber Hardware- oder Cloud-Infrastruktur zu visualisieren.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitle Komponentendiagramm der Webanwendung\r\n\r\npackage \"Client-Ebene\" {\r\n    [Web-Browser] als Browser\r\n    [Mobile-App] als Mobile\r\n}\r\n\r\npackage \"Anwendungsserver\" {\r\n    [API-Gateway] als Gateway\r\n    [Benutzerdienst] als UserService\r\n    [Bestellungs-Dienst] als OrderService\r\n    [Zahlungs-Dienst] als PaymentService\r\n}\r\n\r\npackage \"Datenbank-Ebene\" {\r\n    database \"Benutzerdatenbank\" als UserDB\r\n    database \"Bestelldatenbank\" als OrderDB\r\n}\r\n\r\npackage \"Drittanbieter-Dienste\" {\r\n    [Stripe-API] als Stripe\r\n}\r\n\r\n' Verbindungen\r\nBrowser --> Gateway : HTTP \/ REST\r\nMobile --> Gateway : HTTP \/ REST\r\n\r\nGateway --> UserService : Internes REST\r\nGateway --> OrderService : Internes REST\r\n\r\nUserService --> UserDB : Lesen \/ Schreiben\r\nOrderService --> OrderDB : Lesen \/ Schreiben\r\nOrderService --> PaymentService : Zahlung verarbeiten\r\n\r\nPaymentService --> Stripe : HTTPS \/ API\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Component<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitle Bereitstellungsdiagramm \u2013 3-Schichten-Webanwendung\r\n\r\nskinparam componentStyle rechteck\r\n\r\nnode \"Client-Desktop\" als clientNode {\r\n  node \"Web-Browser\" als browser {\r\n    artifact \"Web-App-Frontend (HTML\/JS)\" als frontend\r\n  }\r\n}\r\n\r\nnode \"Anwendungsserver\" als appServerNode {\r\n  node \"Servlet-Container (Tomcat)\" als tomcat {\r\n    artifact \"Backend-API (WAR-Datei)\" als appApi\r\n  }\r\n}\r\n\r\nnode \"Datenbank-Server\" als databaseNode {\r\n  database \"PostgreSQL\" als postgres {\r\n    artifact \"Anwendungsdatenbank-Schema\" als dbSchema\r\n  }\r\n}\r\n\r\nclientNode -- appServerNode : HTTPS (Port 443)\r\nappServerNode -- databaseNode : JDBC (Port 5432)\r\n\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Deployment<\/p>\n
Verhaltens- und Interaktionsdiagramme<\/h3>\n
Sequenzdiagramme<\/h4>\n
Der beliebteste PlantUML-Diagrammtyp. Verfolgen Sie schrittweise Interaktionen, synchrone\/asynchrone API-Aufrufe und Nachrichtenfl\u00fcsse zwischen Akteuren und Systemen \u00fcber die Zeit.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitle Benutzer-Authentifizierungsablauf\r\n\r\nactor \"Benutzer\" als user\r\nbeteiligter \"Web-App\" als app\r\nbeteiligter \"Auth-API\" als auth\r\ndatenbank \"Benutzer-DB\" als db\r\n\r\nuser -> app : Anmeldeinformationen eingeben\r\naktiviere app\r\n\r\napp -> auth : POST \/api\/v1\/login\r\naktiviere auth\r\n\r\nauth -> db : Benutzer per E-Mail abfragen\r\naktiviere db\r\ndb --> auth : Benutzerdatensatz & Hash zur\u00fcckgeben\r\ndeaktiviere db\r\n\r\nalternativ G\u00fcltige Anmeldeinformationen\r\n    auth -> auth : Passwort \u00fcberpr\u00fcfen & JWT generieren\r\n    auth --> app : 200 OK (Token & Profil)\r\n    app --> user : Weiterleitung zur Dashboard-Seite\r\nanderenfalls Ung\u00fcltige Anmeldeinformationen\r\n    auth --> app : 401 Unzul\u00e4ssig (Fehler)\r\n    app --> user : \"Ung\u00fcltige Anmeldeinformationen\" anzeigen\r\nende\r\n\r\ndeaktiviere auth\r\ndeaktiviere app\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Sequence<\/p>\n
Use-Case-Diagramme<\/h4>\n
Definieren Sie Systemgrenzen, Akteure, Benutzerziele und funktionalen Umfang.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitle Online-Einkaufssystem - Use-Case-Diagramm\r\n\r\nvon links nach rechts ausgerichtet\r\n\r\nactor Kunde\r\nactor \"Registrierter Kunde\" als RegKunde\r\nactor \"Zahlungsgateway\" als Zahlungssystem\r\n\r\nKunde <|-- RegKunde rechteck \"E-Commerce-System\" { usecase \"Produkte durchst\u00f6bern\" als UC_Durchst\u00f6bern usecase \"Artikel suchen\" als UC_Suchen usecase \"Warenkorb verwalten\" als UC_Warenkorb usecase \"Bestellung abschlie\u00dfen\" als UC_Abschlie\u00dfen usecase \"Rabatt-Gutschein anwenden\" als UC_Gutschein usecase \"Zahlung verarbeiten\" als UC_Zahlung usecase \"Bestellverlauf anzeigen\" als UC_Verlauf } Kunde --> UC_Durchst\u00f6bern\r\nKunde --> UC_Suchen\r\nKunde --> UC_Warenkorb\r\nKunde --> UC_Abschlie\u00dfen\r\n\r\nRegKunde --> UC_Verlauf\r\n\r\nUC_Abschlie\u00dfen .> UC_Zahlung : <>\r\nUC_Abschlie\u00dfen <.. UC_Gutschein : <>\r\n\r\nUC_Zahlung -- Zahlungssystem\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Use<\/p>\n
Aktivit\u00e4ts- und Zustandsdiagramme<\/h4>\n
Flussdiagramme f\u00fcr komplexe Gesch\u00e4ftslogik, algorithmische Abl\u00e4ufe, Zustandsmaschinen\u00fcberg\u00e4nge und Konkurrenz.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitle Auftragsabwicklung\r\n\r\n|Kunde|\r\nstart\r\n:Auftrag platzieren;\r\n:Zahlungsdetails \u00fcbermitteln;\r\n\r\n|Bestell-System|\r\nwenn (Zahlung g\u00fcltig?) dann (ja)\r\n  :Lagerbestand reservieren;\r\n  \r\n  ' Konkurrenzspaltung\r\n  fork\r\n    |Lager|\r\n    :Artikel von Regal nehmen;\r\n    :Artikel in Box verpacken;\r\n  fork wiederholen\r\n    |Abrechnung|\r\n    :Rechnungs-PDF generieren;\r\n    :Zahlungsmethode belasten;\r\n  end fork\r\n\r\n  |Versand|\r\n  :Versandetikett anbringen;\r\n  :An Kurier \u00fcbergeben;\r\n  \r\n  |Kunde|\r\n  :Paket erhalten;\r\n  stop\r\nsonst (nein)\r\n  |Bestell-System|\r\n  :Benachrichtigung \u00fcber Zahlungsfehler senden;\r\n  |Kunde|\r\n  :Zahlungsmethode aktualisieren;\r\n  stop\r\nendif\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Activity<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitle Lebenszyklus eines E-Commerce-Auftrags\r\n\r\n[*] --> Pending : Auftrag platziert\r\n\r\nzustand Pending {\r\n  [*] --> AufWartendeZahlung\r\n  AufWartendeZahlung --> Zahlungsfehler : Zahlungsfehler\r\n  Zahlungsfehler --> AufWartendeZahlung : Zahlung erneut versuchen\r\n}\r\n\r\nPending --> Verarbeitung : Zahlung autorisiert\r\nPending --> Storniert : Benutzer storniert Auftrag\r\n\r\nzustand Verarbeitung {\r\n  [*] --> Verpacken\r\n  Verpacken --> Versandbereit : Qualit\u00e4tspr\u00fcfung bestanden\r\n}\r\n\r\nVerarbeitung --> Versandt : \u00dcbergabe an Spediteur\r\nVersandt --> Geliefert : Lieferung best\u00e4tigt\r\nVersandt --> Zur\u00fcckgesendet : Lieferung fehlgeschlagen \/ abgelehnt\r\n\r\nGeliefert --> [*]\r\nStorniert --> [*]\r\nZur\u00fcckgesendet --> [*]\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"State<\/p>\n
Zeitdiagramme<\/h4>\n
Detaillierte Darstellung pr\u00e4ziser Zustands\u00fcberg\u00e4nge und Objektinteraktionen \u00fcber diskrete Zeitintervalle \u2013 ideal f\u00fcr eingebettete Systeme oder Echtzeit-Hardware-Entwicklung.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitle SPI-Daten\u00fcbertragungs-Zeitdiagramm\r\n\r\nrobust \"Takt (SCLK)\" als CLK\r\nbin\u00e4r \"Chip Select (CS)\" als CS\r\nbin\u00e4r \"Master Out (MOSI)\" als MOSI\r\npr\u00e4zise \"Datenbus (MISO)\" als MISO\r\n\r\n@0\r\nCS ist Hoch\r\nCLK ist Niedrig\r\nMOSI ist Niedrig\r\nMISO ist \"ruhend\"\r\n\r\n@1\r\nCS ist Niedrig\r\nMISO ist \"Kopfzeile\"\r\n\r\n@2\r\nCLK ist Hoch\r\nMOSI ist Hoch\r\n\r\n@3\r\nCLK ist Niedrig\r\n\r\n@4\r\nCLK ist Hoch\r\nMOSI ist Niedrig\r\nMISO ist \"Dateninhalt\"\r\n\r\n@5\r\nCLK ist Niedrig\r\n\r\n@6\r\nCS ist Hoch\r\nCLK ist Niedrig\r\nMOSI ist Niedrig\r\nMISO ist \"ruhend\"\r\n\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Digital<\/p>\n<\/section>\n
\n
3. Hoch-Level-Architektur- und dom\u00e4nenspezifische Diagramme<\/h2>\n
\u00dcber traditionelle UML hinaus \u00fcberzeugt PlantUML bei der Darstellung mehrschichtiger Software-Systeme und Datenarchitekturen mithilfe spezialisierter Erweiterungsbibliotheken.<\/p>\n
C4-Modell-Diagramme<\/h4>\n
Dr\u00fccken Sie die Softwarearchitektur auf unterschiedlichen Abstraktionsstufen aus \u2013 Kontext, Container, Komponente und Code \u2013 sodass das Systemdesign f\u00fcr technische und nicht-technische Stakeholder verst\u00e4ndlich wird.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\n!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Context.puml\r\n\r\nTITLE Systemkontext-Diagramm f\u00fcr das Internet-Banking-System\r\n\r\nPerson(kunde, \"Privatkundenkunde\", \"Ein Kunde der Bank mit privaten Bankkonten.\")\r\nSystem(banking_system, \"Internet-Banking-System\", \"Erm\u00f6glicht Kunden, Informationen zu ihren Bankkonten einzusehen und Zahlungen vorzunehmen.\")\r\n\r\nSystem_Ext(hauptrechner, \"Hauptrechner-Banking-System\", \"Speichert alle zentralen Bankinformationen \u00fcber Kunden, Konten, Transaktionen usw.\")\r\nSystem_Ext(email_system, \"E-Mail-System\", \"Das interne Microsoft Exchange-E-Mail-System.\")\r\n\r\nRel(kunde, banking_system, \"Sieht Kontost\u00e4nde an und f\u00fchrt Zahlungen \u00fcber\")\r\nRel(banking_system, hauptrechner, \"Holt Kontoinformationen ab und f\u00fchrt Zahlungen \u00fcber\")\r\nRel(banking_system, email_system, \"Versendet E-Mail \u00fcber\")\r\nRel_Back(email_system, kunde, \"Versendet E-Mails an\")\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"C4<\/p>\n
ArchiMate-Diagramme<\/h4>\n
Unterst\u00fctzung der Modellierung von Unternehmensarchitekturen \u00fcber Gesch\u00e4fts-, Anwendungs- und Technologiestufen hinweg, um strategische Organisationsziele mit operativen Systemen zu verkn\u00fcpfen.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\n!include <archimate\/Archimate>\r\n\r\ntitle ArchiMate-Beispiel \u2013 Online-Rechnungsbezahlung\r\n\r\nGrouping(gesch\u00e4ft, \"Gesch\u00e4fts-Ebene\"){\r\n  Business_Process(zahlRechnungProzess, \"Zahlungsprozess f\u00fcr Rechnung\")\r\n  Business_Object(kundenKonto, \"Kundenbankkonto\")\r\n  Business_Service(zahlungsService, \"Rechnungsbezahlungsservice\")\r\n}\r\n\r\nGrouping(anwendung, \"Anwendungs-Ebene\"){\r\n  Application_Component(bankingApp, \"Mobile-Banking-Anwendung\")\r\n  Application_Function(zahlungsVerarbeitung, \"Logik zur Zahlungsverarbeitung\")\r\n  Application_DataObject(transaktionsAuftrag, \"Datenpaket der Transaktion\")\r\n}\r\n\r\nGrouping(technologie, \"Technologie-Ebene\"){\r\n  Technology_Artifact(jwtToken, \"Verschl\u00fcsselter Sitzungstoken\")\r\n  Technology_Service(apiGateway, \"API-Gateway-Dienst\")\r\n  Technology_Service(dbService, \"Kern-Datenbankdienst\")\r\n}\r\n\r\nRel_Flow_Right(zahlRechnungProzess, kundenKonto, \"\")\r\nRel_Serving_Up(zahlungsService, zahlRechnungProzess, \"\")\r\nRel_Specialization_Up(zahlungsVerarbeitung, zahlungsService, \"\")\r\nRel_Flow_Right(transaktionsAuftrag, zahlungsVerarbeitung, \"\")\r\nRel_Assignment_Left(bankingApp, zahlungsVerarbeitung, \"\")\r\nRel_Realization_Up(jwtToken, transaktionsAuftrag, \"\")\r\nRel_Serving_Up(apiGateway, zahlungsVerarbeitung, \"\")\r\nRel_Serving_Up(dbService, apiGateway, \"\")\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"ArchiMate<\/p>\n
Entit\u00e4ts-Beziehungs-Diagramme (ERD)<\/h4>\n
Erzeugen Sie saubere Visualisierungen von Datenbank-Schemata, einschlie\u00dflich der Standard-Crow\u2019s-Foot-Notation und Chen-ERD-Modelle.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitle E-Commerce-Datenbank-Schema (Crow's Foot)\r\n\r\n' Verstecke Kreis-Symbole f\u00fcr Entit\u00e4ten\r\nhide circle\r\nskinparam linetype ortho\r\n\r\nentity \"Benutzer\" as user {\r\n  * user_id : INT <>\r\n  --\r\n  * email : VARCHAR(255)\r\n  * password_hash : VARCHAR(255)\r\n  * created_at : TIMESTAMP\r\n}\r\n\r\nentity \"Kundenprofil\" as profile {\r\n  * profile_id : INT <>\r\n  --\r\n  * user_id : INT <>\r\n  * first_name : VARCHAR(100)\r\n  * last_name : VARCHAR(100)\r\n    phone : VARCHAR(20)\r\n}\r\n\r\nentity \"Bestellung\" as order {\r\n  * order_id : INT <>\r\n  --\r\n  * user_id : INT <>\r\n  * order_date : TIMESTAMP\r\n  * total_amount : DECIMAL(10,2)\r\n  * status : VARCHAR(50)\r\n}\r\n\r\nentity \"Bestellposition\" as item {\r\n  * order_item_id : INT <>\r\n  --\r\n  * order_id : INT <>\r\n  * product_id : INT <>\r\n  * quantity : INT\r\n  * unit_price : DECIMAL(10,2)\r\n}\r\n\r\nentity \"Produkt\" as product {\r\n  * product_id : INT <>\r\n  --\r\n  * sku : VARCHAR(50)\r\n  * name : VARCHAR(150)\r\n    description : TEXT\r\n  * price : DECIMAL(10,2)\r\n}\r\n\r\n' Beziehungen\r\nuser ||--o| profile : \"hat\"\r\nuser ||--o{ order : \"stellt auf\"\r\norder ||--|{ item : \"enth\u00e4lt\"\r\nproduct ||--o{ item : \"erscheint in\"\r\n\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Entity-relationship<\/p>\n
Netzwerk- und Infrastruktur-Karten<\/h4>\n
Darstellung von Netztopologien, Server-Knoten, Cloud-Verbindungen und Firewalls problemlos.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startnwdiag\r\ntitle Unternehmens-Netztopologie\r\n\r\nnwdiag {\r\n  network Externe_Internet {\r\n    address = \"0.0.0.0\/0\"\r\n    user_client [address = \"203.0.113.15\", description = \"Remote-Benutzer\"];\r\n    edge_firewall [address = \"192.168.1.1\", description = \"Perimeter-FW\"];\r\n  }\r\n\r\n  network DMZ_Zone {\r\n    address = \"192.168.1.0\/24\"\r\n    edge_firewall;\r\n    load_balancer [address = \"192.168.1.10\", description = \"Nginx-Lastverteiler\"];\r\n    mail_server [address = \"192.168.1.25\", description = \"SMTP-Server\"];\r\n    internal_firewall [address = \"192.168.1.254\", description = \"Internes FW\"];\r\n  }\r\n\r\n  network Private_LAN {\r\n    address = \"10.0.1.0\/24\"\r\n    internal_firewall;\r\n    app_server_01 [address = \"10.0.1.50\", description = \"API-Knoten 1\"];\r\n    app_server_02 [address = \"10.0.1.51\", description = \"API-Knoten 2\"];\r\n    db_master [address = \"10.0.1.100\", description = \"PostgreSQL-Prim\u00e4r\"];\r\n  }\r\n\r\n  network Management_Subnet {\r\n    address = \"10.0.99.0\/24\"\r\n    internal_firewall;\r\n    admin_bastion [address = \"10.0.99.5\", description = \"SSH-Bastion-Host\"];\r\n    monitoring_node [address = \"10.0.99.20\", description = \"Prometheus-Host\"];\r\n  }\r\n}\r\n@endnwdiag<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Network<\/p>\n
\u00a0<\/p>\n<\/section>\n
\n
4. Planungs-, Management- und Brainstorming-Visualisierungen<\/h2>\n
PlantUML ist nicht auf die Softwaregestaltung beschr\u00e4nkt \u2013 es ist auch ein leistungsstarkes Werkzeug f\u00fcr Projektmanagement und Team-Brainstorming.<\/p>\n
Gantt-Diagramme<\/h4>\n
Planen Sie Projekttermine, Aufgabenabh\u00e4ngigkeiten, Meilensteine und Ressourcenallokation mit sauberer Text-Markup.<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nMermaid in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Mermaid<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
gantt\r\n    title Zeitplan f\u00fcr die Freigabe der Softwareprodukte\r\n    dateFormat  YYYY-MM-DD\r\n    axisFormat  %b %d\r\n\r\n    Abschnitt Planung & Design\r\n    Anforderungserhebung   :a1, 2026-09-01, 10d\r\n    Architekturdesign      :a2, nach a1, 10d\r\n\r\n    Abschnitt Entwicklung\r\n    Backend-API-Entwicklung  :b1, nach a2, 15d\r\n    Frontend-UI-Entwicklung  :b2, nach a2, 15d\r\n\r\n    Abschnitt Testen & Freigabe\r\n    Integrationstest      :c1, nach b1 b2, 8d\r\n    Sicherheitspr\u00fcfung           :c2, nach c1, 5d\r\n    Produktionsfreigabe       :Meilenstein, m1, nach c2, 0d<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nMermaid in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Mermaid<\/p>\n
Arbeitsaufteilungsstruktur (WBS)<\/h4>\n
Komplexe Projekte in hierarchische Lieferungen und \u00fcberschaubare Aufgabenbl\u00f6cke zerlegen.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startwbs\r\ntitle Website-Neugestaltung WBS\r\n\r\n* Website-Neugestaltung Projekt\r\n** 1. Entdeckung & Strategie\r\n*** 1.1 Stakeholder-Interviews\r\n*** 1.2 Wettbewerbsanalyse\r\n*** 1.3 Umfang & Strategie-Abnahme\r\n** 2. UX\/UI-Design\r\n*** 2.1 Wireframing\r\n**** 2.1.1 Desktop-Layouts\r\n**** 2.1.2 Mobile-Layouts\r\n*** 2.2 Design-System\r\n**** 2.2.1 Komponentenbibliothek\r\n**** 2.2.2 Typografie & Stilrichtlinien\r\n** 3. Technische Entwicklung\r\n*** 3.1 Frontend\r\n**** 3.1.1 Seitenvorlagen\r\n**** 3.1.2 API-Integrationen\r\n*** 3.2 CMS & Backend\r\n**** 3.2.1 Benutzerdefinierte Beitragsarten\r\n**** 3.2.2 Datenbankmigration\r\n** 4. QA & Launch\r\n*** 4.1 Cross-Browser-Tests\r\n*** 4.2 Inhaltsmigration\r\n*** 4.3 DNS-Umstellung & Live-Schaltung\r\n@endwbs<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Work<\/p>\n
Mind Maps<\/h4>\n
Strukturierte Ideen, Feature-Taxonomien und technische Erkundungsnotizen schnell w\u00e4hrend Team-Sitzungen erfassen.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startmindmap\r\ntitle Feature-Map f\u00fcr E-Commerce-Plattform\r\n\r\n* E-Commerce-Plattform\r\n** Benutzerkontoverwaltung\r\n*** Soziale Authentifizierung (Google, Apple)\r\n*** Mehrfaktor-Authentifizierung\r\n*** Bestellverlauf & Verfolgung\r\n** Produktkatalog & Suche\r\n*** Facettierte Suche & Filter\r\n*** Inventar-Synchronisierung\r\n*** Produktbewertungen & -bewertungen\r\n** Kasse & Zahlungen\r\n*** Zahlungsgateways (Stripe, PayPal)\r\n*** Gutschein- & Promo-Engine\r\n*** Ein-Klick-Gast-Kasse\r\n** Kundensupport\r\n*** Live-Chat-Assistent\r\n*** Automatisiertes R\u00fcckgabeportal\r\n@endmindmap<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nPlantuml in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Mind<\/p>\n<\/section>\n
\n
5. Schnelles Schreiben und Rendern von PlantUML: Der Vorteil von VPasCode<\/h2>\n
W\u00e4hrend PlantUML \u00e4u\u00dferst leistungsf\u00e4hig ist, kann die Einrichtung lokaler Java-Umgebungen, Graphviz-Abh\u00e4ngigkeiten und Befehlszeilentools zu Schwierigkeiten f\u00fchren. Die Verwendung eines spezialisierten, webbasierten PlantUML-Tool<\/strong> beseitigt diese H\u00fcrden vollst\u00e4ndig.<\/p>\n
Visual Paradigm VPasCode<\/a> ist eine integrierte Diagramm-as-Code-Plattform, die speziell daf\u00fcr entwickelt wurde, Text-zu-Diagramm-Workflows zu optimieren.<\/p>\n
Wichtige Vorteile von VPasCode:<\/h3>\n