Wir freuen uns, die offizielle Einführung von Visual Paradigm VPasCode, die brandneue, einheitliche Diagram-as-Code-Plattform. Ob Sie Softwareingenieur, Systemarchitekt oder Business Analyst sind – VPasCode wurde entwickelt, um Ihren Workflow zu optimieren, indem es Text in Sekunden in schöne, professionelle Diagramme verwandelt.
Verabschieden Sie sich vom Kontextwechsel zwischen verschiedenen Tools. VPasCode vereint Ihre bevorzugten Open-Source-Text-zu-Diagramm-Sprachen in einer einzigen, nahtlosen und leistungsstarken webbasierten Umgebung.
Was ist VPasCode?
VPasCode (Visual Paradigm as Code) ist eine integrierte Umgebung, die einen komfortablen, kostenlosen Code-Editor mit einem leistungsstarken Diagramm-Renderer. Wenn Sie die Geschwindigkeit und die Vorteile der Versionskontrolle beim Erstellen Ihrer Diagramme lieben, bietet VPasCode die ultimative Sandbox, um sie sofort zu erstellen, vorzuzeigen und zu teilen.
Da es sich um eine vollständig integrierte Umgebung handelt, unterstützt VPasCode theoretisch alleSyntaxregeln der weltweit beliebtesten Diagramm-Engines. Bei der Einführung unterstützen wir vollständig:
- PlantUML-Editor & -Renderer: Erstellen Sie robuste Enterprise- und Softwarearchitektur-Diagramme.
- Mermaid.js-Editor & -Renderer: Rendern Sie moderne, von Markdown inspirierte Diagramme und Zeitpläne nativ in Ihrem Browser.
- Graphviz-Editor & -Renderer: Nutzen Sie die Leistungsfähigkeit der DOT-Sprache für komplexe Netzwerk- und Datenstrukturen.
…und das ist erst der Anfang! Wir werden in Zukunft kontinuierlich weitere Text-zu-Diagramm-Formate hinzufügen.

Unterstützte Diagrammtypen auf einen Blick
VPasCode unterstützt eine unglaublich umfangreiche Bibliothek an Diagrammtypen. Hier ist ein Überblick darüber, was Sie jetzt erstellen können:
PlantUML-Integration
- Sequenz-, Anwendungsfall-, Klassen- und Objektdiagramme
- Aktivitäts-, Komponenten-, Bereitstellungs- und Zustandsdiagramme
- ArchiMate- und C4-Modelle
- Entity-Relationship-Diagramme (ERD) & Chen-ERD
- Netzwerkdiagramme, WBS (Work Breakdown Structure) und Zeitdiagramme
Mermaid.js-Integration
- Flussdiagramme, Klassendiagramme und Sequenzdiagramme
- Entity-Relationship-Diagramme (ERD) & Zustandsdiagramme
- Mindmaps, Zeitstrahlen und User-Journey-Karten
- Gantt-Diagramme, Git-Graphen und Kanban-Boards
- C4-Modelle, Quadrant-Diagramme und Anforderungsdiagramme
Graphviz-Integration
- Digraph & Graph
- Flussdiagramme & Datenflussdiagramme
- Organigramme & Cluster
Funktionen & Fähigkeiten
Wir möchten, dass VPasCode für alle zugänglich ist. Deshalb haben wir unsere kostenlose Version mit wesentlichen Tools ausgestattet und bieten Premium-Nutzern gleichzeitig bahnbrechende KI-gestützte Funktionen an.
Kostenlos verfügbare Funktionen für alle:
- Unterstützung mehrerer Engines: Vollzugriff auf PlantUML, Mermaid.js und Graphviz.
- Textliche Beschreibungen: Erstellen Sie komplexe Diagramme ausschließlich durch intuitiven Code.
- Echtzeit-Vorschau: Sehen Sie, wie sich Ihr Diagramm sofort auf der Seite Ihres Bildschirms aktualisiert, während Sie tippen.
- Einfaches Teilen: Generieren Sie eine eindeutige URL, um Ihr Live-Diagramm einfach mit Teammitgliedern oder Kunden zu teilen.
- Flexible Exporte: Laden Sie Ihre fertigen Arbeiten als hochwertige PNG Bilder oder skalierbare SVG Vektorgrafiken herunter.
Optimieren Sie Ihren Workflow mit kostenpflichtigen Funktionen:
- KI-gestützte Fehlerbehebung im Code:Stecken Sie bei einem Syntaxfehler fest? Unsere integrierte KI analysiert Ihren PlantUML-, Mermaid- oder Graphviz-Code und behebt Fehler automatisch.

