Einführung
In der sich rasch entwickelnden Landschaft der Softwareentwicklung und Systemarchitektur ist Klarheit Währung. Jahrzehntelang haben Fachleute auf Drag-and-Drop-Oberflächen zurückgegriffen, um Diagramme zu erstellen, ein Prozess, der oft zeitaufwendig, schwer versionierbar und anfällig für Inkonsistenzen ist. Da Teams DevOps-Praktiken und Infrastructure-as-Code (IaC)-Methodologien übernehmen, ist die Nachfrage nach „Diagramm-as-Code“ (DaC) stark angestiegen.
Eintreten VPasCode (Visual Paradigm als Code), eine brandneue, einheitliche Plattform, die darauf abzielt, die Kluft zwischen textueller Präzision und visueller Klarheit zu überbrücken. Egal ob Sie ein Softwareentwickler sind, der Klassensstrukturen definiert, ein Systemarchitekt, der Cloud-Infrastrukturen abbildet, oder ein Business-Analyst, der Abläufe skizziert – VPasCode verwandelt Text innerhalb von Sekunden in wunderschöne, professionelle Diagramme. Durch die Integration der weltweit beliebtesten Open-Source-Diagramm-Engines in eine einzige, nahtlose webbasierte Umgebung beseitigt VPasCode Kontextwechsel und ermöglicht es Teams, komplexe Visualisierungen mit beispiellosen Effizienz zu erstellen, vorzusehen und zu teilen.

Was ist VPasCode?
VPasCode ist eine integrierte Umgebung, die eine bequeme, kostenlose Code-Editor mit einem leistungsstarken Diagramm-Renderer. Sie ist für alle gedacht, die die Geschwindigkeit, Wiederaufbaubarkeit und die Vorteile der Versionskontrolle beim Schreiben von Code schätzen, aber gleichzeitig die kommunikative Kraft visueller Diagramme benötigen.
Da es sich um eine vollständig integrierte Umgebung handelt, unterstützt VPasCode theoretisch alle Syntaxregeln für die weltweit beliebtesten Diagramm-Engines. Bei der Einführung unterstützt es vollständig:
-
PlantUML-Editor & Renderer: Erstellen Sie robuste Diagramme für Unternehmens- und Softwarearchitekturen.
-
Mermaid.js-Editor & Renderer: Rendern Sie moderne, markdown-inspirierte Diagramme und Zeitleisten direkt in Ihrem Browser.
-
Graphviz-Editor & Renderer: Nutzen Sie die Stärke der DOT-Sprache für komplexe Netzwerk- und Datenstrukturen.
Diese Mehr-Engine-Unterstützung stellt sicher, dass unabhängig von Ihrer bevorzugten Syntax oder Ihren veralteten Dokumentationsstandards VPasCode als universeller Sandbox für Ihre visuellen Anforderungen dient.

Unterstützte Diagrammtypen im Überblick
VPasCode unterstützt eine unglaublich umfangreiche Bibliothek an Diagrammtypen. Hier ist ein Überblick darüber, was Sie bereits jetzt erstellen können:
PlantUML-Integration
-
Sequenz-, Use-Case-, Klassen- und Objektdiagramme
-
Aktivitäts-, Komponenten-, Bereitstellungs- und Zustandsdiagramme
-
ArchiMate- und C4-Modelle
-
Entitäts-Beziehungs-Diagramme (ERD) und Chen-ERD
-
Netzwerkdigramme, WBS (Arbeitsaufbauschema) und Zeitdiagramme
Mermaid.js-Integration
-
Flussdiagramme, Klassen- und Ablaufdiagramme
-
Entitäts-Beziehungs-Diagramme (ERD) & Zustandsdiagramme
-
Mindmaps, Zeitlinien und Benutzerreisekarten
-
Gantt-Diagramme, Git-Graphen und Kanban-Boards
-
C4-Modelle, Quadrant-Diagramme und Anforderungsdiagramme
Graphviz-Integration
-
Gerichteter Graph & Graph
-
Flussdiagramme & Datenflussdiagramme
-
Organigramme & Cluster
Funktionen & Funktionen
Wir möchten, dass VPasCode für alle zugänglich ist, weshalb wir unsere kostenlose Ebene mit essenziellen Tools ausgestattet haben, während wir für Premium-Nutzer bahnbrechende, künstliche Intelligenz unterstützte Funktionen anbieten.
Kostenlose Funktionen für alle Nutzer:
-
Unterstützung mehrerer Engines:Vollzugriff auf PlantUML, Mermaid.js und Graphviz.
-
Textbasierte Beschreibungen:Erstellen Sie komplexe Diagramme ausschließlich durch intuitive Code-Eingabe.
-
Echtzeit-Vorschau:Sehen Sie Ihr Diagramm sofort auf der Seite Ihres Bildschirms aktualisiert, während Sie tippen.
-
Einfache Freigabe:Generieren Sie eine eindeutige URL, um Ihr aktives Diagramm einfach mit Kollegen oder Kunden zu teilen.
-
Flexible Exporte:Laden Sie Ihre fertige Arbeit als hochwertige PNG Bilder oder skalierbare SVG Vektorgrafiken.
Verbessern Sie Ihren Arbeitsablauf mit kostenpflichtigen Funktionen:
-
KI-basierte Fehlerkorrektur 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 den Text und die Beschriftungen in Ihren Diagrammen nahtlos in mehrere Sprachen mit einem Klick und beseitigen Sie Sprachbarrieren in internationalen Teams.

