Einführung
In der dynamischen Welt der agilen Entwicklung wird Dokumentation oft zur Engstelle. Traditionelle Drag-and-Drop-Diagramm-Tools erfordern ständigen Kontextwechsel, stören die Arbeitsfluss des Entwicklers und machen die Versionskontrolle zu einem Alptraum. Für agile Teams, die in ihren IDEs arbeiten und Infrastruktur als Code verwalten, sollten Diagramme nicht anders sein.
Treten Sie ein VPasCode (Visual Paradigm als Code), eine einheitliche, browserbasierte Plattform, die Text innerhalb von Sekunden in professionelle, hochwertige Diagramme umwandelt. Durch die Kombination der Stärken von PlantUML, Mermaid.js und Graphviz in einer einzigen nahtlosen Umgebung ermöglicht VPasCode es Softwareentwicklern, Systemarchitekten und Business-Analysten, Diagramme genau wie Code zu behandeln: leichtgewichtig, versionskontrollierbar und sofort renderbar. Diese Fallstudie untersucht, wie ein erfahrener Visual Paradigm-Nutzer und agiler Entwickler VPasCode nutzen kann, um Arbeitsabläufe zu optimieren, die Teamzusammenarbeit zu verbessern und architektonische Klarheit zu bewahren, ohne aus der Denkweise des Code-Editors auszubrechen.

Das Dilemma des agilen Entwicklers: Warum Diagramm-als-Code?
Seit Jahren kämpfen agile Teams mit dem Problem der „Diagramm-Degeneration“. Eine Whiteboard-Skizze aus der Sprint-Planung wird selten im Sprint-Review aktualisiert. Drag-and-Drop-Tools erzeugen Binärdateien, die mit Git-Diffs nicht gut zusammenarbeiten, was es schwierig macht, nachzuvollziehen, wer was in einem Architekturdiagramm geändert hat.
VPasCode löst dies, indem es einen Diagramm-als-Code (DaC) Ansatz verfolgt. Egal, ob Sie eine komplexe Microservices-Architektur oder eine einfache Benutzerreise definieren, Sie schreiben es als Text. Das bedeutet:
-
Git-native kompatibel: Speichern Sie Ihre Diagramme als rohe Textdateien neben Ihrem Quellcode.
-
Kein Setup nötig – Cloud-Zugriff: Keine Software-Downloads oder lokale Abhängigkeiten erforderlich; es läuft vollständig im Browser.
-
Echtzeit-Vorschau: Sehen Sie Ihre Grafiken sofort live-rendered, während Sie tippen, und erhalten sofortige Rückmeldung.
Einheitlicher Arbeitsbereich: Ein Editor, drei leistungsstarke Engines
VPasCode bringt die weltweit beliebtesten Open-Source-Diagrammsyntaxen in einen einheitlichen Cloud-Editor. Anstatt mehrere Tools zu wechseln, verfügen Sie über native Parsing- und Rendering-Funktionen für drei Haupt-Engines:
-
PlantUML: Der Goldstandard für robuste Diagramme zur Unternehmens- und Softwarearchitektur.
-
Mermaid.js: Ideal für moderne, markdown-inspirierte Diagramme, Zeitstrahlen und Flussdiagramme.
-
Graphviz: Ideal zum Einsatz der DOT-Sprache für komplexe Netzwerktopologien und Datenstrukturen.