- KI-Übersetzung:Übersetzen Sie Text und Beschriftungen in Ihren Diagrammen nahtlos mit einem einzigen Klick in mehrere Sprachen.

Zugriff auf kostenpflichtige VPasCode-Funktionen
Wenn Sie bereits Visual Paradigm-Nutzer sind, haben Sie möglicherweise bereits Zugriff auf unsere Premium-KI-Funktionen!
Die kostenpflichtigen Funktionen von VPasCode sind enthalten in:
- Visual Paradigm Online Combo Edition (oder höher).
- Visual Paradigm Desktop Professional Edition (oder höher) mit einem aktiven Wartungsvertrag.
Hinweis für Desktop-Nutzer:Nutzer der Visual Paradigm Professional Edition (oder höher) mit aktivem Wartungsvertrag erhalten automatisch vollen Zugriff auf die Web-Apps der VP Online Combo Edition – das bedeutet, Sie erhalten sofortigen Zugriff auf die Premium-KI-Tools von VPasCode ohne zusätzliche Kosten!
PlantUML und Mermaid in VPasCode – Diagramm-Beispiele
PlantUML Use-Case-Diagramm: E-Commerce-System
Dieses Use-Case-Diagramm veranschaulicht die wichtigsten Interaktionen innerhalb eines E-Commerce-Checkout-Systems. Ein Kunde kann seinen Warenkorb anzeigen und zum Checkout übergehen, bei dem Authentifizierung, Gutschein-Anwendung und Kreditkartenzahlung über externe Dienste wie einen Identitätsanbieter und einen Zahlungsabwickler integriert sind.

@startuml
left to right direction
actor "E-Commerce-Kunde" as customer
actor "Identitätsanbieter" as authPool
actor "Zahlungsabwickler" as stripe
rectangle "Checkout-System-Grenze" {
usecase "Authentifizieren" as UC_Auth
usecase "Warenkorb anzeigen" as UC_Cart
usecase "Checkout" as UC_Check
usecase "Gutschein anwenden" as UC_Promo
usecase "Mit Kreditkarte zahlen" as UC_Pay
}
customer --> UC_Cart
customer --> UC_Check
UC_Check ..> UC_Auth : <>
UC_Check <.. UC_Promo : <>
UC_Check ..> UC_Pay : <>
UC_Auth --> authPool
UC_Pay --> stripe
@enduml
PlantUML-Klassendiagramm: Bibliotheksverwaltungssystem
Dieses Klassendiagramm modelliert ein Bibliotheksverwaltungssystem und zeigt die wichtigsten Entitäten, die an der Katalogverwaltung, den Mitgliederdiensten und den Ausleihvorgängen beteiligt sind. Das Design nutzt Vererbung, um verschiedene Arten von Bibliotheksmaterialien (wie Bücher, Zeitschriften und DVDs) darzustellen, während Assoziationen zwischen Mitgliedern, Bibliothekaren, Ausleihaufzeichnungen und Gebühren veranschaulichen, wie Gegenstände ausgeliehen, zurückgegeben und während ihres gesamten Lebenszyklus verwaltet werden.