So greifen Sie auf die zahlbaren Funktionen von VPasCode zu
Wenn Sie bereits ein bestehender Visual Paradigm-Nutzer sind, haben Sie möglicherweise bereits Zugang zu unseren 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: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!
PlantUML und Mermaid in VPasCode – Diagrammbeispiele
PlantUML-Anwendungsfalldiagramm: E-Commerce-System
Dieses Anwendungsfalldiagramm zeigt die wichtigsten Interaktionen innerhalb eines E-Commerce-Kassen-Systems. Ein Kunde kann seinen Warenkorb einsehen und zur Kasse gehen, wo Authentifizierung, Gutscheinanwendung und Kreditkartenzahlung über externe Dienste wie einen Identitätsanbieter und einen Zahlungsprozessor integriert sind.

@startuml
links nach rechts Richtung
aktor "E-Commerce-Kunde" als kunde
aktor "Identitätsanbieter" als authPool
aktor "Zahlungsprozessor" als stripe
rechteck "Grenze des Kassen-Systems" {
usecase "Authentifizieren" als UC_Auth
usecase "Warenkorb anzeigen" als UC_Cart
usecase "Zur Kasse gehen" als UC_Check
usecase "Gutschein anwenden" als UC_Promo
usecase "Per Kreditkarte bezahlen" als UC_Pay
}
kunde --> UC_Cart
kunde --> UC_Check
UC_Check ..> UC_Auth : <>
UC_Check <.. UC_Promo : <>
UC_Check ..> UC_Pay : <>
UC_Auth --> authPool
UC_Pay --> stripe
@enduml
PlantUML in VPasCode bearbeiten
PlantUML-Klassendiagramm: Bibliotheksverwaltungssystem
Dieses Klassendiagramm modelliert ein Bibliotheksverwaltungssystem und zeigt die wichtigsten Entitäten, die an der Katalogverwaltung, Mitgliedschaftsdiensten und Verleihvorgängen beteiligt sind. Die Gestaltung nutzt Vererbung, um verschiedene Arten von Bibliotheksmaterialien (wie Bücher, Zeitschriften und DVDs) darzustellen, während Assoziationen zwischen Mitgliedern, Bibliothekaren, Ausleihprotokollen und Strafen veranschaulichen, wie Gegenstände ausgeliehen, zurückgegeben und während ihres Lebenszyklus verwaltet werden.