Tiefgang: PlantUML für die Unternehmensarchitektur
PlantUML bleibt die führende Lösung für detaillierte technische Modellierung. VPasCode unterstützt eine umfangreiche Bibliothek von PlantUML-Diagrammtypen, darunter Sequenz-, Use-Case-, Klassen-, Aktivitäts-, Komponenten-, Bereitstellungs-, Zustands-, ArchiMate- und Entity-Relationship-Diagramme (ERD).
Modellierung komplexer Systeme: Das Beispiel der Bibliotheksverwaltung
Betrachten Sie ein Bibliotheksverwaltungssystem. Mit PlantUML in VPasCode können wir Vererbung, Zusammensetzung und Aggregation klar modellieren. Der folgende Code definiert die Beziehungen zwischen Bibliothek, Mitglied, Bibliotheksobjekt, und verschiedene Unterklassen wie E-Book und Buch.
@startuml
class Bibliothek {
- name: String
- adresse: String
- telefon: String
+ fügeMitgliedHinzu(mitglied: Mitglied): void
+ entferneMitglied(mitgliedsId: String): void
+ fügeObjektHinzu(objekt: Bibliotheksobjekt): void
+ entferneObjekt(objektId: String): void
+ leihObjekt(mitgliedsId: String, objektId: String): boolean
+ gebeObjektZurück(objektId: String): boolean
}
class Bibliotheksobjekt {
# objektId: String
# titel: String
# verlag: String
# erscheinungsjahr: int
# istVerfügbar: boolean
+ getDetails(): String
+ setzeVerfügbarkeit(status: boolean): void
}
abstrakte class Buch {
- isbn: String
- autor: String
- seitenanzahl: int
+ getAutor(): String
}
class E-Book {
- dateigrößeMB: double
- format: String
- downloadUrl: String
+ download(): void
}
class Buch {
- regalposition: String
- zustand: String
+ getRegalposition(): String
}
class Zeitschrift {
- ausgabenummer: int
- volumenummer: int
- umschlagdatum: Datum
}
class DVD {
- dauerMinuten: int
- regisseur: String
- sprache: String
- unterschriftsverfügbar: boolean
}
class Mitglied {
- mitgliedsId: String
- name: String
- email: String
- telefon: String
- mitgliedsdatum: Datum
+ leiheObjekt(objekt: Bibliotheksobjekt): boolean
+ gebeObjektZurück(objekt: Bibliotheksobjekt): boolean
+ getAusgelieheneObjekte(): Liste
}
class Ausleihprotokoll {
- protokollId: String
- ausleihdatum: Datum
- rückgabedatum: Datum
- tatsächlichesRückgabedatum: Datum
- istÜberfällig(): boolean
- berechneBuße(): double
}
class Buße {
- bußeId: String
- betrag: double
- ausstellungsdatum: Datum
- istBezahlt: boolean
+ bezahleBuße(): void
}
class Bibliothekar {
- mitarbeiterId: String
- abteilung: String
+ verarbeiteAusleihe(mitglied: Mitglied, objekt: Bibliotheksobjekt): void
+ verarbeiteRückgabe(objekt: Bibliotheksobjekt): void
+ generiereBericht(): void
+ verwalteBestand(): void
}
' Vererbungsbeziehungen
Bibliotheksobjekt <|-- Buch
Bibliotheksobjekt <|-- Zeitschrift
Bibliotheksobjekt <|-- DVD
Buch <|-- E-Book
Buch <|-- Buch
' Zusammensetzung und Aggregation
Bibliothek "1" -- "viele" Mitglied : hat >
Bibliothek "1" -- "viele" Bibliotheksobjekt : enthält >
Bibliothek "1" -- "viele" Bibliothekar : beschäftigt >
Mitglied "1" -- "viele" Ausleihprotokoll : hat >
Ausleihprotokoll "1" -- "1..*" Bibliotheksobjekt : verweist auf >
Ausleihprotokoll "1" -- "0..*" Buße : erzeugt >
' Assoziation
Bibliothekar --> Ausleihprotokoll : verwaltet >
Mitglied --> Ausleihprotokoll : erstellt >
note top of Bibliothek : Zentrales System, dasnMitglieder, Objekte und Ausleihen verwaltet
note right of Bibliotheksobjekt : Abstrakte Basisklassenfür alle Bibliotheksmaterialien
@enduml
PlantUML in VPasCode bearbeiten
Behandlung von Logikabläufen: Bargeldabhebung an einem Geldautomaten
Sequenzdiagramme sind entscheidend für das Verständnis der Interaktionen zwischen Systemkomponenten. Das folgende Beispiel modelliert eine Bargeldabhebung an einem Geldautomaten und hebt alternative Abläufe wie ungültige PINs und unzureichende Mittel hervor, indem PlantUMLs alt Blöcke.