@startuml
class Bibliothek {
- name: String
- adresse: String
- telefon: String
+ addMitglied(mitglied: Mitglied): void
+ removeMitglied(mitgliedId: String): void
+ addItem(item: BibliotheksItem): void
+ removeItem(itemId: String): void
+ ausleihenItem(mitgliedId: String, itemId: String): boolean
+ zurückgebenItem(itemId: String): boolean
}
class BibliotheksItem {
# itemId: String
# titel: String
# verlag: String
# veröffentlichungsjahr: int
# verfügbar: boolean
+ getDetails(): String
+ setVerfügbarkeit(status: boolean): void
}
abstract class Buch {
- isbn: String
- autor: String
- seitenzahl: int
+ getAutor(): String
}
class EBook {
- dateigrößeMB: double
- format: String
- downloadUrl: String
+ herunterladen(): void
}
class GedrucktesBuch {
- regalposition: String
- zustand: String
+ getRegalposition(): String
}
class Zeitschrift {
- ausgabennummer: int
- bandnummer: int
- coverDatum: Date
}
class DVD {
- dauerMinuten: int
- regisseur: String
- sprache: String
- untertitelVerfügbar: boolean
}
class Mitglied {
- mitgliedId: String
- name: String
- email: String
- telefon: String
- mitgliedschaftsdatum: Date
+ ausleihenItem(item: BibliotheksItem): boolean
+ zurückgebenItem(item: BibliotheksItem): boolean
+ getAusgelieheneItems(): List
}
class Ausleihvorgang {
- vorgangsId: String
- ausleihdatum: Date
- fälligkeitsdatum: Date
- zurückgabedatum: Date
- istÜberfällig(): boolean
- berechneStrafe(): double
}
class Strafe {
- strafId: String
- betrag: double
- ausstellungsdatum: Date
- bezahlt: boolean
+ bezahleStrafe(): void
}
class Bibliothekar {
- mitarbeiterId: String
- abteilung: String
+ verarbeiteAusleihvorgang(mitglied: Mitglied, item: BibliotheksItem): void
+ verarbeiteRückgabe(item: BibliotheksItem): void
+ generiereBericht(): void
+ verwalteInventar(): void
}
' Vererbungszusammenhänge
BibliotheksItem <|-- Buch
BibliotheksItem <|-- Zeitschrift
BibliotheksItem <|-- DVD
Buch <|-- EBook
Buch <|-- GedrucktesBuch
' Komposition und Aggregation
Bibliothek "1" -- "viele" Mitglied : hat >
Bibliothek "1" -- "viele" BibliotheksItem : enthält >
Bibliothek "1" -- "viele" Bibliothekar : beschäftigt >
Mitglied "1" -- "viele" Ausleihvorgang : hat >
Ausleihvorgang "1" -- "1..*" BibliotheksItem : verweist auf >
Ausleihvorgang "1" -- "0..*" Strafe : erzeugt >
' Assoziation
Bibliothekar --> Ausleihvorgang : verwaltet >
Mitglied --> Ausleihvorgang : erstellt >
note top of Bibliothek : Zentrales System, dasnMitglieder, Gegenstände und Ausleihen verwaltet
note right of BibliotheksItem : Abstrakte Basisklassenfür alle Bibliotheksgüter
@enduml
PlantUML Sequenzdiagramm: Geldabhebung am Geldautomaten
Dieses Sequenzdiagramm veranschaulicht die Interaktionen bei einer Geldabhebung am Geldautomaten, von der Karteninsertion und PIN-Validierung bis hin zur Geldausgabe und Kontobearbeitung. Es hebt die Kommunikation zwischen Kunde, Geldautomat, Bankensystem und Kundendatenbank hervor und modelliert zudem alternative Abläufe wie ungültige PIN-Versuche, unzureichende Guthaben und optionale Quittungsdrucke.