@startuml
class Bibliothek {
- name: String
- adresse: String
- telefon: String
+ addMember(member: Mitglied): void
+ removeMember(memberId: String): void
+ addItem(item: Bibliotheksobjekt): void
+ removeItem(itemId: String): void
+ lendItem(memberId: String, itemId: String): boolean
+ returnItem(itemId: String): boolean
}
class Bibliotheksobjekt {
# itemId: String
# titel: String
# verlag: String
# publikationsjahr: int
# istVerfuegbar: boolean
+ getDetails(): String
+ setAvailability(status: boolean): void
}
abstrakte class Buch {
- isbn: String
- autor: String
- seitenanzahl: int
+ getAuthor(): String
}
class EBook {
- dateigroesseMB: double
- format: String
- downloadUrl: String
+ download(): void
}
class PrintBuch {
- regalposition: String
- zustand: String
+ getShelfLocation(): String
}
class Zeitschrift {
- ausgabenummer: int
- bandnummer: int
- umschlagdatum: Datum
}
class DVD {
- dauerMinuten: int
- regisseur: String
- sprache: String
- unterschriftsverfuegbar: boolean
}
class Mitglied {
- mitgliedsId: String
- name: String
- email: String
- telefon: String
- mitgliedsdatum: Datum
+ borrowItem(item: Bibliotheksobjekt): boolean
+ returnItem(item: Bibliotheksobjekt): boolean
+ getBorrowedItems(): Liste
}
class Ausleihprotokoll {
- protokollId: String
- ausleihdatum: Datum
- rueckgabedatum: Datum
- rueckgabedatum: Datum
- isOverdue(): boolean
- calculateFine(): doppelt
}
class Strafe {
- strafeId: String
- betrag: doppelt
- ausstellungsdatum: Datum
- istBezahlt: boolean
+ payFine(): void
}
class Bibliothekar {
- mitarbeiterId: String
- abteilung: String
+ processBorrowing(member: Mitglied, item: Bibliotheksobjekt): void
+ processReturn(item: Bibliotheksobjekt): void
+ generateReport(): void
+ manageInventory(): void
}
' Vererbungsbeziehungen
Bibliotheksobjekt <|-- Buch
Bibliotheksobjekt <|-- Zeitschrift
Bibliotheksobjekt <|-- DVD
Buch <|-- EBook
Buch <|-- PrintBuch
' 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 : bezieht sich auf >
Ausleihprotokoll "1" -- "0..*" Strafe : erzeugt >
' Assoziation
Bibliothekar --> Ausleihprotokoll : verwaltet >
Mitglied --> Ausleihprotokoll : erstellt >
note top of Bibliothek : Zentrales System, dasnMitglieder, Gegenstände und Verleih verwaltet
note right of Bibliotheksobjekt : Abstrakte Basisklassenfür alle Bibliotheksmaterialien
@enduml
PlantUML in VPasCode bearbeiten
PlantUML-Sequenzdiagramm: Bargeldabhebung am Geldautomaten
Dieses Sequenzdiagramm zeigt die Interaktionen bei einer Bargeldabhebung am Geldautomaten, von der Karteinlage und der PIN-Überprüfung bis zur Bargeldausgabe und der Kontostandänderung. Es hebt die Kommunikation zwischen dem Kunden, dem Geldautomaten, dem Bankensystem und der Kundenkontodatenbank hervor und modelliert auch alternative Abläufe wie ungültige PIN-Versuche, unzureichende Mittel und die optionale Ausdruckserstellung von Quittungen.