@startuml
' Titel
title Bargeldabhebung am Geldautomaten - Sequenzdiagramm
' Akteure und Teilnehmer
actor Kunde als K
participant "Geldautomat" als GA
participant "Bankensystem" als BS
datenbank "Kundenkonto" als DB
' Ablauf
K -> GA : Karte einlegen
GA -> GA : Karteninformationen lesen
GA -> K : PIN abfragen
K -> GA : PIN eingeben
GA -> BS : Karte und PIN überprüfen
BS -> DB : Zugangsdaten prüfen
DB --> BS : Überprüfungsresultat
alt Ungültige PIN
BS --> GA : Ungültige PIN
GA -> K : Ungültige PIN, erneut versuchen
note right: Nach 3 fehlgeschlagenen Versuchen wirdndie Karte zurückgehalten
else Gültige PIN
BS --> GA : Gültige PIN
GA -> K : Hauptmenü anzeigen
K -> GA : Abhebung auswählen
GA -> K : Betrag eingeben
K -> GA : Betrag eingeben
GA -> BS : Kontostand und Limit prüfen
BS -> DB : Kontostand abfragen
DB --> BS : Aktueller Kontostand
alt Unzureichende Mittel
BS --> GA : Unzureichender Kontostand
GA -> K : Transaktion abgelehntn(Kontostand anzeigen)
K -> GA : Transaktion abbrechen
GA -> K : Karte zurückgeben
else Ausreichende Mittel
BS --> GA : Genehmigt
GA -> GA : Bargeld ausgeben
GA -> K : Bargeld ausgeben
K -> GA : Bargeld entnehmen
GA -> BS : Bargeldausgabe bestätigen
BS -> DB : Konto belasten und Transaktion protokollieren
DB --> BS : Aktualisierung abgeschlossen
BS --> GA : Transaktion abgeschlossen
GA -> K : Beleg ausdrucken
alt Beleg angefordert
K -> GA : Beleg entnehmen
else Kein Beleg
K -> GA : Beleg ablehnen
end
GA -> K : Karte zurückgeben
K -> GA : Karte entnehmen
end
end
GA -> K : Vielen Dank / Transaktion beendet
@enduml
PlantUML in VPasCode bearbeiten
Geschäftsprozessmodellierung: Versicherungsanspruchs-System
Aktivitätsdiagramme helfen dabei, Arbeitsabläufe zu visualisieren. Das folgende Beispiel modelliert einen Versicherungsanspruch, wobei Entscheidungspunkte wie die Gültigkeit der Versicherungspolice und die Vollständigkeit der Dokumente erfasst werden.

@startuml VersicherungsanspruchsSystem
start
:Versicherungsnehmer stellt Anspruch ein;
:Anspruch wird im System protokolliert;
if (Ist die Versicherungspolice aktiv und gültig?) dann (ja)
:Weise Anspruch einem Sachbearbeiter zu;
:Benachrichtige Sachbearbeiter über neuen Anspruch;
sonst (nein)
:Sende Ablehnungsnachricht an Versicherungsnehmer;
:Protokolliere Grund: Versicherungspolice inaktiv/ungültig;
stop
endif
:Sachbearbeiter prüft eingereichte Dokumente;
if (Sind alle erforderlichen Dokumente vorhanden?) dann (ja)
:Sachbearbeiter startet Prüfung des Anspruchs;
sonst (nein)
:Fordere fehlende Dokumente vom Versicherungsnehmer an;
:Warte auf zusätzliche Dokumente;
:Prüfe Dokumente erneut;
note right
System wartet auf
Antwort des Versicherungsnehmers
end note
-> zurück zu "Sachbearbeiter prüft eingereichte Dokumente";
endif
:Sachbearbeiter untersucht den Anspruch;
:Kontaktieren von Zeugen/Experten, falls erforderlich;
:Schätzung des Schadens/Verlustbetrags;
if (Ist der Anspruch aufgrund der Versicherungsbedingungen gültig?) dann (ja)
:Berechne genehmigten Betrag;
:Wende Selbstbeteiligung an, falls zutreffend;
sonst (nein)
:Sende Ablehnungsnachricht mit Grund;
:Protokolliere Entscheidung im System;
stop
endif
:Erstelle Zahlungsangebot;
:Schicke Zahlungsangebot an Versicherungsnehmer;
:Versicherungsnehmer prüft Angebot;
if (Akzeptiert der Versicherungsnehmer das Angebot?) dann (ja)
:Verarbeite Zahlung;
:Aktualisiere Anspruchsstatus auf "Erledigt";
:Sende Bestätigung an Versicherungsnehmer;
:Protokolliere Abschlussdetails;
sonst (nein)
:Weiterleitung an Streitbeilegung;
:Verhandeln des Zahlungsangebots;
:Aktualisiere Angebot;
-> zurück zu "Schicke Zahlungsangebot an Versicherungsnehmer";
endif
stop
@enduml
PlantUML in VPasCode bearbeiten
Zustandsmaschinen: Rauchmeldesystem
Für eingebettete Systeme oder IoT-Geräte sind Zustandsdiagramme unverzichtbar. Dieses Beispiel zeigt ein Rauchmeldesystem, das zwischen den Zuständen Bereitschaft, Überwachung und Alarm wechselt.