@startuml
' Titel
title Geldabhebung am Geldautomaten - Sequenzdiagramm
' Akteure und Teilnehmer
actor Kunde als K
participant "Geldautomat" als GA
participant "Bankensystem" als BS
database "Kundenkonto" als DB
' Sequenz
K -> GA : Karte einlegen
GA -> GA : Kartendetails lesen
GA -> K : Aufforderung zur PIN-Eingabe
K -> GA : PIN eingeben
GA -> BS : Karte & PIN validieren
BS -> DB : Zugangsdaten prüfen
DB --> BS : Validierungsergebnis
alt Ungültige PIN
BS --> GA : Ungültige PIN
GA -> K : Ungültige PIN, erneut versuchen
note rechts: Nach 3 fehlgeschlagenen Versuchen,nKarte wird einbehalten
else Gültige PIN
BS --> GA : Gültige PIN
GA -> K : Hauptmenü anzeigen
K -> GA : Abhebung auswählen
GA -> K : Betrag anfordern
K -> GA : Betrag eingeben
GA -> BS : Guthaben & Limit prüfen
BS -> DB : Guthaben abfragen
DB --> BS : Aktuelles Guthaben
alt Unzureichende Mittel
BS --> GA : Unzureichendes Guthaben
GA -> K : Transaktion abgelehntn(Guthaben anzeigen)
K -> GA : Transaktion abbrechen
GA -> K : Karte zurückgeben
else Ausreichende Mittel
BS --> GA : Genehmigt
GA -> GA : Geld ausgeben
GA -> K : Geld ausgeben
K -> GA : Geld entnehmen
GA -> BS : Geldausgabe bestätigen
BS -> DB : Konto belasten & Transaktion protokollieren
DB --> BS : Aktualisierung abgeschlossen
BS --> GA : Transaktion abgeschlossen
GA -> K : Quittung drucken
alt Quittung angefordert
K -> GA : Quittung entnehmen
else Keine Quittung
K -> GA : Quittung ablehnen
end
GA -> K : Karte zurückgeben
K -> GA : Karte entnehmen
end
end
GA -> K : Danke / Transaktionsende
@enduml
PlantUML Aktivitätsdiagramm: Versicherungsschadensystem
Dieses Aktivitätsdiagramm modelliert den End-to-End-Ablauf eines Versicherungsschadensbearbeitungssystems, von der Schadenmeldung über Validierung, Untersuchung und Abwicklung. Es erfasst wichtige Entscheidungspunkte wie Versicherungsbedingungen, Vollständigkeit der Dokumente, Gültigkeit des Schadens und Annahme der Abwicklung und veranschaulicht sowohl erfolgreiche Pfade als auch Ausnahmepfade, einschließlich Schadensablehnung und Streitbeilegung.

@startuml InsuranceClaimSystem
start
:Versicherungsnehmer reicht Schadenmeldung ein;
:Schadenmeldung wird im System protokolliert;
if (Ist die Police aktiv und gültig?) dann (ja)
:Schadenfall dem Sachbearbeiter zuweisen;
:Sachbearbeiter über neuen Schadenfall informieren;
sonst (nein)
:Ablehnungsmitteilung an Versicherungsnehmer senden;
:Grund protokollieren: Police inaktiv/ungültig;
stop
endif
:Sachbearbeiter prüft eingereichte Dokumente;
if (Sind alle erforderlichen Dokumente vorhanden?) dann (ja)
:Sachbearbeiter startet Schadenvalidierung;
sonst (nein)
:Fehlende Dokumente vom Versicherungsnehmer anfordern;
:Auf weitere Dokumente warten;
:Dokumente erneut prüfen;
note rechts
System wartet auf
Antwort des Versicherungsnehmers
end note
-> zurück zu "Sachbearbeiter prüft eingereichte Dokumente";
endif
:Sachbearbeiter untersucht Schadenfall;
:Zeugen/Experten kontaktieren, falls erforderlich;
:Schadens-/Verlusthöhe schätzen;
if (Ist der Schadenfall gemäß Policenbedingungen gültig?) dann (ja)
:Genehmigten Betrag berechnen;
:Selbstbeteiligung anwenden, falls zutreffend;
sonst (nein)
:Ablehnungsmitteilung mit Grund senden;
:Entscheidung im System protokollieren;
stop
endif
:Abwicklungsangebot erstellen;
:Abwicklungsangebot an Versicherungsnehmer senden;
:Versicherungsnehmer prüft Angebot;
if (Akzeptiert der Versicherungsnehmer das Angebot?) dann (ja)
:Zahlung verarbeiten;
:Schadenstatus auf "Abgewickelt" aktualisieren;
:Bestätigung an Versicherungsnehmer senden;
:Abschlussdetails protokollieren;
sonst (nein)
:An Streitbeilegung eskalieren;
:Abwicklung verhandeln;
:Angebot aktualisieren;
-> zurück zu "Abwicklungsangebot an Versicherungsnehmer senden";
endif
stop
@enduml
PlantUML Zustandsdiagramm: Rauchmeldesystem
Dieses Zustandsdiagramm veranschaulicht das Verhalten eines Rauchmeldesystems beim Übergang zwischen Betriebszuständen wie Standby, Überwachung, Raucherkennung, Alarmaktivierung und Fehlerbehandlung. Es zeigt, wie das System auf Ereignisse reagiert, einschließlich Stromänderungen, Selbsttestergebnissen, Raucherkennung, schwachen Batteriezuständen und benutzerinitiierten Resets, um eine zuverlässige Brandüberwachung und Alarmierung sicherzustellen.

