Einführung

In der modernen Softwareentwicklung hat die „Diagram-as-Code”-Methode (DaC)” die Art und Weise revolutioniert, wie wir die Systemarchitektur dokumentieren.VPasCode, entwickelt von Visual Paradigm, hebt sich als eine einheitliche, browserbasierte Plattform hervor, die mehrere Syntaxen wie PlantUML, Mermaid und Graphviz unterstützt. Während das Schreiben von Code zur Diagrammerstellung Präzision bietet, kann das manuelle Aktualisieren komplexer Strukturen – wie das Hinzufügen von Attributen zu mehreren Unterklassen – mühsam sein.

Hier kommt VPasCodeeingebettete KI ins Spiel. Durch die direkte Integration von Natural Language Processing (NLP) in den Editor ermöglicht VPasCode Entwicklern, ihre visuellen Modelle konversationell zu verfeinern. Dieser Leitfaden erläutert, wie Sie die Funktion „KI-Ändern“ nutzen können, um ein „UML-Klassendiagramm“ sofort zu aktualisieren, und überbrückt die Lücke zwischen textbasiertem Code und visuellem Design, ohne dass Sie Ihren Arbeitsbereich verlassen müssen.

---

Wichtige Konzepte

Bevor wir in die Schritte einsteigen, ist es hilfreich, die zugrunde liegenden Kerntechnologien zu verstehen:

• Diagram-as-Code (DaC): Eine Methodik, bei der Diagramme aus textbasiertem Quellcode generiert werden, anstatt manuell mit der Maus gezeichnet zu werden. Dies stellt sicher, dass Diagramme versionierbar und leicht reproduzierbar sind.
  

• PlantUML: Ein beliebtes Open-Source-Tool, das eine einfache textliche Beschreibung verwendet, um UML-Diagramme zu erstellen. Im folgenden Beispiel definiert die PlantUML-Syntax Klassen wie „Customer“,, , „Order“,.

• Eingebettete KI-Modifikation: Im Gegensatz zu externen KI-Tools, bei denen Sie Code hin- und her kopieren und einfügen müssen, versteht die eingebettete KI von VPasCode den Kontext Ihrer aktuellen Datei. Sie analysiert Ihren vorhandenen PlantUML-Code, wendet Ihre angeforderten Änderungen (z. B. das Hinzufügen von Attributen) an und schreibt den Code automatisch neu.

• Echtzeit-Rendering: VPasCode bietet eine geteilte Bildschirmansicht, in der Änderungen am Code auf der linken Seite sofort im visuellen Diagramm auf der rechten Seite widergespiegelt werden, was ein sofortiges Feedback gewährleistet.

---

Schritt-für-Schritt-Anleitung: Verfeinerung eines Klassendiagramms mit der eingebetteten KI von VPasCode

Das schnelle und bequeme Verfeinern eines Klassendiagramms innerhalb von VPasCode ohne externe Tools kann in wenigen einfachen Schritten mithilfe der integrierten KI-Funktion durchgeführt werden.

Der Ausgangspunkt

Stellen Sie sich vor, Sie haben ein grundlegendes E-Commerce-Klassendiagramm, das in PlantUML definiert ist. Sie haben eine Zahlung Klasse mit drei Unterklassen: Bargeld, Scheck, und KreditDerzeit sind diese Unterklassen leere Hüllen, die lediglich von der Elternklasse erben.

(Hinweis: In der tatsächlichen Schnittstelle entspricht dies dem ersten bereitgestellten Bild, das den Code links und das gerenderte Diagramm rechts mit leeren Unterklassen zeigt.)

Abbildung 1: Der Anfangszustand des Klassendiagramms in VPasCode. Beachten Sie die Bargeld, Scheck, und Kredit Klassen fehlen spezifische Attribute.

Schritt 1: Öffnen Sie das KI-Menü

Um den Verfeinerungsprozess zu beginnen, suchen Sie die KI-Steuerungselemente innerhalb der Editor-Schnittstelle.

• Klicken Sie auf KI Dropdown-Schaltfläche, die sich im oberen linken Bereich über dem Code-Editor befindet. Dieses Menü ist Ihr Zugang zur intelligenten Diagrammanipulation.