@startuml
' Titel
title Bargeldabhebung am Geldautomaten - Sequenzdiagramm
' Akteure und Teilnehmer
aktor Kunde als C
teilnehmer "Geldautomat" als ATM
teilnehmer "Bankensystem" als BS
datenbank "Kundenkonto" als DB
' Ablauf
C -> ATM : Karte einlegen
ATM -> ATM : Karteninformationen lesen
ATM -> C : PIN abfragen
C -> ATM : PIN eingeben
ATM -> BS : Karte und PIN überprüfen
BS -> DB : Anmeldeinformationen prüfen
DB --> BS : Überprüfungsresultat
alt Ungültige PIN
BS --> ATM : Ungültige PIN
ATM -> C : Ungültige PIN, erneut versuchen
note right: Nach 3 fehlgeschlagenen VersuchennKarte eingeschlossen
else Gültige PIN
BS --> ATM : Gültige PIN
ATM -> C : Hauptmenü anzeigen
C -> ATM : Abhebung auswählen
ATM -> C : Betrag anfordern
C -> ATM : Betrag eingeben
ATM -> BS : Kontostand und Limit prüfen
BS -> DB : Kontostand abfragen
DB --> BS : Aktueller Kontostand
alt Unzureichende Mittel
BS --> ATM : Unzureichender Kontostand
ATM -> C : Transaktion abgelehntn(Kontostand anzeigen)
C -> ATM : Transaktion abbrechen
ATM -> C : Karte zurückgeben
else Ausreichende Mittel
BS --> ATM : Genehmigt
ATM -> ATM : Bargeld ausgeben
ATM -> C : Bargeld ausgeben
C -> ATM : Bargeld entnehmen
ATM -> BS : Bargeldausgabe bestätigen
BS -> DB : Konto belasten und Transaktion protokollieren
DB --> BS : Aktualisierung abgeschlossen
BS --> ATM : Transaktion abgeschlossen
ATM -> C : Quittung ausdrucken
alt Quittung gewünscht
C -> ATM : Quittung entnehmen
else Keine Quittung
C -> ATM : Quittung ablehnen
end
ATM -> C : Karte zurückgeben
C -> ATM : Karte entnehmen
end
end
ATM -> C : Vielen Dank / Transaktion beendet
@enduml
PlantUML in VPasCode bearbeiten
PlantUML-Aktivitätsdiagramm: Versicherungsanspruchs-System
Dieses Aktivitätsdiagramm modelliert den End-to-End-Workflow eines Versicherungsanspruchs-Verarbeitungssystems, von der Antragstellung über Validierung, Untersuchung bis zur Abwicklung. Es erfasst wichtige Entscheidungspunkte wie Versicherungsanspruchsberechtigung, Vollständigkeit der Dokumente, Gültigkeit des Anspruchs und Akzeptanz der Abwicklung, während es sowohl erfolgreiche als auch Ausnahmepfade, einschließlich der Ablehnung des Anspruchs und der Streitbeilegung, darstellt.

@startuml InsuranceClaimSystem
start
:Versicherungsnehmer stellt Anspruch ein;
:Anspruch wird im System protokolliert;
if (Ist die Versicherung aktiv und gültig?) dann (ja)
:Weise Anspruch einem Schadensbearbeiter zu;
:Benachrichtige Schadensbearbeiter über neuen Anspruch;
sonst (nein)
:Sende Ablehnungsmitteilung an Versicherungsnehmer;
:Protokolliere Grund: Versicherung inaktiv/ungültig;
stop
endif
:Schadensbearbeiter prüft eingereichte Dokumente;
if (Sind alle erforderlichen Dokumente vorhanden?) dann (ja)
:Schadensbearbeiter startet die Anspruchsprüfung;
sonst (nein)
:Fordere fehlende Dokumente vom Versicherungsnehmer an;
:Warte auf zusätzliche Dokumente;
:Überprüfe Dokumente erneut;
notiz rechts
System wartet auf
Antwort des Versicherungsnehmers
ende notiz
-> zurück zu "Schadensbearbeiter prüft eingereichte Dokumente";
endif
:Schadensbearbeiter untersucht den Anspruch;
:Kontaktiere Zeugen/Experten, falls erforderlich;
:Schätze Schadens- oder Verlusthöhe ab;
if (Ist der Anspruch aufgrund der Versicherungsbedingungen gültig?) dann (ja)
:Berechne genehmigten Betrag;
:Wende Selbstbeteiligung an, falls zutreffend;
sonst (nein)
:Sende Ablehnungsmitteilung mit Begründung;
:Protokolliere Entscheidung im System;
stop
endif
:Erstelle Abwicklungsangebot;
:Senden Sie das Abwicklungsangebot an den Versicherungsnehmer;
:Versicherungsnehmer prüft das Angebot;
if (Akzeptiert der Versicherungsnehmer das Angebot?) dann (ja)
:Bearbeite Zahlung;
:Aktualisiere Anspruchsstatus auf "Abgeschlossen";
:Sende Bestätigung an Versicherungsnehmer;
:Protokolliere Schließdetails;
sonst (nein)
:Weiterleitung an Streitbeilegung;
:Verhandeln Sie über die Abwicklung;
:Aktualisieren Sie das Angebot;
-> zurück zu "Senden Sie das Abwicklungsangebot an den Versicherungsnehmer";
endif
stop
@enduml
PlantUML in VPasCode bearbeiten
PlantUML-Zustandsdiagramm: Rauchdetektionssystem
Dieses Zustandsdiagramm veranschaulicht das Verhalten eines Rauchdetektionssystems, während es zwischen Betriebszuständen wie Bereitschaft, Überwachung, Rauchdetektion, Alarmaktivierung und Fehlerbehandlung wechselt. Es zeigt, wie das System auf Ereignisse wie Stromänderungen, Ergebnisse der Selbstprüfung, Rauchdetektion, niedrige Batteriebedingungen und vom Benutzer ausgelöste Neustarts reagiert, um eine zuverlässige Brandüberwachung und Warnung sicherzustellen.