@startuml SmokeDetectionSystem
title Zustandsdiagramm - Rauchmeldesystem
[*] --> StromAus
state StromAus {
[*] --> KeinStrom
KeinStrom : Gerät ist ausgeschaltet
KeinStrom --> StromEin : Einschaltknopf gedrückt
}
state StromEin {
[*] --> Standby
Standby : System bereit
Standby --> Selbsttest : Periodischer Selbsttest (alle 24h)
Standby --> Überwachung : Überwachung starten (Sensor aktiv)
state Selbsttest {
[*] --> SensorenTesten
SensorenTesten --> TestBestanden : Alle Sensoren OK
SensorenTesten --> TestFehlgeschlagen : Sensorfehler erkannt
TestBestanden --> Standby : Zurück zum Standby
TestFehlgeschlagen --> Fehlerzustand : Fehler melden
}
state Überwachung {
[*] --> KeinRauch
KeinRauch : Normaler Betrieb
KeinRauch --> RauchErkannt : Rauchpegel > Schwellwert
KeinRauch --> SchwacheBatterie : Batterie schwach (drahtlos)
SchwacheBatterie --> KeinRauch : Batterie getauscht
state RauchErkannt {
[*] --> Erstalarm
Erstalarm --> RauchBestätigt : Rauch bleibt > 5 Sek
Erstalarm --> Fehlalarm : Rauch klärt < 5 Sek Fehlalarm --> KeinRauch : Reset
RauchBestätigt --> AlarmAktiv
}
state AlarmAktiv {
[*] --> AlarmTönen : Sirene & Lichter aktivieren
AlarmTönen --> BenachrichtigungSenden : Kontrollpanel/App benachrichtigen
BenachrichtigungSenden --> WartenAufReset
WartenAufReset --> AlarmAktiv : Rauch noch vorhanden
WartenAufReset --> SystemReset : Reset-Taste gedrückt
SystemReset --> KeinRauch : System zurückgesetzt
}
}
}
state Fehlerzustand {
[*] --> Fehleranzeige : Fehler-LED blinken
Fehleranzeige --> StromAus : Manuelles Neustart erforderlich
}
StromEin --> Fehlerzustand : Selbsttest fehlgeschlagen
Fehlerzustand --> StromAus : Neustart
StromAus --> [*] : System abgesteckt / Batterie entfernt
@enduml
PlantUML-Komponentendiagramm: Kuriersystem
Dieses Komponentendiagramm stellt die hochstufige Architektur eines Kurierverwaltungssystems dar und zeigt, wie Client-Anwendungen, Backend-Dienste, Messaging-Infrastrukturen, Caches und Datenbanken zusammenarbeiten, um Paketzustellungsprozesse zu unterstützen. Es veranschaulicht die Aufteilung der Verantwortlichkeiten zwischen Diensten wie Bestellverwaltung, Disposition, Verfolgung, Zahlungen, Benachrichtigungen und Benutzerverwaltung und hebt sowohl die synchrone API-Kommunikation als auch die asynchrone ereignisgesteuerte Verarbeitung hervor.