Abbildung 2: Das Klicken auf das KI-Dropdown zeigt Optionen zum Ändern oder Übersetzen des Diagramm-Codes.

Schritt 2: Wählen Sie die Option Ändern

Das KI-Menü bietet je nach Bedarf unterschiedliche Funktionen. Für strukturelle Änderungen verwenden Sie die Funktion Ändern.

• Wählen Sie im Dropdown-Menü die Ändern Option mit dem KI-Symbol daneben. Dies teilt dem System mit, dass Sie beabsichtigen, die bestehende Logik und Struktur des Diagramms zu ändern, anstatt etwas von Grund auf neu zu generieren.

Schritt 3: Beschreiben Sie die gewünschten Änderungen

Dies ist der kritischste Schritt, bei dem die natürliche Sprache das manuelle Codieren ersetzt. Sie müssen die genaue PlantUML-Syntax für die neuen Attribute nicht kennen; Sie beschreiben einfach, was Sie wünschen.

• Im KI-Ändern-Dialogfeld, das angezeigt wird, geben Sie eine Beschreibung in natürlicher Sprache ein, wie Sie Ihr Diagramm verfeinern oder ändern möchten.

• Beispiel-Prompt: „Fügen Sie einige Attribute zu den Unterklassen der Payment-Klasse im Klassendiagramm hinzu“

• Klicken Sie auf KI-Ändern-Schaltfläche, um Ihre Anfrage einzureichen.

Abbildung 3: Das KI-Ändern-Dialogfeld. Der Benutzer gibt einen Prompt in natürlicher Sprache ein (1) und löst den Prozess aus (2).

Schritt 4: Das verfeinerte Diagramm anzeigen

Sobald Sie den Prompt eingereicht haben, beginnt die VPasCode-Engine mit der Arbeit. Sie analysiert die Anfrage, identifiziert die Zielklassen (Cash, Check, Credit) und fügt basierend auf standardisiertem Domänenwissen relevante Attribute und Methoden ein.

• Die KI verarbeitet Ihre Beschreibung automatisch, aktualisiert den Code und spiegelt die neu hinzugefügten Klassen, Attribute oder Methoden direkt in Ihrem visuellen Klassendiagramm wider.

• Ergebnis: Wie unten zu sehen, hat die Cash-Klasse nun das cashTendered, die Check-Klasse hat bankID und Kontoinhabername, und die Kredit Klasse enthält Nummer und Ablaufdatum. Der Code auf der linken Seite wurde aktualisiert, um dem visuellen Element auf der rechten Seite zu entsprechen.

Abbildung 4: Das verfeinerte Diagramm. Die KI hat die Unterklassen erfolgreich mit relevanten Attributen und Methoden gefüllt und sowohl den Code als auch die visuelle Darstellung aktualisiert.

---

Fazit

Die Integration von KI in Diagram-as-Code-Tools wie VPasCode stellt einen erheblichen Fortschritt in der Produktivität für Softwarearchitekten und Entwickler dar. Durch Befolgung dieses einfachen Vier-Schritte-Prozesses können Sie ein skelettartiges Klassendiagramm in Sekundenschnelle in ein detailliertes Design-Dokument verwandeln.

Die Möglichkeit, zu sagen „Fügen Sie Attribute zu den Kindern von Payment hinzu“ und den gleichzeitigen Update von Code und Diagramm zu beobachten, beseitigt die Reibung des manuellen Syntax-Editings. Ob Sie ein komplexes Unternehmenssystem oder eine einfache Anwendung modellieren, die integrierte KI von VPasCode stellt sicher, dass sich Ihre Dokumentation so schnell entwickelt wie Ihre Ideen.

Bereit, es selbst auszuprobieren? Besuchen Sie VPasCode um sofort damit zu beginnen, Ihren Text in professionelle Diagramme zu verwandeln

Referenzartikel und Ressourcen für Visual Paradigms VPasCode

Hier ist eine kuratierte Liste von Artikeln und Ressourcen, die Visual Paradigms VPasCode, eine einheitliche Text-zu-Diagramm-Plattform, abdecken. Die Ressourcen sind so organisiert, dass Sie deren Kernfunktionen, KI-Funktionen und Ökosystem-Integrationen verstehen können.

