{"id":2295,"date":"2026-06-20T02:33:55","date_gmt":"2026-06-20T02:33:55","guid":{"rendered":"https:\/\/www.vpascode.com\/de\/your-first-diagram-in-vpascode-a-5-minute-quickstart\/"},"modified":"2026-06-20T02:33:55","modified_gmt":"2026-06-20T02:33:55","slug":"your-first-diagram-in-vpascode-a-5-minute-quickstart","status":"publish","type":"post","link":"https:\/\/www.vpascode.com\/de\/your-first-diagram-in-vpascode-a-5-minute-quickstart\/","title":{"rendered":"Ihr erstes Diagramm in VPasCode \u2013 Eine 5-Minuten-Schnellstartanleitung"},"content":{"rendered":"
\n

VPasCode ist ein intuitives Diagramm-als-Code-Tool und eine einheitliche Text-zu-Diagramm-<\/a>Plattform, mit der Sie Diagramme in beliebten Formaten wie PlantUML, Mermaid und Graphviz erstellen k\u00f6nnen. Dank integrierter KI-Funktionen k\u00f6nnen Sie nun Visualisierungen sofort aus nat\u00fcrlicher Sprache generieren.<\/p>\n<\/header>\n

\n

Was ist VPasCode?<\/h2>\n

VPasCode (die Diagramm-als-Code-Plattform von Visual Paradigm) ist eine einheitliche Text-zu-Diagramm-Plattform, mit der Sie Diagramme in beliebten Formaten wie PlantUML, Mermaid und Graphviz erstellen k\u00f6nnen. Ob Sie Softwarearchitekturen dokumentieren, Projekte planen oder Datenfl\u00fcsse visualisieren \u2013 VPasCode bietet einen kostenlosen Code-Editor, einen Echtzeit-Renderer und integrierte KI, um Ihre Ideen zum Leben zu erwecken.<\/p>\n

Das Beste? Sie k\u00f6nnen sofort mit der Erstellung von Diagrammen beginnen unter www.vpascode.com<\/a> \u2013 f\u00fcr Basisfunktionen ist keine Registrierung erforderlich. F\u00fcr einen vollst\u00e4ndigen \u00dcberblick \u00fcber die neuesten nativen KI-Funktionen sehen Sie sich unsere Gro\u00dfe VPasCode-Update-Bekanntmachung<\/a>.<\/p>\n<\/section>\n

\n

Schritt 1: VPasCode aufrufen<\/h2>\n

Navigieren Sie zu www.vpascode.com<\/a>in Ihrem Webbrowser. Sie sehen eine saubere Benutzeroberfl\u00e4che mit einem Code-Editor links und einer Live-Vorschau rechts. Die Plattform l\u00e4dt sofort mit einem Beispiel-Diagramm, um Ihnen das Verst\u00e4ndnis der Syntax zu erleichtern.
\n<\/p>\n

\"VPasCode
Die intuitive Benutzeroberfl\u00e4che von VPasCode mit nebeneinanderliegendem Code-Editing und Echtzeit-Vorschau<\/figcaption><\/figure>\n

Bild-Prompt:<\/strong>Screenshot der VPasCode-Web-Oberfl\u00e4che mit geteilter Bildschirmansicht: links Code-Editor mit Mermaid-Syntax, rechts gerendertes Flussdiagramm, saubere moderne Benutzeroberfl\u00e4che mit Werkzeugleiste oben<\/p>\n<\/section>\n

\n

Schritt 2: Erstellen Sie Ihr Diagramm (\u00fcber KI-Prompt oder Code)<\/h2>\n

VPasCode dient als vielseitiges Diagramm-als-Code-Tool, das mehrere Formate unterst\u00fctzt. Sie haben zwei Hauptm\u00f6glichkeiten, Diagramme zu erstellen: manuelles Schreiben von Code oder sofortige Generierung mithilfe integrierter KI.<\/p>\n

Option A: Sofortige Generierung mit nativer KI<\/h3>\n

Anstatt bei Null anzufangen, k\u00f6nnen Sie einen Prompt in nat\u00fcrlicher Sprache direkt in der App-Oberfl\u00e4che eingeben. Versuchen Sie beispielsweise Folgendes einzugeben:<\/p>\n

\u201eErstellen Sie ein Use-Case-Diagramm in PlantUML f\u00fcr ein Geldautomatensystem\u201c<\/p><\/blockquote>\n

VPasCode erstellt das Diagramm f\u00fcr Sie in wenigen Sekunden nativ. Um diesen Workflow in Aktion zu sehen, schauen Sie sich unser Video-Tutorial an: Diagramme schnell erstellen und bearbeiten mit KI auf YouTube<\/a>.<\/p>\n

Option B: Flussdiagramm-Code manuell schreiben<\/h3>\n

Alternativ k\u00f6nnen Sie Code manuell schreiben oder einf\u00fcgen. L\u00f6schen Sie den Editor und verwenden Sie dieses einfache Mermaid-Flussdiagramm-Beispiel:<\/p>\n

\n
\nMermaid<\/span>\n\n<\/path><\/path><\/svg>\nMermaid in VPasCode bearbeiten<\/span>\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
graph TD\n    A[Start] --> B{Funktioniert es?}\n    B -->|Ja| C[Toll!]\n    B -->|Nein| D[Debuggen]\n    D --> B\n    C --> E[Ende]<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n             <\/div>\n
\n\n<\/path><\/path><\/svg>\nMermaid in VPasCode bearbeiten<\/span>\n<\/a>\n<\/div>\n<\/div>\n
Diese Mermaid-Syntax erstellt ein grundlegendes Entscheidungsflussdiagramm. Hier ist die Bedeutung:<\/p>\n