@startuml CourierSystem
title Kuriersystem - Komponentendiagramm
' === Komponenten ===
component "Kunden-App" as CustomerApp
component "Kurier-Mobil-App" as CourierApp
component "Admin-Web-Dashboard" as AdminWeb
component "API-Gateway" as ApiGateway
component "Bestelldienst" as OrderService
component "Dispositionsdienst" as DispatchService
component "Verfolgungsdienst" as TrackingService
component "Zahlungsdienst" as PaymentService
component "Benachrichtigungsdienst" as NotificationService
component "Benutzerdienst" as UserService
component "Nachrichtenwarteschlangen(RabbitMQ/Kafka)" as MessageQueue
component "Redis-Cache" as RedisCache
database "PostgreSQL-DB" as SQLDB
database "MongoDBn(Logs/Verlauf)" as MongoLogs
' === Schnittstellen / Ports ===
CustomerApp --> ApiGateway : "REST / WebSocket"
CourierApp --> ApiGateway : "REST / WebSocket"
AdminWeb --> ApiGateway : "REST"
ApiGateway --> OrderService
ApiGateway --> TrackingService
ApiGateway --> PaymentService
ApiGateway --> UserService
' === Dienstabhängigkeiten ===
OrderService --> DispatchService : "gRPC / REST"
OrderService --> PaymentService
OrderService --> NotificationService
OrderService --> SQLDB : "JDBC"
OrderService --> RedisCache : "Cache"
DispatchService --> MessageQueue : "Ereignisse veröffentlichen"
DispatchService --> CourierApp : "Push über API-Gateway"
DispatchService --> SQLDB
TrackingService --> MessageQueue : "Standort-Updates abonnieren"
TrackingService --> MongoLogs : "Verlauf schreiben"
TrackingService --> RedisCache : "Aktueller Standort-Cache"
PaymentService --> SQLDB
PaymentService --> NotificationService
NotificationService --> MessageQueue : "Benachrichtigungen konsumieren"
NotificationService --> CustomerApp : "Push über API-Gateway"
UserService --> SQLDB
UserService --> RedisCache
' === Hinweise ===
note right of OrderService
Verwaltet die Erstellung von Paketen,
Preisgestaltung und Bestellstatus
end note
note right of DispatchService
Weist Bestellungen an Kuriere zu,
optimiert Routen
end note
note bottom of MessageQueue
Asynchrone Ereignisse: order_created,
location_updated,
delivery_status_changed
end note
@enduml
PlantUML-Deploymentsdiagramm: Beispielarchitektur

@startuml
node "AWS Cloud Route53" as DNS
node "VPC (10.0.0.0/16)" {
node "Öffentliches Subnetz" {
artifact "NGINX-Lastverteiler" as ALB
}
node "Privates Subnetz-Cluster" {
node "EC2-Instanz 1" {
component "Node.js-API [Pod 1]" as Pod1
}
node "EC2-Instanz 2" {
component "Node.js-API [Pod 2]" as Pod2
}
}
node "Datenbank-Subnetz" {
database "Amazon RDS (Multi-AZ Aurora)" as Aurora
}
}
DNS --> ALB : Leitet Traffic weiter
ALB --> Pod1 : Round-Robin-Lastverteilung
ALB --> Pod2
Pod1 --> Aurora : Verbindungs-Pool
Pod2 --> Aurora
@enduml
PlantUML-ArchiMate-Beispiel: Internet-Browser
Dieses ArchiMate-Diagramm veranschaulicht, wie Geschäfts-, Anwendungs- und Technologieebenen zusammenarbeiten, um webbasierte Geschäftsfunktionalitäten über einen Internet-Browser zu unterstützen. Es zeigt die Beziehungen zwischen Geschäftsprozessen, dynamisch generierten Webseitenelementen und Daten, Browserdiensten und -plugins sowie der zugrunde liegenden Webserver-Infrastruktur, die das Anwendungserlebnis bereitstellt und unterstützt.