@startuml Rauchmeldesystem
title Zustandsdiagramm - Rauchmeldesystem
[*] --> Ausschalten
state Ausschalten {
[*] --> KeinStrom
KeinStrom : Gerät ist aus
KeinStrom --> EinSchalten : Taster gedrückt
}
state EinSchalten {
[*] --> Bereitschaft
Bereitschaft : System bereit
Bereitschaft --> Selbsttest : Periodischer Selbsttest (alle 24h)
Bereitschaft --> Überwachung : Überwachung starten (Sensor aktiv)
state Selbsttest {
[*] --> SensorenPrüfen
SensorenPrüfen --> TestBestanden : Alle Sensoren in Ordnung
SensorenPrüfen --> TestFehlgeschlagen : Sensorfehler erkannt
TestBestanden --> Bereitschaft : Zurück zur Bereitschaft
TestFehlgeschlagen --> Fehlerzustand : Fehler melden
}
state Überwachung {
[*] --> KeinRauch
KeinRauch : Normaler Betrieb
KeinRauch --> RauchErkannt : Rauchgehalt > Schwellwert
KeinRauch --> NiedrigeBatterie : Batterie schwach (kabellos)
NiedrigeBatterie --> KeinRauch : Batterie ausgetauscht
state RauchErkannt {
[*] --> ErsteWarnung
ErsteWarnung --> BestätigterRauch : Rauch persistiert > 5 Sekunden
ErsteWarnung --> FalscherAlarm : Rauch verschwindet < 5 Sekunden FalscherAlarm --> KeinRauch : Zurücksetzen
BestätigterRauch --> AlarmAktiv
}
state AlarmAktiv {
[*] --> Alarmsirene : Sirene und Licht aktivieren
Alarmsirene --> BenachrichtigungSenden : Kontrollpanel/App benachrichtigen
BenachrichtigungSenden --> WarteAufZurücksetzen
WarteAufZurücksetzen --> AlarmAktiv : Rauch noch vorhanden
WarteAufZurücksetzen --> SystemZurücksetzen : Zurücksetztaste gedrückt
SystemZurücksetzen --> KeinRauch : System wird zurückgesetzt
}
}
}
state Fehlerzustand {
[*] --> Fehleranzeige : Fehler-LED blinkt
Fehleranzeige --> Ausschalten : Manueller Stromzyklus erforderlich
}
EinSchalten --> Fehlerzustand : Selbsttest fehlgeschlagen
Fehlerzustand --> Ausschalten : Stromzyklus
Ausschalten --> [*] : System abgekoppelt / Batterie entfernt
@enduml
PlantUML in VPasCode bearbeiten
Hochschichtige Architektur: Komponentendiagramm des Kurier-Systems
Komponentendiagramme bieten einen Überblick über die Systemarchitektur auf hoher Ebene. Dieses Beispiel zeigt ein Kurier-Management-System und veranschaulicht, wie Client-Apps, Backend-Dienste, Nachrichtenwarteschlangen und Datenbanken miteinander interagieren.

@startuml Kuriersystem
title Kuriersystem - Komponentendiagramm
' === Komponenten ===
komponente "Kunden-App" als KundenApp
komponente "Kurier-Mobil-App" als KurierApp
komponente "Admin-Web-Dashboard" als AdminWeb
komponente "API-Gateway" als ApiGateway
komponente "Bestell-Dienst" als OrderService
komponente "Zuteilungs-Dienst" als DispatchService
komponente "Verfolgungs-Dienst" als TrackingService
komponente "Zahlungs-Dienst" als PaymentService
komponente "Benachrichtigungs-Dienst" als NotificationService
komponente "Benutzer-Dienst" als UserService
komponente "Nachrichtenwarteschlangen(RabbitMQ/Kafka)" als MessageQueue
komponente "Redis-Cache" als RedisCache
datenbank "PostgreSQL-DB" als SQLDB
datenbank "MongoDBn(Logs/Verfolgungsverlauf)" als MongoLogs
' === Schnittstellen / Ports ===
KundenApp --> ApiGateway : "REST / WebSocket"
KurierApp --> 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 --> KurierApp : "Push über API-Gateway"
DispatchService --> SQLDB
TrackingService --> MessageQueue : "Abonniert Standortaktualisierungen"
TrackingService --> MongoLogs : "Schreibt Verfolgungsverlauf"
TrackingService --> RedisCache : "Cache für aktuelle Position"
PaymentService --> SQLDB
PaymentService --> NotificationService
NotificationService --> MessageQueue : "Benachrichtigungen verarbeiten"
NotificationService --> KundenApp : "Push über API-Gateway"
UserService --> SQLDB
UserService --> RedisCache
' === Hinweise ===
hinweis rechts von OrderService
Verwaltet Paketerstellung,
Preise und Auftragsstatus
ende hinweis
hinweis rechts von DispatchService
Ordnet Aufträge Kurieren zu,
optimiert Routen
ende hinweis
hinweis unten von MessageQueue
Asynchrone Ereignisse: order_created,
location_updated,
delivery_status_changed
ende hinweis
@enduml
PlantUML in VPasCode bearbeiten
Infrastruktur als Code: Bereitstellungsdiagramm
VPasCode unterstützt ebenfalls Bereitstellungsdiagramme, sodass Teams physische Infrastrukturen visualisieren können. Dieses Beispiel zeigt eine AWS-Architektur mit Lastverteilern, EC2-Instanzen und RDS-Datenbanken.