@startuml SmokeDetectionSystem
title Zustandsdiagramm - Rauchdetektionssystem
[*] --> PowerOff
zustand PowerOff {
[*] --> NoPower
NoPower : Gerät ist aus
NoPower --> PowerOn : Tastendruck auf Ein/Aus
}
zustand PowerOn {
[*] --> Standby
Standby : System bereit
Standby --> SelfCheck : Periodische Selbstprüfung (alle 24h)
Standby --> Monitoring : Überwachung starten (Sensor aktiv)
zustand SelfCheck {
[*] --> TestingSensors
TestingSensors --> TestPass : Alle Sensoren in Ordnung
TestingSensors --> TestFail : Sensorfehler erkannt
TestPass --> Standby : Zurück zu Bereitschaft
TestFail --> ErrorState : Fehler melden
}
zustand Monitoring {
[*] --> NoSmoke
NoSmoke : Normalbetrieb
NoSmoke --> SmokeDetected : Rauchgehalt > Schwellwert
NoSmoke --> LowBattery : Batterie schwach (kabellos)
LowBattery --> NoSmoke : Batterie ausgetauscht
zustand SmokeDetected {
[*] --> InitialAlert
InitialAlert --> ConfirmedSmoke : Rauch persistiert > 5 Sekunden
InitialAlert --> FalseAlarm : Rauch verschwindet < 5 Sekunden FalseAlarm --> NoSmoke : Zurücksetzen
ConfirmedSmoke --> AlarmActive
}
zustand AlarmActive {
[*] --> SoundAlarm : Sirene und Licht aktivieren
SoundAlarm --> SendNotification : Kontrollpaneel/App benachrichtigen
SendNotification --> WaitForReset
WaitForReset --> AlarmActive : Rauch noch vorhanden
WaitForReset --> ResetSystem : Zurücksetztaste gedrückt
ResetSystem --> NoSmoke : System wird zurückgesetzt
}
}
}
zustand ErrorState {
[*] --> FaultIndicator : Fehler-LED blinkt
FaultIndicator --> PowerOff : Manueller Stromzyklus erforderlich
}
PowerOn --> ErrorState : Selbstprüfung fehlgeschlagen
ErrorState --> PowerOff : Stromzyklus
PowerOff --> [*] : System abgekoppelt / Batterie entfernt
@enduml
PlantUML in VPasCode bearbeiten
PlantUML-Komponentendiagramm: Kurier-System
Dieses Komponentendiagramm zeigt die Hoch-Level-Architektur eines Kurier-Management-Systems und veranschaulicht, wie Client-Anwendungen, Backend-Dienste, Nachrichteninfrastruktur, Caches und Datenbanken miteinander interagieren, um Paketlieferungen zu unterstützen. Es zeigt die Aufgabentrennung zwischen Diensten wie Auftragsverwaltung, Dispatching, Tracking, Zahlungen, Benachrichtigungen und Benutzerverwaltung, wobei sowohl synchrone API-Kommunikation als auch asynchrone ereignisgesteuerte Verarbeitung hervorgehoben werden.