Kernführungen und Funktionsübersichten

1. Umfassender Leitfaden zu VPasCode von Visual Paradigm: Ein grundlegender Leitfaden, der die Diagram-as-Code (DaC)-Philosophie, ihre Multi-Engine-Architektur (PlantUML, Mermaid, Graphviz) und die Kern-Schnittstelle des Dual-Panel-Editors erklärt.

2. VPasCode meistern: Der ultimative Leitfaden für KI-gestütztes Diagram-as-Code: Ein detailliertes Tutorial zur Nutzung von KI-gestützten Funktionen, einschließlich des KI-Chatbots für die Konvertierung von natürlicher Sprache in Diagramme, und wie man KI-generierte Diagramme direkt in den VPasCode-Editor übertragen kann.

3. VPasCode im Detail: Vereinigung von Mermaid, PlantUML und KI in einer Plattform: Dieser Artikel bietet einen technischen Tiefgang in die Unterstützung der Plattform für Mermaid, PlantUML und Graphviz, mit detailliertem Funktionsvergleich und praktischen Anwendungsfällen.

Schnellstart & Praktische Anleitungen

4. 60-Sekunden-Schnellstart-Leitfaden | VPasCode Text-zu-Diagramm-Leitfaden: Ein Schritt-für-Schritt-Tutorial, um Ihr erstes Diagramm in weniger als einer Minute zu erstellen, anzupassen und zu teilen, indem Sie den cloudbasierten Editor verwenden.

5. Vom Code zur Klarheit: Ein Anfängerleitfaden für nahtloses Diagramming mit VPasCode und OpenDocs: Ein praktischer Leitfaden zur Erstellung realistischer Diagramme (Sequenz, C4, Klasse) und zum Versenden dieser von VPasCode an die OpenDocs-Dokumentation über die Pipeline-Integration.

Integration & Ökosystem

6. Nahtlose Verbindung von Diagrammerstellung und Dokumentation: VPasCode integriert sich mit OpenDocs: Kündigt die direkte Pipeline-Integration an und erläutert, wie man über „An OpenDocs-Pipeline senden“ Diagramme in lebendige Dokumentation verwandelt.

7. Verbinden Sie Diagramme als Code nahtlos mit der Dokumentation über OpenDocs: Erklärt, wie VPasCode als Brücke zwischen der Diagrammerstellung und der Dokumentation fungiert und das Problem veralteter Diagramme durch sofortige Aktualisierungen löst.

KI-Funktionen & Fallstudien

8. Visual Paradigm – KI-gestütztes visuelles Modellieren: Präsentiert das breitere KI-Ökosystem von Visual Paradigm, mit Abschnitten, die VPasCode und dessen Fähigkeit gewidmet sind, Diagramme aus Text zu generieren, sowie KI-gestützte Fehlerbehebung.

9. Was ist neu in VPasCode – Übersicht der Launch-Features: Eine Übersicht der Launch-Features mit Schwerpunkt auf Schlüsselfunktionen: Unterstützung mehrerer Syntaxe, KI-gestützte Fehlerbehebung im Code, KI-Übersetzung für globale Teams und OpenDocs-Integration.

10. Fallstudie: Beschleunigung der Software-Architekturdokumentation durch VPasCode: Eine Fallstudie, die zeigt, wie VPasCode die Software-Architekturdokumentation durch automatisches Layout, KI-Generierung und Unterstützung einer einheitlichen Engine beschleunigt.

Offizielle Produktseiten

11. Visual Paradigm VPasCode: Einheitliche Diagram-as-Code-Plattform: Die offizielle Produktfeature-Seite mit Details zu unterstützten Diagrammtypen (PlantUML, Mermaid, Graphviz), Kernfunktionen und häufig gestellten Fragen.

12. Offizielle VPasCode-Dokumentation & Playground: Die zentrale Anlaufstelle für den kostenlosen VPasCode-Playground-Editor, die offizielle Dokumentation und die neuesten Updates zur Plattform.