Erste Schritte mit Visual Paradigm VPasCode dauert weniger als eine Minute. Da die Plattform vollständig cloud-nativ ist, müssen Sie keine Java-Laufzeiten installieren, Node.js-Module konfigurieren oder schwere IDE-Erweiterungsabhängigkeiten herunterladen. Sie können von einer rohen Textsyntax zu einem hochauflösenden visuellen Diagramm in nur drei einfachen Schritten gelangen.
Folgen Sie dieser kurzen Anleitung, um Ihr erstes Diagramm-as-Code (DaC)-Asset zu erstellen, anzupassen und zu teilen.
Schritt 1: Live-Editor öffnen
Navigieren Sie Ihren Browser zur kostenlosen VPasCode Playground. Standardmäßig werden Sie von einer modernen, zweiteiligen Oberfläche begrüßt:
- Das linke Fenster (Code-Editor): Ein leichtgewichtiger, leistungsstarker Text-Editor mit automatischer Syntaxhervorhebung, Zeilennummern und aktiver Fehlererkennung.
- Das rechte Fenster (Live-Vorschau-Fenster): Ein Echtzeit-Diagramm-Renderer, der Ihre visuelle Anordnung automatisch aktualisiert, während Sie Text eingeben oder Ihre Textdarstellung ändern.
Schritt 2: Ihre Engine auswählen und eine Bauplanvorlage einfügen
VPasCode erkennt Ihre Syntax automatisch. Um es in Aktion zu sehen, löschen Sie jeglichen Platzhaltertext im linken Fenster und fügen Sie einen der folgenden Baseline-Beispiele in den Editor ein:
Option A: Markdown-Flussdiagramm (Mermaid-Syntax)
Wenn Sie ein agiles, top-down-Flussdiagramm bevorzugen, verwenden Sie dieses einfache Block:
graph TD
A[Client-Anfrage] --> B{API-Gateway}
B --> |Gültiger Token| C[Auth-Service]
B --> |Ungültiger Token| D[Zugriff verweigert]
C --> E[(Benutzerdatenbank)] 
Option B: Software-Architektur-Komponente (PlantUML-Syntax)
Wenn Sie strukturierte Systemkomponenten mit formaler Begrenzungsrahmung abbilden möchten, verwenden Sie diesen Block:
@startuml
package "Anwendungsebene" {
[Web-App] -rechts-> [API-Gateway]
}
database "Daten-Speicherung" {
[API-Gateway] --> [SQL-Haupt]
[API-Gateway] ..> [Redis-Cache] : "Leseparametrierung"
}
@enduml 
Sobald Sie den Code einfügen, kompiliert das rechte Fenster Ihren Text sofort und zeigt Ihr sauberes, perfekt ausgerichtetes visuelles Diagramm an.
Schritt 3: Ihre Arbeit exportieren und teilen
Sobald Sie mit Ihrer Anordnung zufrieden sind, können Sie Ihr Dokument mithilfe der Arbeitsbereich-Steuerelementleiste am oberen Rand der Oberfläche sofort exportieren oder teilen:
- Teilenbare URL kopieren: Klicken Sie auf Teilen Schaltfläche, um einen sofortigen Link zu generieren. VPasCode verwendet eine Zustandsserialisierung ohne Datenbank, was bedeutet, dass Ihr gesamter Diagramm-Text sicher in den URL-Hash komprimiert wird. Jeder, der auf Ihren Link klickt, kann das exakte Code-Modell sofort anzeigen und bearbeiten.
- Hochauflösendes Vektorformat herunterladen (SVG): Klicken Sie auf SVG exportieren Schaltfläche, um eine skalierbare Vektor-Datei herunterzuladen. Dies ist ideal für saubere Einbettungen in Git-Repositories, Team-Wikis oder interne Dokumentationsdateien für Ingenieure in Markdown-Format.
- Statische Bild-Datei herunterladen (PNG): Klicken Sie auf PNG exportieren um eine hochauflösende Aufnahme zu erhalten, die direkt in Slack, Microsoft Teams oder Designpräsentationen eingefügt werden kann.
Da Sie Ihr erstes Asset gerendert haben, erkunden Sie die nächsten Abschnitte unserer Dokumentation, um die einzelnen PlantUML Playbook, Mermaid Playbook, und Graphviz Playbook Gestaltungsverfahren zu meistern!