@startuml Internet Browser Sample
!include <archimate/Archimate>
title Archimate-Beispiel - Internet-Browser
'LAYOUT_AS_SKETCH()
'LAYOUT_LEFT_RIGHT()
'LAYOUT_TOP_DOWN()
Grouping(business, "Geschäft"){
Business_Object(businessObject, "Ein Geschäftsobjekt")
Business_Process(someBusinessProcess,"Ein Geschäftsprozess")
Business_Service(itSupportService, "IT-Support für Geschäft (Anwendungsdienst)")
}
Grouping(application, "Anwendung"){
Application_DataObject(dataObject, "Webseitendaten n 'on the fly'")
Application_Function(webpageBehaviour, "Webseitenverhalten")
Application_Component(ActivePartWebPage, "Aktiver Teil der Webseite n 'on the fly'")
}
Grouping(technology, "Technologie"){
Technology_Artifact(inMemoryItem,"im Speicher / 'on the fly' html/javascript")
Technology_Service(internetBrowser, "Internet-Browser Generisch & Plugin")
Technology_Service(internetBrowserPlugin, "Einige Internet-Browser-Plugins")
Technology_Service(webServer, "Einige Webserver")
}
Rel_Flow_Left(someBusinessProcess, businessObject, "")
Rel_Serving_Up(itSupportService, someBusinessProcess, "")
Rel_Specialization_Up(webpageBehaviour, itSupportService, "")
Rel_Flow_Right(dataObject, webpageBehaviour, "")
Rel_Specialization_Up(dataObject, businessObject, "")
Rel_Assignment_Left(ActivePartWebPage, webpageBehaviour, "")
Rel_Specialization_Up(inMemoryItem, dataObject, "")
Rel_Realization_Up(inMemoryItem, ActivePartWebPage, "")
Rel_Specialization_Right(inMemoryItem,internetBrowser, "")
Rel_Serving_Up(internetBrowser, webpageBehaviour, "")
Rel_Serving_Up(internetBrowserPlugin, webpageBehaviour, "")
Rel_Aggregation_Right(internetBrowser, internetBrowserPlugin, "")
Rel_Access_Up(webServer, inMemoryItem, "")
Rel_Serving_Up(webServer, internetBrowser, "")
@enduml
PlantUML-ERD-Beispiel: Kinokartensystem

