{"id":1950,"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-2\/"},"modified":"2026-06-20T02:33:55","modified_gmt":"2026-06-20T02:33:55","slug":"your-first-diagram-in-vpascode-a-5-minute-quickstart-2","status":"publish","type":"post","link":"https:\/\/www.vpascode.com\/de\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/","title":{"rendered":"Ihr erster Diagramm in VPasCode \u2013 Ein 5-Minuten-Quickstart"},"content":{"rendered":"
\n
\n

VPasCode ist ein intuitives Diagramm-as-Code-Werkzeug<\/a> und einheitliches Text-zu-Diagramm<\/a>Plattform, die es Ihnen erm\u00f6glicht, Diagramme mit g\u00e4ngigen Formaten wie PlantUML, Mermaid und Graphviz zu erstellen.<\/p>\n<\/header>\n

\n

Was ist VPasCode?<\/h2>\n

VPasCode (die Diagramm-as-Code-Plattform von Visual Paradigm) ist eine einheitliche Text-zu-Diagramm-Plattform, die es Ihnen erm\u00f6glicht, Diagramme mit g\u00e4ngigen Formaten wie PlantUML, Mermaid und Graphviz zu erstellen. Egal, ob Sie die Softwarearchitektur dokumentieren, Projekte planen oder Datenfl\u00fcsse visualisieren \u2013 VPasCode bietet einen kostenlosen Code-Editor und einen sofortigen Diagramm-Renderer, um Ihre Ideen zum Leben zu erwecken.<\/p>\n

Das Beste daran? Sie k\u00f6nnen sofort Diagramme auf www.vpascode.com<\/a> \u2013 keine Registrierung f\u00fcr grundlegende Funktionen erforderlich.<\/p>\n<\/section>\n

\n

Schritt 1: Zugriff auf VPasCode<\/h2>\n

Navigieren Sie zu www.vpascode.com<\/a> in Ihrem Webbrowser. Sie sehen eine saubere Oberfl\u00e4che mit einem Code-Editor auf der linken Seite und einer Live-Vorschau-Anzeige auf der rechten Seite. Die Plattform l\u00e4dt sofort mit einem Beispiel-Diagramm, um Ihnen die Syntax zu erkl\u00e4ren.
\n<\/p>\n

\"VPasCode
VPasCodes intuitive Oberfl\u00e4che mit nebenl\u00e4ufiger Code-Editor- und Echtzeitvorschau<\/figcaption><\/figure>\n

Bildprompt:<\/strong> Screenshot der VPasCode-Web-Oberfl\u00e4che mit geteilter Bildschirmlayout, Code-Editor auf der linken Seite mit angezeigter Mermaid-Syntax und gerendertem Flussdiagramm auf der rechten Seite, saubere moderne Benutzeroberfl\u00e4che mit Werkzeugleiste oben<\/p>\n<\/section>\n

\n

Schritt 1: Schreiben Sie Ihren Flussdiagramm-Code<\/h2>\n

VPasCode dient als vielseitiges Diagramm-as-Code-Werkzeug, das mehrere Formate unterst\u00fctzt. F\u00fcr diesen Text-zu-Diagramm-Quickstart verwenden wir Mermaid, eine der beliebtesten Optionen f\u00fcr Flussdiagramme.<\/p>\n

L\u00f6schen Sie den Beispielcode und f\u00fcgen Sie dieses einfache Flussdiagramm-Beispiel ein:<\/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\r\n    A[Start] --> B{Funktioniert es?}\r\n    B -->|Ja| C[Prima!]\r\n    B -->|Nein| D[Debuggen]\r\n    D --> B\r\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            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nMermaid in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Diese Mermaid-Syntax erstellt ein einfaches Entscheidungsflussdiagramm. Hier ist, was es bedeutet:<\/p>\n