@startuml CourierSystem
title Kurier-System - Komponentendiagramm
' === Komponenten ===
komponente "Kunden-App" als CustomerApp
komponente "Kurier-Mobil-App" als CourierApp
komponente "Admin-Web-Dashboard" als AdminWeb
komponente "API-Gateway" als ApiGateway
komponente "Auftragsdienst" als OrderService
komponente "Dispatch-Dienst" als DispatchService
komponente "Tracking-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/Verfolgungshistorie)" als 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 : "Abonniere Standortaktualisierungen"
TrackingService --> MongoLogs : "Schreibe Verfolgungshistorie"
TrackingService --> RedisCache : "Cache für aktuelle Position"
PaymentService --> SQLDB
PaymentService --> NotificationService
NotificationService --> MessageQueue : "Benachrichtigungen verarbeiten"
NotificationService --> CustomerApp : "Push über API-Gateway"
UserService --> SQLDB
UserService --> RedisCache
' === Hinweise ===
notiz rechts von OrderService
Verwaltet Paketerstellung,
Preise und Auftragsstatus
ende notiz
notiz rechts von DispatchService
Ordnet Aufträge Kurieren zu,
optimiert Routen
ende notiz
notiz unten von MessageQueue
Asynchrone Ereignisse: order_created,
location_updated,
delivery_status_changed
ende notiz
@enduml
PlantUML in VPasCode bearbeiten
PlantUML-Bereitstellungsdiagramm: Beispielarchitektur

