Read this post in: en_USes_ESfr_FRid_IDpl_PLzh_CNzh_TW

VPasCode vorstellen: Die ultimative, einheitliche Text-zu-Diagramm-Plattform

EDITION REQUIRED|
DESKTOPCommunity
VP ONLINEFree

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.PlantUML-Klassendiagramm-Code für ein Bibliotheksverwaltungssystem, bearbeitet mit dem Text-zu-Diagramm-Editor VPasCode von Visual Paradigm

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.

VPasCode-Schnittstelle, die Code-Editoren für PlantUML, Mermaid.js und Graphviz sowie die dazugehörigen gerenderten Diagramme anzeigt.

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.
    Eine Abbildung, die zeigt, wie die KI-Funktionalität zur Fehlerbehebung im Code funktioniert
  • KI-Übersetzung:Übersetzen Sie Text und Beschriftungen in Ihren Diagrammen nahtlos mit einem einzigen Klick in mehrere Sprachen.
    Dies ist eine Abbildung, die zeigt, wie die Übersetzungsfunktion in VPasCode funktioniert

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.

PlantUML-Use-Case-Diagramm-Code für ein E-Commerce-System, bearbeitet mit dem Text-zu-Diagramm-Editor VPasCode von Visual Paradigm

@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.

PlantUML-Klassendiagramm-Code für ein Bibliotheksverwaltungssystem, bearbeitet mit dem Text-zu-Diagramm-Editor VPasCode von Visual Paradigm

@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.

PlantUML-Sequenzdiagramm-Code für ein klassisches Geldabhebungs-Szenario an einem Geldautomaten, bearbeitet mit dem Text-zu-Diagramm-Editor VPasCode von Visual Paradigm

@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.

PlantUML-Aktivitätsdiagramm-Code für ein Versicherungsanspruchs-System, bearbeitet mit dem Live-Text-zu-Diagramm-Editor VPasCode von Visual Paradigm

@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.

PlantUML-Zustandsdiagramm-Code für ein Rauchmeldesystem, bearbeitet mit dem Text-zu-Diagramm-Editor VPasCode von Visual Paradigm

@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.

PlantUML-Komponentendiagramm-Code für ein Kuriersystem, bearbeitet mit dem Text-zu-Diagramm-Editor VPasCode von Visual Paradigm

@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

PlantUML-Deploymentsdiagramm-Code für eine Beispielarchitektur, bearbeitet mit dem Text-zu-Diagramm-Editor VPasCode von Visual Paradigm

@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.

PlantUML-ArchiMate-Diagramm-Code für einen Internetbrowser, bearbeitet mit dem Live-Text-zu-Diagramm-Editor VPasCode von Visual Paradigm

@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

PlantUML-Entity-Relationship-Diagramm-Code (ERD) für ein Kinoticketsystem, bearbeitet mit dem Text-zu-Diagramm-Editor VPasCode von Visual Paradigm

@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.

Mermaid.js-Flussdiagramm-Code für einen 'Arztbesuch'-Prozess, bearbeitet mit dem Live-Text-zu-Diagramm-Editor VPasCode von Visual Paradigm

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.

Graphviz-Code für ein Beispielgraph, bearbeitet mit dem Live-Text-zu-Diagramm-Editor VPasCode von Visual Paradigm

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:

https://www.vpascode.com/

Probieren Sie den Echtzeit-Editor aus und revolutionieren Sie die Art und Weise, wie Sie Software und Systeme entwerfen!

Nach oben scrollen