{"id":494,"date":"2026-06-29T08:56:12","date_gmt":"2026-06-29T08:56:12","guid":{"rendered":"https:\/\/www.ai-diagrams.com\/de\/living-documentation-a-hands-on-review-of-the-vpascode-and-opendocs-integration\/"},"modified":"2026-06-29T08:56:12","modified_gmt":"2026-06-29T08:56:12","slug":"living-documentation-a-hands-on-review-of-the-vpascode-and-opendocs-integration","status":"publish","type":"post","link":"https:\/\/www.ai-diagrams.com\/de\/living-documentation-a-hands-on-review-of-the-vpascode-and-opendocs-integration\/","title":{"rendered":"Lebende Dokumentation: Eine praktische Bewertung der Integration von VPasCode und OpenDocs"},"content":{"rendered":"

Einf\u00fchrung<\/h2>\n

Als Produktmanager mit \u00fcber sieben Jahren Erfahrung im Br\u00fcckenbau zwischen Engineering-Teams und Gesch\u00e4ftssachverst\u00e4ndigen habe ich Dokumentation stets sowohl als Notwendigkeit als auch als Belastung angesehen. Wir alle kennen die Herausforderung: Ingenieure bauen komplexe Systeme, doch die Diagramme, die diese Systeme erkl\u00e4ren, befinden sich oft in statischen Dateien, die bereits beim Zusammenf\u00fchren des Codes veraltet sind. Das Ergebnis ist die \u201eDokumentationsverschuldung\u201c \u2013 ein Wissensfundus, dem niemand vertraut, weil er die Realit\u00e4t nicht widerspiegelt.<\/p>\n

K\u00fcrzlich hatte ich die Gelegenheit, einen neuen Workflow von Visual Paradigm auszuprobieren, der verspricht, genau dieses Problem zu l\u00f6sen. Durch die Kombination vonVPasCode<\/strong>, einem Text-zu-Diagramm-Tool, mitOpenDocs<\/strong>, einer k\u00fcnstlich-intelligenten Wissensmanagementplattform, haben sie eine nahtlose Pipeline f\u00fcr \u201eDiagramm als Code\u201c geschaffen. Diese Bewertung untersucht, wie diese Integration funktioniert, warum sie f\u00fcr interdisziplin\u00e4re Teams von Bedeutung ist und wie sie Ihre technische Dokumentation von einer statischen Archivierung in ein lebendiges, atemendes Asset verwandeln kann.<\/p>\n

\"Living<\/p>\n\n

Einrichtung & Werkzeuge: Erste Schritte<\/h2>\n

Die Einstiegsh\u00fcrde f\u00fcr die meisten Diagramm-Tools ist hoch \u2013 Sie m\u00fcssen propriet\u00e4re Drag-and-Drop-Oberfl\u00e4chen erlernen oder schwere Desktop-Installationen verwalten. VPasCode verfolgt einen anderen Ansatz, indem er Syntax nutzt, die Sie bereits kennen k\u00f6nnten, wie beispielsweise PlantUML, Mermaid.js oder Graphviz.<\/p>\n

Um loszulegen, ben\u00f6tigen Sie Zugriff auf zwei zentrale Komponenten:<\/p>\n

    \n
  1. \n

    VPasCode<\/strong>: Dies ist Ihre Leinwand zum Erstellen von Visualisierungen mit Code. Es unterst\u00fctzt Echtzeit-Vorschau, sodass Sie sehen k\u00f6nnen, wie sich Ihr Diagramm beim Tippen aktualisiert.<\/p>\n<\/li>\n

  2. \n

    OpenDocs<\/strong>: Dies dient als zentrale Anlaufstelle f\u00fcr das Wissensfundament Ihres Teams. Hier befinden sich Ihre technischen Spezifikationen, API-Dokumentationen und Produktanforderungen.<\/p>\n<\/li>\n<\/ol>\n

    Verbindung der Pipeline<\/h3>\n

    Ein besonders erfrischender Aspekt dieser Einrichtung ist ihre Einfachheit. Es gibt keine komplexen API-Schl\u00fcssel, die generiert werden m\u00fcssen, noch Webhooks, die konfiguriert werden m\u00fcssen. Die Integration ist cloud-nativ und direkt in das Visual Paradigm-\u00d6kosystem integriert.<\/p>\n

    Melden Sie sich einfach bei beiden Plattformen mit denselben Visual-Paradigm-Anmeldeinformationen an. Sobald die Authentifizierung erfolgt ist, erkennen sich die Systeme automatisch. Wenn Sie bereit sind, ein visuelles Element zu teilen, leitet die Schaltfl\u00e4che \u201eAn OpenDocs-Pipeline senden\u201c in VPasCode Ihr Diagramm sicher in Ihren OpenDocs-Arbeitsbereich weiter.<\/p>\n\n

    Diagramm als Code in Aktion: Praktische Beispiele<\/h2>\n

    Um den Wert dieses Workflows wirklich zu verstehen, habe ich ihn anhand dreier allt\u00e4glicher Szenarien getestet, mit denen Produktmanager und Ingenieure t\u00e4glich konfrontiert sind: Dokumentation von Benutzerabl\u00e4ufen, Abbildung der Systemarchitektur und Modellierung von Datenstrukturen.<\/p>\n

    Beispiel 1: Ablaufdiagramm f\u00fcr die Benutzer-Authentifizierung<\/h3>\n

    Die Dokumentation von API-Interaktionen ist entscheidend f\u00fcr die Einarbeitung neuer Entwickler. Anstatt K\u00e4stchen und Pfeile manuell zu zeichnen, verwendete ich PlantUML in VPasCode, um die Logik eines Benutzer-Anmeldeflusses zu definieren.<\/p>\n

    \"\"<\/p>\n

    PlantUML in VPasCode bearbeiten<\/a><\/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\ntitle Benutzer-Authentifizierungsablauf\r\naktor Benutzer\r\nTeilnehmer \"Frontend-App\" als Frontend\r\nTeilnehmer \"Authentifizierungsdienst\" als Auth\r\nDatenbank \"Benutzer-DB\" als DB\r\n\r\nBenutzer -> Frontend: Anmeldeinformationen eingeben\r\nFrontend -> Auth: POST \/login\r\nAuth -> DB: Benutzer abfragen\r\nDB --> Auth: Benutzerdaten zur\u00fcckgeben\r\nAuth --> Frontend: JWT-Token\r\nFrontend --> Benutzer: Weiterleitung zur Dashboard-Seite\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
    PlantUML in VPasCode bearbeiten<\/a><\/p>\n
    Sobald gerendert, klicken Sie auf\u201eAn OpenDocs-Pipeline senden\u201c<\/strong>Habe dieses Diagramm direkt in mein technisches Spezifikationsdokument eingef\u00fcgt. Dadurch entf\u00e4llt die Notwendigkeit, PNGs zu exportieren, sie korrekt zu benennen und manuell hochzuladen.<\/p>\n
    \"This<\/p>\n
    Beispiel 2: C4-Container-Diagramm f\u00fcr Microservices<\/h3>\n
    F\u00fcr hochrangige Architekturbesprechungen mit Stakeholdern ist das C4-Modell unverzichtbar. Es hilft, Systemgrenzen zu kl\u00e4ren, ohne sich in Code-Details zu verlieren. Hier ist, wie ich ein einfaches Online-Banking-System dargestellt habe:<\/p>\n
    \"\"<\/p>\n
    Bearbeiten Sie PlantUML in VPasCode<\/a><\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nBearbeiten Sie PlantUML in VPasCode<\/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\n!include <C4\/C4_Context>\r\n!include <C4\/C4_Container>\r\n\r\nPerson(user, \"Kunde\", \"Nutzt das Online-Banking-System\")\r\n\r\nSystem_Boundary(bank, \"Online-Banking-System\") {\r\n    Container(web_app, \"Web-Anwendung\", \"Java, Spring MVC\", \"Stellt Inhalte f\u00fcr Benutzer bereit\")\r\n    Container(api, \"API-Backend\", \"Java, Spring Boot\", \"Verarbeitet Gesch\u00e4ftslogik\")\r\n    ContainerDb(db, \"Datenbank\", \"SQL\", \"Speichert Benutzerkonten und Transaktionen\")\r\n}\r\n\r\nRel(user, web_app, \"Nutzt\")\r\nRel(web_app, api, \"Ruft \u00fcber HTTPS auf\")\r\nRel(api, db, \"Liest\/Schreibt\")\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>
    \nBearbeiten Sie PlantUML in VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Bearbeiten Sie PlantUML in VPasCode<\/a><\/p>\n
    Beispiel 3: Klassendiagramm f\u00fcr Produktmanagement<\/h3>\n
    Beim Festlegen von Produktanforderungen ist Klarheit bez\u00fcglich Datenentit\u00e4ten entscheidend. Ich habe ein Klassendiagramm verwendet, um ein Produktkatalog-Modell zu erstellen und die Beziehungen zwischen Produkten, Kategorien und Bestellungen zu kl\u00e4ren.<\/p>\n
    \"\"<\/p>\n
    Bearbeiten Sie PlantUML in VPasCode<\/a><\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nBearbeiten Sie PlantUML in VPasCode<\/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\nclass Product {\r\n    +String name\r\n    +Double price\r\n    +String sku\r\n    +getDetails()\r\n}\r\n\r\nclass Category {\r\n    +String categoryName\r\n    +List<Product> products\r\n}\r\n\r\nclass Order {\r\n    +int orderId\r\n    +Date orderDate\r\n    +List<Product> items\r\n}\r\n\r\nProduct \"1\" -- \"*\" Category : geh\u00f6rt zu\r\nOrder \"1\" -- \"*\" Product : enth\u00e4lt\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>
    \nBearbeiten Sie PlantUML in VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Bearbeiten Sie PlantUML in VPasCode<\/a><\/p>\n\n
    KI-gest\u00fctzte Funktionen: Verbesserung Ihres Arbeitsablaufs<\/h2>\n
    Was Visual Paradigm in diesem Bereich hervorhebt, ist die Integration von KI-Funktionen. W\u00e4hrend meiner Tests fand ich drei Funktionen besonders n\u00fctzlich, um den Dokumentationsprozess zu beschleunigen:<\/p>\n