{"id":7047,"date":"2026-09-24T09:17:56","date_gmt":"2026-09-24T01:17:56","guid":{"rendered":"https:\/\/guides.visual-paradigm.com\/de\/vpascode-ai-assisted-diagram-as-code-with-plantuml\/"},"modified":"2026-09-24T09:50:45","modified_gmt":"2026-09-24T01:50:45","slug":"vpascode-ai-assisted-diagram-as-code-with-plantuml","status":"publish","type":"post","link":"https:\/\/guides.visual-paradigm.com\/de\/vpascode-ai-assisted-diagram-as-code-with-plantuml\/","title":{"rendered":"VPasCode: KI-gest\u00fctztes Diagram-as-Code mit PlantUML"},"content":{"rendered":"

VPasCode<\/a> ist ein browserbasierter Diagram-as-Code-Arbeitsbereich, der einen Texteditor, eine Live-Diagramm-Rendering-Funktion und PlantUML-Unterst\u00fctzung<\/a> sowie KI-gest\u00fctzte Diagrammerstellung und -bearbeitung kombiniert. Anstatt Formen manuell auf eine Zeichenfl\u00e4che zu ziehen, beschreiben Sie ein Diagramm mit PlantUML-Code<\/a>\u2014oder bitten Sie die KI, die erste Version zu erstellen\u2014und verfeinern Sie dann den Quelltext, bis das gerenderte Diagramm Ihr Design klar vermittelt.<\/p>\n

\"\"<\/p>\n

Dieser Workflow ist besonders n\u00fctzlich f\u00fcr Softwarearchitektur, UML-Modellierung, technische Dokumentation, Systemdesign-Reviews und Diagramme, die sich gemeinsam mit dem Quellcode weiterentwickeln m\u00fcssen.<\/p>\n

1. Was ist Diagram-as-Code?<\/h2>\n

Diagram-as-Code<\/a>stellt ein Diagramm als Text dar und nicht als statische Zeichendatei. Der Text fungiert als Quelle der Wahrheit, w\u00e4hrend eine Rendering-Engine ihn in ein visuelles Diagramm umwandelt.<\/p>\n

Ein einfaches PlantUML-Sequenzdiagramm sieht so aus:<\/p>\n

\"\"<\/p>\n

\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nPlantUML in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n PlantUML<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit PlantUML in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
@startuml\r\nactor User\r\nparticipant Browser\r\nparticipant API\r\ndatabase Database\r\n\r\nUser -> Browser: Login-Formular einreichen\r\nBrowser -> API: POST \/login\r\nAPI -> Database: Anmeldeinformationen validieren\r\nDatabase --> API: Benutzerdatensatz\r\nAPI --> Browser: Sitzungstoken\r\nBrowser --> User: Dashboard anzeigen\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nPlantUML in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Der Code kann:<\/p>\n