@startuml
knoten "AWS Cloud Route53" als DNS
knoten "VPC (10.0.0.0/16)" {
knoten "Öffentliche Subnetz" {
artefakt "NGINX-Lastenausgleich" 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 um
ALB --> Pod1 : Round-robin-Lastverteilung
ALB --> Pod2
Pod1 --> Aurora : Verbindungs-Pool
Pod2 --> Aurora
@enduml
PlantUML in VPasCode bearbeiten
PlantUML-ArchiMate-Beispiel: Internet-Browser
Dieses ArchiMate-Diagramm veranschaulicht, wie die Ebenen Geschäftsprozesse, Anwendungen und Technologie miteinander interagieren, um webbasierte Geschäftsleistungen über einen Internetbrowser zu unterstützen. Es zeigt die Beziehungen zwischen Geschäftsprozessen, dynamisch generierten Webseitenkomponenten und Daten, Browserdiensten und Plug-ins sowie der zugrundeliegenden Webserver-Infrastruktur, die die Anwendungserfahrung bereitstellt und unterstützt.

@startuml Internet-Browser-Beispiel
!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-Unterstützung für das Geschäft (Anwendungsdienst)")
}
Grouping(application, "Anwendung"){
Application_DataObject(dataObject, "Webseiten-Daten n 'on the fly'")
Application_Function(webpageBehaviour, "Verhalten der Webseite")
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, "Allgemeiner Internet-Browser & Plug-in")
Technology_Service(internetBrowserPlugin, "Ein Internet-Browser-Plug-in")
Technology_Service(webServer, "Ein 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 in VPasCode bearbeiten
PlantUML ERD-Beispiel: Kino-Ticket-System

@startuml
entity "Kunde" as customer {
* customer_id : UUID <>
--
* Vorname : VARCHAR(50)
* Nachname : VARCHAR(50)
* E-Mail : VARCHAR(100) <>
* Telefon : VARCHAR(20)
* Treuepunkte : INT
* Registrierungsdatum : TIMESTAMP
}
entity "Film" as movie {
* movie_id : UUID <>
--
* Titel : VARCHAR(200)
* Beschreibung : TEXT
* Dauer (Minuten) : INT
* Genre : VARCHAR(50)
* Veröffentlichungsdatum : DATE
* Bewertung : VARCHAR(10)
}
entity "Kino" as theater {
* theater_id : UUID <>
--
* Kino-Name : VARCHAR(100)
* Gesamtanzahl der Sitze : INT
* Sitzanordnung : JSON
}
entity "Vorstellung" as show {
* show_id : UUID <>
--
* movie_id : UUID <>
* theater_id : UUID <>
* Vorstellungszeit : TIMESTAMP
* Endezeit : TIMESTAMP
* Sprache : VARCHAR(50)
* Untertitel : BOOLEAN
* Preis regulär : DECIMAL(10,2)
* Preis VIP : DECIMAL(10,2)
}
entity "Sitz" as seat {
* seat_id : UUID <>
--
* theater_id : UUID <>
* Reihenbezeichnung : CHAR(2)
* Sitznummer : INT
* Sitztyp : VARCHAR(20)
* barrierefrei : BOOLEAN
}
entity "Buchung" as booking {
* booking_id : UUID <>
--
* customer_id : UUID <>
* show_id : UUID <>
* Buchungszeit : TIMESTAMP
* Gesamtbetrag : DECIMAL(10,2)
* Status : VARCHAR(20)
* Zahlungsmethode : VARCHAR(30)
* Transaktions-ID : VARCHAR(100)
}
entity "Buchungssitz" as booking_seat {
* booking_id : UUID <<FK,PK>>
* seat_id : UUID <<FK,PK>>
--
* Ticketpreis : DECIMAL(10,2)
* Rabatt angewendet : DECIMAL(10,2)
}
entity "Zahlung" as payment {
* payment_id : UUID <>
--
* booking_id : UUID <>
* Betrag : DECIMAL(10,2)
* Zahlungsdatum : TIMESTAMP
* Zahlungsstatus : VARCHAR(20)
* Zahlungsgateway : VARCHAR(30)
* Gateway-Referenz : VARCHAR(200)
}
entity "Bewertung" as review {
* review_id : UUID <>
--
* customer_id : UUID <>
* movie_id : UUID <>
* Bewertung : INT
* Kommentar : TEXT
* Bewertungsdatum : TIMESTAMP
}
' Beziehungen
customer ||--o{ booking : "platziert"
movie ||--o{ show : "ist geplant als"
theater ||--o{ show : "veranstaltet"
show ||--o{ booking : "hat"
booking ||--|{ booking_seat : "enthält"
seat ||--o{ booking_seat : "ist zugewiesen an"
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 : sitztyp: REGULÄR, VIP, PAARE
note right of payment : zahlungsstatus: AUSSTEHEND, ERFOLGREICH, Fehlgeschlagen, RÜCKERSTATTET
@enduml
PlantUML in VPasCode bearbeiten
Mermaid-Flussdiagramm: Arzt aufsuchen
Dieses Flussdiagramm veranschaulicht einen typischen Entscheidungsprozess im Gesundheitswesen, der Patienten von der ersten Erkennung von Symptomen über Diagnose, Untersuchungen, Behandlung bis zur Genesung führt. Es hebt wichtige Entscheidungspunkte hervor, darunter die Notfallbewertung, die diagnostische Beurteilung und die Wirksamkeit der Behandlung, und zeigt, wie unbehandelte Symptome eine zusätzliche medizinische Beratung und Neubewertung erfordern können.

flowchart TD
A[Unwohlsein verspüren oder medizinischen Rat benötigen] --> B{Ist es ein Notfall?}
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-Graph
Dieses Diagramm stellt eine vereinfachte Netztopologie eines Rechenzentrums dar und veranschaulicht, wie Hosts über ein Netzwerk aus miteinander verbundenen Switches verbunden sind. Es hebt die primären Kommunikationspfade zwischen Netzwerkgeräten hervor, einschließlich einer Trunk-Verbindung zwischen Switches und einer sekundären Failover-Verbindung, die im Falle von Netzwerkstörungen Redundanz und Widerstandsfähigkeit gewährleistet.

graph UngerichteterSpannbaum {
fontname="Helvetica,Arial,sans-serif"
label="Mesh-Netztopologie 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
Kernarchitektur & Multi-Engine-Integration
VPasCode ist nicht nur ein weiteres Diagramm-Tool; es ist eine einheitliche Arbeitsumgebung, die die weltweit beliebtesten Diagrammsyntaxen in einem nahtlosen Cloud-Editor vereint. Sein echtes Multi-Engine-Unterstützung ermöglicht die native Analyse und Darstellung von PlantUML, Mermaid.js und Graphviz und stellt die Kompatibilität mit bestehenden Dokumentationsstandards sicher. Die Echtzeit-Vorschau-Funktion bietet eine Seiten-zu-Seite-Anzeige, die Grafiken sofort live rendert, während Sie Ihren Skript eingeben, und seine zero-setup-Cloud-Zugriff bedeutet, dass es vollständig im Browser läuft, ohne Software-Downloads oder lokale Abhängigkeiten.
KI-native Automatisierung
VPasCode nutzt künstliche Intelligenz, um die Hürden im Diagramm-Entwicklungsprozess zu beseitigen:
-
Natürliche Sprache zu Diagramm: Übersetzt einfache englische Architekturbeschreibungen direkt in saubere, renderbare Code-Skripte.
-
KI-Code-Fehlerbehebung: Erkennt defekte Skripte und bietet eine „KI-beheben“-Option, um Syntaxfehler sofort zu beheben.
-
KI-Diagrammübersetzung: Übersetzt Diagrammvariablen, Beschriftungen und Titel in mehrere Zielsprachen mit zwei Klicks, wobei die Syntaxstrukturen unverändert bleiben.
Teilbarkeit & Integration
Entwickelt für moderne Zusammenarbeitsworkflows bietet VPasCode flexible visuelle Exporte, sodass Benutzer Layouts sofort als hochauflösende PNGs oder skalierbare Vektorgrafiken (SVG) herunterladen können. Die Funktion zum Live-Link-Teilen generiert eine eindeutige, dauerhafte Web-URL für sofortige gemeinsame Überprüfungen und Präsentationen. Darüber hinaus speichert es Diagramm-Layouts als rohe Textdateien, was es git-nativ freundlich macht und direkte Versionskontrolle innerhalb standardmäßiger Anwendungs-CI/CD-Pipelines ermöglicht.
Fazit
VPasCode stellt einen bedeutenden Fortschritt dar, wie technische Teams komplexe Systeme visualisieren. Durch die Vereinigung von PlantUML, Mermaid.js und Graphviz in einer einzigen, künstlich-intelligenten Plattform löst es die entscheidenden Probleme der traditionellen Diagrammerstellung: Inkonsistenz, Fehlen von Versionskontrolle und langsame Iterationszyklen. Für Organisationen, die sich den Prinzipien von Agile und DevOps verpflichtet fühlen, bietet VPasCode eine straffe, effiziente und kooperative Methode, um lebendige Dokumentation aufrechtzuerhalten, die sich gemeinsam mit dem Codebasen entwickelt. Ob Sie einen Syntaxfehler mit KI-Unterstützung debuggen oder ein Diagramm für einen globalen Stakeholder übersetzen – VPasCode stellt sicher, dass Ihre visuelle Kommunikation ebenso robust und zuverlässig ist wie Ihr Code.
Quellen
- Kompletter Leitfaden zu VPasCode von Visual Paradigm: Ein ausführlicher Überblick über die Funktionen, Fähigkeiten und Einsatzmöglichkeiten von VPasCode für Softwareentwickler und Architekten.
- Einführung von VPasCode: Die ultimative integrierte Text-zu-Diagramm-Plattform: Die offizielle Ankündigung der Veröffentlichung mit detaillierten Informationen zur Mehr-Engine-Unterstützung für PlantUML, Mermaid.js und Graphviz.
- Klarheit durch Design: Vereinfachung der Infrastrukturdokumentation mit VPasCode und Graphviz: Ein Leitfaden, der sich darauf konzentriert, Graphviz innerhalb von VPasCode für eine klare Dokumentation von Infrastruktur und Netztopologie einzusetzen.
- VPasCode-Funktionen: Eine Zusammenfassung der Kernfunktionen von VPasCode, einschließlich Echtzeitvorschau, Freigabemöglichkeiten und Exportoptionen.
- VPasCode meistern: Der ultimative Leitfaden zur KI-gestützten Diagramm-as-Code-Technologie mit Mehr-Engine-Unterstützung: Ein umfassender Leitfaden zur Nutzung der KI-Funktionen und Mehr-Engine-Unterstützung in VPasCode zur effizienten Diagrammerstellung.
- Sprachbarrieren nativ mit der neuen KI-Diagrammübersetzung von VPasCode überwinden: Ein Artikel, der die KI-Übersetzungs-Funktion erläutert, die Benutzern ermöglicht, Diagramm-Beschriftungen und Texte in mehrere Sprachen zu lokalisieren.
- VP Online: Die webbasierte Plattform, auf der VPasCode gehostet wird und cloudbasierte Diagramm-Tools anbietet.
- Bekommen Sie nie wieder Syntax-Fehler: Einführung der KI-Code-Fehlerbehebung in VPasCode: Eine Versionshinweis, der die KI-gestützte Fehlerbehebung beschreibt, die Benutzern hilft, Syntaxprobleme in ihren Diagramm-Codes zu beheben.