@startuml
knoten "AWS Cloud Route53" als DNS
knoten "VPC (10.0.0.0/16)" {
knoten "Öffentliche Subnetz" {
artefakt "NGINX-Lastverteilung" als ALB
}
knoten "Privates Subnetz-Cluster" {
knoten "EC2-Instanz 1" {
komponente "Node.js-API [Pod 1]" als Pod1
}
knoten "EC2-Instanz 2" {
komponente "Node.js-API [Pod 2]" als Pod2
}
}
knoten "Datenbank-Subnetz" {
datenbank "Amazon RDS (Multi-AZ Aurora)" als Aurora
}
}
DNS --> ALB : Leitet Traffic weiter
ALB --> Pod1 : Round-robin-Lastverteilung
ALB --> Pod2
Pod1 --> Aurora : Verbindungs-Pool
Pod2 --> Aurora
@enduml
PlantUML in VPasCode bearbeiten
Unternehmensarchitektur: ArchiMate-Unterstützung
Für Unternehmensarchitekten unterstützt VPasCode die ArchiMate-Notation, wodurch die Modellierung von Geschäfts-, Anwendungs- und Technologieebenen ermöglicht wird. Dieses Beispiel veranschaulicht die Interaktion zwischen Geschäftsprozessen und zugrundeliegenden Technologiediensten im Kontext eines Internetbrowsers.

@startuml Internet-Browser-Beispiel
!include <archimate/Archimate>
title Archimate-Beispiel - Internet-Browser
'LAYOUT_AS_SKETCH()
'LAYOUT_LEFT_RIGHT()
'LAYOUT_TOP_DOWN()
Gruppierung(geschäft, "Geschäft"){
Geschäftsobjekt(geschaeftsobjekt, "Ein Geschäftsobjekt")
Geschaeftsprozess(einGeschaeftsprozess,"Ein Geschäftsprozess")
GeschaeftsService(itUnterstuetzungService, "IT-Unterstützung für Geschäft (Anwendungs-Dienst)")
}
Gruppierung(anwendung, "Anwendung"){
AnwendungsDatenobjekt(datenobjekt, "Webseiten-Daten n 'on the fly'")
AnwendungsFunktion(webseitenVerhalten, "Verhalten der Webseite")
AnwendungsKomponente(AktiverTeilWebseite, "Aktiver Teil der Webseite n 'on the fly'")
}
Gruppierung(technologie, "Technologie"){
TechnologieArtefakt(imSpeicherItem,"im Speicher / 'on the fly' HTML/JavaScript")
TechnologieDienst(internetBrowser, "Allgemeiner Internet-Browser & Plugin")
TechnologieDienst(internetBrowserPlugin, "Ein Internet-Browser-Plugin")
TechnologieDienst(webServer, "Ein Webserver")
}
Rel_Flow_Left(einGeschaeftsprozess, geschaeftsobjekt, "")
Rel_Serving_Up(itUnterstuetzungService, einGeschaeftsprozess, "")
Rel_Specialization_Up(webseitenVerhalten, itUnterstuetzungService, "")
Rel_Flow_Right(datenobjekt, webseitenVerhalten, "")
Rel_Specialization_Up(datenobjekt, geschaeftsobjekt, "")
Rel_Assignment_Left(AktiverTeilWebseite, webseitenVerhalten, "")
Rel_Specialization_Up(imSpeicherItem, datenobjekt, "")
Rel_Realization_Up(imSpeicherItem, AktiverTeilWebseite, "")
Rel_Specialization_Right(imSpeicherItem,internetBrowser, "")
Rel_Serving_Up(internetBrowser, webseitenVerhalten, "")
Rel_Serving_Up(internetBrowserPlugin, webseitenVerhalten, "")
Rel_Aggregation_Right(internetBrowser, internetBrowserPlugin, "")
Rel_Access_Up(webServer, imSpeicherItem, "")
Rel_Serving_Up(webServer, internetBrowser, "")
@enduml
PlantUML in VPasCode bearbeiten
Datenmodellierung: ERD für Kino-Ticket-System
Entitäts-Beziehungs-Diagramme (ERD) sind entscheidend für die Datenbankgestaltung. VPasCode unterstützt sowohl die Standard- als auch die Chen-ERD-Notation. Dieses Beispiel modelliert ein Kino-Ticket-System und definiert Entitäten wieKunde, Film, Vorstellung, und Buchung.