@startuml
entity "Kunde" as kunde {
* kunden_id : UUID <>
--
* vorname : VARCHAR(50)
* nachname : VARCHAR(50)
* email : VARCHAR(100) <>
* telefon : VARCHAR(20)
* treuepunkte : INT
* registrierungsdatum : TIMESTAMP
}
entity "Film" as film {
* film_id : UUID <>
--
* titel : VARCHAR(200)
* beschreibung : TEXT
* dauer_minuten : INT
* genre : VARCHAR(50)
* release_date : DATE
* bewertung : VARCHAR(10)
}
entity "Kino" as kino {
* kino_id : UUID <>
--
* kino_name : VARCHAR(100)
* gesamt_sitze : INT
* sitz_anordnung : JSON
}
entity "Vorstellung" as vorstellung {
* vorstellung_id : UUID <>
--
* film_id : UUID <>
* kino_id : UUID <>
* vorstellungszeit : TIMESTAMP
* endzeit : TIMESTAMP
* sprache : VARCHAR(50)
* untertitel : BOOLEAN
* preis_regulaer : DECIMAL(10,2)
* preis_vip : DECIMAL(10,2)
}
entity "Sitz" as sitz {
* sitz_id : UUID <>
--
* kino_id : UUID <>
* reihenbezeichnung : CHAR(2)
* sitznummer : INT
* sitztyp : VARCHAR(20)
* ist_barrierefrei : BOOLEAN
}
entity "Buchung" as buchung {
* buchung_id : UUID <>
--
* kunde_id : UUID <>
* vorstellung_id : UUID <>
* buchungszeit : TIMESTAMP
* gesamtsumme : DECIMAL(10,2)
* status : VARCHAR(20)
* zahlungsmethode : VARCHAR(30)
* transaktions_id : VARCHAR(100)
}
entity "BuchungSitz" as buchung_sitz {
* buchung_id : UUID <<FK,PK>>
* sitz_id : UUID <<FK,PK>>
--
* ticketpreis : DECIMAL(10,2)
* angewandter_rabatt : DECIMAL(10,2)
}
entity "Zahlung" as zahlung {
* zahlung_id : UUID <>
--
* buchung_id : UUID <>
* betrag : DECIMAL(10,2)
* zahlungsdatum : TIMESTAMP
* zahlungsstatus : VARCHAR(20)
* zahlungsanbieter : VARCHAR(30)
* anbieter_referenz : VARCHAR(200)
}
entity "Bewertung" as bewertung {
* bewertung_id : UUID <>
--
* kunde_id : UUID <>
* film_id : UUID <>
* bewertung : INT
* kommentar : TEXT
* bewertungsdatum : TIMESTAMP
}
' Beziehungen
kunde ||--o{ buchung : "nimmt vor"
film ||--o{ vorstellung : "wird geplant als"
kino ||--o{ vorstellung : "bietet an"
vorstellung ||--o{ buchung : "hat"
buchung ||--|{ buchung_sitz : "enthält"
sitz ||--o{ buchung_sitz : "zugewiesen zu"
buchung ||--|| zahlung : "hat"
kunde ||--o{ bewertung : "verfasst"
film ||--o{ bewertung : "erhält"
note right of buchung : Status: AUSSTEHEND, BESTÄTIGT, STORNIERT, ABGELAUFEN
note left of sitz : sitztyp: REGULAR, VIP, PAAR
note right of zahlung : zahlungsstatus: AUSSTEHEND, ERFOLGREICH, FEHLGESCHLAGEN, ERSTATTET
@enduml
Mermaid-Flussdiagramm: Arzt aufsuchen
Dieses Flussdiagramm veranschaulicht einen typischen Entscheidungsprozess im Gesundheitswesen, der Patienten von der ersten Erkennung von Symptomen über Diagnose, Tests, Behandlung und Genesung führt. Es hebt wichtige Entscheidungspunkte hervor, darunter die Notfallbewertung, die diagnostische Beurteilung und die Wirksamkeit der Behandlung, und zeigt gleichzeitig auf, wie ungelöste Symptome eine zusätzliche ärztliche Konsultation und Neubewertung erfordern können.

flowchart TD
A[Unwohlsein oder medizinischer Rat erforderlich] --> B{Ist es ein Notfall?}
B -->|Ja| C[Notruf wählen oder in die Notaufnahme gehen]
B -->|Nein| D[Termin beim Arzt vereinbaren]
D --> E[Termin wahrnehmen]
E --> F[Ärztliche Beurteilung]
F --> G{Diagnose gestellt?}
G -->|Ja| H[Behandlungsplan]
G -->|Nein| I[Tests anordnen]
I --> J[Testergebnisse erhalten]
J --> F
H --> K[Behandlung durchführen]
K --> L{Symptome verbessert?}
L -->|Ja| M[Genesung / Regelmäßige Nachsorge]
L -->|Nein| N[Zum Arzt zurückkehren]
N --> F
Graphviz-Graph
Dieses Diagramm stellt eine vereinfachte Netzwerktopologie eines Rechenzentrums dar und zeigt, wie Hosts über ein Rückgrat aus miteinander verbundenen Switches verbunden sind. Es hebt die primären Kommunikationspfade zwischen Netzwerkkomponenten hervor, einschließlich einer Trunk-Verbindung zwischen Switches und einer sekundären Failover-Verbindung, die im Falle von Netzwerkstörungen Redundanz und Resilienz bietet.

graph UndirectedSpanningTree {
fontname="Helvetica,Arial,sans-serif"
label="Rechenzentrum-Mesh-Netzwerk-Topologie-Rückgrat-Infrastruktur"
labelloc="b"
fontsize=14
node [fontname="Helvetica,Arial,sans-serif", shape=circle, style=filled, color="#475569", fillcolor="#f1f5f9", width=0.8, fixedsize=true]
edge [color="#94a3b8", penwidth=2.5]
SwitchAlpha [label="SW_A", fillcolor="#cbd5e1"]
SwitchBeta [label="SW_B", fillcolor="#cbd5e1"]
Node1 [label="Host_01"]
Node2 [label="Host_02"]
Node3 [label="Host_03"]
Node4 [label="Host_04"]
SwitchAlpha -- SwitchBeta [label=" Trunking Link", weight=5]
SwitchAlpha -- Node1
SwitchAlpha -- Node2
SwitchBeta -- Node3
SwitchBeta -- Node4
Node1 -- Node2 [style=dashed, color="#cbd5e1", label=" Failover Interconnect"]
}
Heute loslegen
Bereit, die Geschwindigkeit von Diagrammen als Code zu erleben? Ob Sie einen zuverlässigen PlantUML-Editor, einen schnellen Mermaid-Editor, oder einen leistungsstarken Graphviz-Compiler benötigen, VPasCode ist für Sie bereit.
Besuchen Sie jetzt unsere Plattform unter:
Probieren Sie den Echtzeit-Editor aus und revolutionieren Sie die Art und Weise, wie Sie Software und Systeme entwerfen!







