VPasCode ist eine browserbasierte Arbeitsumgebung zum Erstellen und Anzeigen von Diagrammen aus textbasiertem Code. Es unterstützt Diagrammsprachen wie PlantUML, Mermaid, Graphviz und D2 und vereint Code-Editierung, Live-Rendering und KI-gestützte Werkzeuge an einem Ort. Sie schreiben oder generieren ein Diagrammskript, und VPasCode rendert es als visuelles Diagramm.
1. Ein Diagramm starten
-
Öffnen Sie VPasCode in Ihrem Webbrowser.
-
Beginnen Sie mit einem leeren Editor oder fügen Sie ein bestehendes Diagrammskript ein.
-
Für PlantUML fügen Sie die üblichen
@startumlund@endumlMarkierungen ein. VPasCode kann die PlantUML-Syntax erkennen und den entsprechenden Renderer aktivieren. -
Überprüfen Sie das gerenderte Diagramm während Sie arbeiten.
2. Ein Diagramm mit KI generieren
Verwenden Sie den KI-Assistenten, um eine Beschreibung in natürlicher Sprache in Diagrammcode umzuwandeln. Seien Sie spezifisch bezüglich der Elemente und Beziehungen, die Sie einbeziehen möchten.
Beispielsweise könnten Sie fragen:
Erstellen Sie ein Sequenzdiagramm für die Benutzerauthentifizierung beim Login, einschließlich Benutzer, Web-App, Authentifizierungsdienst und Datenbank.
Überprüfen Sie den generierten Code und seine gerenderte Ausgabe. Verfeinern Sie die Eingabeaufforderung, wenn wichtige Teilnehmer, Schritte oder Beziehungen fehlen.
3. Bestehenden Code verfeinern
Anstatt von vorne zu beginnen, verwenden Sie Anweisungen in natürlicher Sprache, um ein bereits vorhandenes Diagramm zu ändern. Beschreiben Sie die gewünschte Änderung und wo sie hinzugefügt werden soll.
Beispielsweise:
Fügen Sie unmittelbar nach dem Schritt zur Auftragsübermittlung eine Prüfung des Zahlungsgateways hinzu.
Überprüfen Sie anschließend den aktualisierten Code und das Diagramm, um sicherzustellen, dass die Änderung in den beabsichtigten Arbeitsablauf passt.
4. Fehler beheben
Wenn das Diagramm nicht wie erwartet gerendert wird, verwenden Sie das KI-Werkzeug zur Fehlerbehebung im Code, um Syntaxprobleme zu diagnostizieren und zu reparieren. Es kann Probleme wie Tippfehler, fehlende Klammern oder nicht ausgerichtete Token identifizieren, eine Korrektur vornehmen und erklären, was schiefgelaufen ist.
Nachdem Sie eine Korrektur angewendet haben, prüfen Sie sowohl den Code als auch das gerenderte Diagramm, um sicherzustellen, dass das Ergebnis korrekt ist.
5. Diagrammtext übersetzen
Verwenden Sie das KI-Werkzeug zur Diagrammübersetzung, um Text innerhalb eines Diagramms zu übersetzen, wie z. B. Beschriftungen, Klasseneigenschaften und Nachrichtenbeschreibungen. Dies kann helfen, Diagramme für internationale Teams vorzubereiten.
Überprüfen Sie die übersetzten Begriffe im Kontext, insbesondere technische Fachbegriffe und Namen, die unverändert bleiben sollten.
6. Ein Thema anwenden
Wählen Sie im Editor ein Thema, um den visuellen Stil des Diagramms anzupassen. Verfügbare Optionen umfassen das klassische Thema von Visual Paradigm und klassische Alternativen. Themeneinstellungen können die entsprechenden Skin-Parameter für Sie anwenden.
Überprüfen Sie das Ergebnis vor dem Export auf Lesbarkeit und Konsistenz.
7. Exportieren und teilen
Wählen Sie ein Exportformat, das der Verwendung des Diagramms entspricht:
| Format | Nützlich für |
|---|---|
| SVG | Skalierbare Webdokumentation und technische Wikis |
| PNG | Chat-Apps, Fehlerverfolgungssysteme und Präsentationen |
| Formelle Dokumente und Druck |
Um ein Diagramm zu teilen, verwenden Sie eine direkte URL oder einen von der Plattform generierten QR-Code.
Ein praktischer Arbeitsablauf
-
Beschreiben Sie das System, den Prozess oder die Architektur, die Sie modellieren möchten.
-
Generieren Sie den ersten Diagrammcode mit KI oder fügen Sie ein bestehendes Skript ein.
-
Überprüfen Sie die Live-Darstellung und verfeinern Sie das Diagramm mit gezielten Anweisungen.
-
Verwenden Sie die Fehlerbehebung, wenn Syntaxprobleme die Darstellung verhindern.
-
Übersetzen Sie Beschriftungen oder wenden Sie ein Design-Thema an, falls erforderlich.
-
Exportieren Sie im Format, das Ihrer Dokumentation oder Präsentation entspricht.
-
Teilen Sie das Diagramm über seine URL oder seinen QR-Code.