@startuml
entity "Kunde" as customer {
* customer_id : UUID <>
--
* first_name : VARCHAR(50)
* last_name : VARCHAR(50)
* email : VARCHAR(100) <>
* phone : VARCHAR(20)
* loyalty_points : INT
* registration_date : TIMESTAMP
}
entity "Film" as movie {
* movie_id : UUID <>
--
* title : VARCHAR(200)
* description : TEXT
* duration_minutes : INT
* genre : VARCHAR(50)
* release_date : DATE
* rating : VARCHAR(10)
}
entity "Theater" as theater {
* theater_id : UUID <>
--
* theater_name : VARCHAR(100)
* total_seats : INT
* seat_layout : JSON
}
entity "Vorstellung" as show {
* show_id : UUID <>
--
* movie_id : UUID <>
* theater_id : UUID <>
* show_time : TIMESTAMP
* end_time : TIMESTAMP
* language : VARCHAR(50)
* subtitle : BOOLEAN
* price_regular : DECIMAL(10,2)
* price_vip : DECIMAL(10,2)
}
entity "Sitz" as seat {
* seat_id : UUID <>
--
* theater_id : UUID <>
* row_label : CHAR(2)
* seat_number : INT
* seat_type : VARCHAR(20)
* is_accessible : BOOLEAN
}
entity "Buchung" as booking {
* booking_id : UUID <>
--
* customer_id : UUID <>
* show_id : UUID <>
* booking_time : TIMESTAMP
* total_amount : DECIMAL(10,2)
* status : VARCHAR(20)
* payment_method : VARCHAR(30)
* transaction_id : VARCHAR(100)
}
entity "BookingSeat" as booking_seat {
* booking_id : UUID <<FK,PK>>
* seat_id : UUID <<FK,PK>>
--
* ticket_price : DECIMAL(10,2)
* discount_applied : DECIMAL(10,2)
}
entity "Zahlung" as payment {
* payment_id : UUID <>
--
* booking_id : UUID <>
* amount : DECIMAL(10,2)
* payment_date : TIMESTAMP
* payment_status : VARCHAR(20)
* payment_gateway : VARCHAR(30)
* gateway_reference : VARCHAR(200)
}
entity "Bewertung" as review {
* review_id : UUID <>
--
* customer_id : UUID <>
* movie_id : UUID <>
* rating : INT
* comment : TEXT
* review_date : TIMESTAMP
}
' Beziehungen
customer ||--o{ booking : "platziert"
movie ||--o{ show : "geplant als"
theater ||--o{ show : "veranstaltet"
show ||--o{ booking : "hat"
booking ||--|{ booking_seat : "enthält"
seat ||--o{ booking_seat : "zugeordnet zu"
booking ||--|| payment : "hat"
customer ||--o{ review : "verfasst"
movie ||--o{ review : "erhält"
note right of booking : Status: AUSSTEHEND, BESTÄTIGT, STORNIERT, ABGELAUFEN
note left of seat : seat_type: REGULAR, VIP, COUPLES
note right of payment : payment_status: AUSSTEHEND, ERFOLGREICH, Fehlgeschlagen, RÜCKERSTATTET
@enduml
PlantUML in VPasCode bearbeiten
Mermaid.js: Diagramme, die mit Markdown kompatibel sind
Für Teams, die stark in Markdown dokumentieren (z. B. in GitHub READMEs oder Confluence), ist Mermaid.js die ideale Wahl. VPasCode rendert Mermaid natively im Browser und unterstützt Flussdiagramme, Klassendiagramme, Ablaufdiagramme, Gantt-Diagramme, Mindmaps und vieles mehr.
Entscheidungsflussdiagramm für Gesundheitswesen
Dieses Flussdiagramm führt Patienten durch einen Entscheidungsprozess im Gesundheitswesen, von der Erkennung von Symptomen bis zur Behandlung.

flowchart TD
A[Unwohlsein verspüren oder medizinischen Rat benötigen] --> B{Ist es eine Notlage?}
B -->|Ja| C[Notruf tätigen oder in die Notaufnahme gehen]
B -->|Nein| D[Arzttermin vereinbaren]
D --> E[Termin wahrnehmen]
E --> F[Ärztliche Beurteilung]
F --> G{Diagnose gestellt?}
G -->|Ja| H[Behandlungsplan]
G -->|Nein| I[Untersuchungen anordnen]
I --> J[Ergebnisse der Untersuchungen erhalten]
J --> F
H --> K[Behandlung befolgen]
K --> L{Symptome verbessert?}
L -->|Ja| M[Genesung / Routine-Nachuntersuchung]
L -->|Nein| N[Zurück zum Arzt]
N --> F
Mermaid in VPasCode bearbeiten
Graphviz: Netzwerktopologien und Datenstrukturen
Graphviz verwendet die DOT-Sprache, um komplexe Graphen zu erstellen. Es ist besonders nützlich zur Visualisierung von Netzwerktopologien, Abhängigkeitsbäumen und Datenstrukturen.
Netzwerktopologie eines Rechenzentrums
Dieser Graph zeigt eine vereinfachte Netzwerktopologie eines Rechenzentrums, wobei Hosts über miteinander verbundene Switches mit Trunk-Verbindungen und Failover-Verbindungen verbunden sind.

graph UndirectedSpanningTree {
fontname="Helvetica,Arial,sans-serif"
label="Mesh-Netzwerktopologie des Rechenzentrums – Backbone-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=" Trunk-Verbindung", weight=5]
SwitchAlpha -- Node1
SwitchAlpha -- Node2
SwitchBeta -- Node3
SwitchBeta -- Node4
Node1 -- Node2 [style=dashed, color="#cbd5e1", label=" Failover-Verbindung"]
}
Graphviz in VPasCode bearbeiten
KI-native Automatisierung: Ihre Arbeitsweise beschleunigen
VPasCode ist nicht nur ein Texteditor; es ist ein KI-basierter Assistent. Während die kostenlose Version essentielle Mehrfach-Engine-Unterstützung, Echtzeitvorschau und flexible Exporte (PNG/SVG) bietet, ermöglichen die kostenpflichtigen Funktionen bahnbrechende KI-Funktionen.
Wichtige KI-Funktionen:
-
Natürliche Sprache zu Diagramm:Übersetzen Sie einfache englische Architekturbeschreibungen direkt in saubere, renderbare Code-Skripte.
-
KI-Code-Fehlerbehebung:Stecken Sie bei einem Syntaxfehler fest? Die integrierte KI analysiert Ihren PlantUML-, Mermaid- oder Graphviz-Code und behebt Fehler automatisch.

-
KI-Diagramm-Übersetzung:Übersetzen Sie Texte und Beschriftungen innerhalb Ihrer Diagramme nahtlos in mehrere Sprachen mit einem Klick und bewahren die Syntaxstrukturen dabei unverändert.

Teilen und Zusammenarbeit
VPasCode macht das Teilen problemlos. Sie können eine eindeutige, dauerhafte Web-URL generieren, um Live-Diagramme mit Kollegen oder Kunden für gemeinsame Überprüfungen zu teilen. Für formelle Dokumentation können Sie Ihre Arbeit als hochwertige PNG-Bilder oder skalierbare SVG-Vektorgrafiken herunterladen.
Zugriff auf Premium-Funktionen
Wenn Sie bereits ein Visual Paradigm-Nutzer sind, haben Sie möglicherweise bereits Zugriff auf diese Premium-KI-Funktionen:
-
Visual Paradigm Online Combo Edition (ab oder höher).
-
Visual Paradigm Desktop Professional Edition (ab oder höher) mit einem aktiven Wartungsvertrag.
Hinweis für Desktop-Nutzer: Benutzer der Visual Paradigm Professional Edition (oder höher) mit aktiver Wartung erhalten automatisch vollen Zugriff auf die Web-Apps der VP Online Combo Edition – das bedeutet, dass Sie sofortigen Zugriff auf die Premium-KI-Tools von VPasCode ohne zusätzliche Kosten erhalten!
Tipps und Tricks für agile Teams
-
Versionierung Ihrer Diagramme: Da VPasCode Text ausgibt, speichern Sie Ihre
.puml,.mmd, oder.dotDateien in Ihrem Git-Repository. Dadurch können Sie Änderungen verfolgen, Fehler rückgängig machen und die Entwicklung der Architektur im Laufe der Zeit überprüfen. -
Verwenden Sie Live-Links für Standups:Statt Diagramme für Slack oder Teams abzubilden, teilen Sie die Live-VPasCode-URL. Stakeholder können die aktuellste Version sehen, ohne Dateien herunterladen zu müssen.
-
Nutzen Sie KI für Standardcode:Verwenden Sie die Funktion Natürliche Sprache zu Diagramm, um schnell Skelettcode für komplexe Diagramme zu generieren, und verfeinern Sie diese anschließend manuell. Dies spart Zeit beim Merken der Syntax.
-
Standardisieren Sie Vorlagen:Erstellen Sie wiederverwendbare Code-Snippets für gängige Diagrammtypen (z. B. AWS-Bereitstellungsvorlagen, Mikroservice-Komponentendiagramme) und teilen Sie sie innerhalb des Teams, um Konsistenz zu gewährleisten.
-
Integrieren Sie in CI/CD:Da Diagramme Code sind, können Sie VPasCode-Exporte in Ihre CI/CD-Pipeline integrieren, um aktualisierte Architekturdiagramme automatisch mit jedem Release zu generieren und zu veröffentlichen.
Fazit
VPasCode stellt einen bedeutenden Fortschritt für agile Teams dar, die die Kluft zwischen Code und Dokumentation überbrücken möchten. Durch die Vereinigung von PlantUML, Mermaid.js und Graphviz in einer einzigen, KI-optimierten Plattform beseitigt es die Reibung traditioneller Diagramm-Tools. Für Entwickler und Architekten, die Geschwindigkeit, Präzision und Versionskontrolle schätzen, bietet VPasCode eine nahtlose Möglichkeit, architektonische Dokumentation lebendig, genau und in den Entwicklungsprozess integriert zu halten. Egal, ob Sie eine einfache Benutzerreise oder ein komplexes verteiltes System modellieren – VPasCode stellt sicher, dass Ihre Diagramme so schnell wie Ihr Code fortschreiten.
Referenz
- Umfassender Leitfaden zu VPasCode von Visual Paradigm: Eine detaillierte Übersicht über die Kernarchitektur von VPasCode, die Einheit mehrerer Engines und KI-native Automatisierungsfunktionen.
- Einführung in VPasCode: Die ultimative integrierte Text-zu-Diagramm-Plattform: Die offizielle Ankündigung zur Einführung von VPasCode und dessen Unterstützung für PlantUML, Mermaid.js und Graphviz.
- Klarheit durch Design: Vereinfachung der Infrastruktur-Dokumentation mit VPasCode und Graphviz: Ein Leitfaden, der sich auf die Verwendung von Graphviz innerhalb von VPasCode konzentriert, um klare Infrastruktur- und Netztopologie-Diagramme zu erstellen.
- VPasCode-Funktionen: Eine Zusammenfassung der wichtigsten Funktionen, darunter Echtzeitvorschau, einfaches Teilen und flexible Exporte.
- VPasCode meistern: Der ultimative Leitfaden zur KI-gestützten Diagramm-als-Code-Technologie mit Unterstützung mehrerer Engines: Ein umfassender Leitfaden zur Nutzung von KI-Funktionen wie Fehlerbehebung und Übersetzung innerhalb von VPasCode.
- Sprachbarrieren nativ mit der neuen KI-Diagramm-Übersetzung von VPasCode überwinden: Ein Artikel, der die KI-Diagramm-Übersetzungs-Funktion erläutert und erklärt, wie Beschriftungen lokalisiert werden, ohne die Syntax zu verändern.
- Visual Paradigm Online: Das Hauptportal zum Zugriff auf die Online-Tools von Visual Paradigm, einschließlich VPasCode.
- Bekommen Sie nie wieder Syntax-Probleme: Einführung der KI-Code-Fehlerkorrektur in VPasCode: Ein detaillierter Blick auf die KI-Code-Fehlerkorrekturfunktion und wie sie Entwicklern hilft, Syntaxprobleme sofort zu beheben.
