{"id":7045,"date":"2026-09-24T12:13:50","date_gmt":"2026-09-24T04:13:50","guid":{"rendered":"https:\/\/guides.visual-paradigm.com\/de\/vpascode-ai-assisted-diagram-as-code-with-plantuml-mermaid-and-graphviz\/"},"modified":"2026-09-24T13:44:50","modified_gmt":"2026-09-24T05:44:50","slug":"vpascode-ai-assisted-diagram-as-code-with-plantuml-mermaid-and-graphviz","status":"publish","type":"post","link":"https:\/\/guides.visual-paradigm.com\/de\/vpascode-ai-assisted-diagram-as-code-with-plantuml-mermaid-and-graphviz\/","title":{"rendered":"VPasCode: KI-gest\u00fctztes Diagram-as-Code mit PlantUML, Mermaid und Graphviz"},"content":{"rendered":"
\n
\n
\n
\n
\n

VPasCode ist eine browserbasierte Diagram-as-Code-Plattform, die einen Texteditor, Live-Rendering, mehrere Diagrammsprachen und KI-gest\u00fctzte Generierung und Bearbeitung kombiniert. Sie unterst\u00fctzt PlantUML, Mermaid, Graphviz, D2 und weitere Formate in einem einzigen Arbeitsbereich. Die Plattform kann Diagrammcode aus nat\u00fcrlichen Sprachanweisungen generieren, bestehenden Code bearbeiten, bei der Diagnose von Syntaxfehlern helfen, Beschriftungen \u00fcbersetzen und Diagramme als SVG, PNG oder PDF exportieren.<\/p>\n

\"\"<\/p>\n

Dieser Leitfaden erl\u00e4utert, wie VPasCode als KI-gest\u00fctzter Modellierungsworkflow f\u00fcr Softwarearchitektur, Prozesse, Abh\u00e4ngigkeiten, UML und technische Dokumentation verwendet wird.<\/p>\n

\n

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

Diagram-as-Code ist die Praxis, ein Diagramm durch Text zu definieren, anstatt Formen manuell auf eine Zeichenfl\u00e4che zu ziehen.<\/p>\n

Anstatt:<\/p>\n

    \n
  1. \n

    Formen manuell hinzuzuf\u00fcgen<\/p>\n<\/li>\n

  2. \n

    Sie mit Linien zu verbinden<\/p>\n<\/li>\n

  3. \n

    Sie nach jeder \u00c4nderung neu zu positionieren<\/p>\n<\/li>\n

  4. \n

    Ein statisches Bild zu exportieren<\/p>\n<\/li>\n<\/ol>\n

    pflegen Sie eine Textdatei, die das Diagramm beschreibt:<\/p>\n

    \"\"<\/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 
    flowchart LR\n    User --> WebApp\n    WebApp --> API\n    API --> Database\n<\/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
    Das Diagramm wird anschlie\u00dfend automatisch von einer Rendering-Engine erstellt.<\/p>\n
    Dieser Ansatz bietet mehrere Vorteile:<\/p>\n