Wenn Sie ein Diagramm als PNG, JPG oder sogar als Foto einer Whiteboard-Skizze erhalten, k\u00f6nnen Sie es zwar ansehen, aber nicht einfach bearbeiten, erweitern oder in Ihre Dokumentationspipeline integrieren. Die manuelle Nachstellung dieser Diagramme in einem modernen Diagrammwerkzeug ist zeitaufw\u00e4ndig und fehleranf\u00e4llig.<\/p>\n
Hier kommt VPasCode AI<\/strong>, die erweiterte Diagramm-als-Code-Plattform von Visual Paradigm, die nun die KI-gest\u00fctzte Diagrammerstellung auf Basis von Bildern<\/strong>. Diese Funktion wandelt statische visuelle Referenzen \u2013 Screenshots, Legacy-Diagramme, handschriftliche Skizzen oder exportierte Bilder aus anderen Tools \u2013 in bearbeitbaren, wartbaren Diagrammcode in g\u00e4ngigen Formaten wie PlantUML, Mermaid und Graphviz um.<\/p>\n Dieser umfassende Leitfaden f\u00fchrt Sie durch alles, was Sie wissen m\u00fcssen, um diese leistungsstarke Funktion zu nutzen \u2013 von der grundlegenden Anwendung bis zu fortgeschrittenen Workflows, die Ihre generierten Diagramme mit gr\u00f6\u00dferen Dokumentations- und Modellierungssystemen verbinden.<\/p>\n VPasCode ist eine Online-Diagramm-als-Code<\/strong>-Plattform, die textbasierte Diagrammsprachen und strukturierte Daten in visuelle Diagramme umwandelt. Es werden mehrere Formate unterst\u00fctzt, darunter:<\/p>\n PlantUML<\/strong>(UML-Diagramme)<\/p>\n<\/li>\n Mermaid<\/strong>(Flussdiagramme, Sequenzdiagramme, Gantt-Diagramme)<\/p>\n<\/li>\n Graphviz<\/strong>(Graphenvisualisierung)<\/p>\n<\/li>\n Markmap<\/strong>(Mindmaps)<\/p>\n<\/li>\n ECharts<\/strong>(Datenvisualisierungen)<\/p>\n<\/li>\n JSON, YAML, XML, CSV, DBML, SQL<\/strong>(Diagramme f\u00fcr Datenstrukturen)<\/p>\n<\/li>\n<\/ul>\n Die KI-Diagrammerstellung nutzt k\u00fcnstliche Intelligenz, um aus nat\u00fcrlichen Sprachanweisungen Diagrammcode zu generieren. Die neueste Erweiterung f\u00fcgt hinzu die F\u00e4higkeit zur Eingabe von Bildern<\/strong>, wodurch Sie sowohl eine visuelle Referenz als auch einen Textprompt bereitstellen k\u00f6nnen. Die KI analysiert die Bildstruktur, interpretiert Beziehungen und Beschriftungen und generiert den entsprechenden Diagrammcode, den Sie sofort bearbeiten und verfeinern k\u00f6nnen.<\/p>\n Traditionelle Diagrammwerkzeuge erzeugen statische Bilder oder propriet\u00e4re Dateiformate, die schwer zu versionieren, zu \u00fcberpr\u00fcfen oder zu warten sind. Diagramm-as-Code bietet mehrere Vorteile:<\/p>\n Versionierungsfreundlich<\/strong>: Speichern Sie Diagramme zusammen mit Ihrem Quellcode in Git<\/p>\n<\/li>\n Einfache Zusammenarbeit<\/strong>: \u00dcberpr\u00fcfen Sie \u00c4nderungen \u00fcber Pull-Requests<\/p>\n<\/li>\n Automatische Neugenerierung<\/strong>: Aktualisieren Sie Diagramme, wenn sich die zugrunde liegenden Modelle \u00e4ndern<\/p>\n<\/li>\n Textbasierte Bearbeitung<\/strong>: Verwenden Sie vertraute Code-Editoren und IDEs<\/p>\n<\/li>\n Wiederverwendbarkeit<\/strong>: Diagrammstrukturen einfach kopieren, einf\u00fcgen und bearbeiten<\/p>\n<\/li>\n<\/ul>\n Der Workflow ist einfach und erfordert nur wenige Schritte:<\/p>\n Klicken Sie in VPasCode auf AI Generate<\/strong>am oberen Rand der Anwendung. Das Dialogfeld f\u00fcr die KI-Generierung wird angezeigt.<\/p>\n Klicken Sie auf Bild hochladen<\/strong>am unteren Rand des Dialogs und w\u00e4hlen Sie ein Bild von Ihrem Computer aus. Alternativ k\u00f6nnen Sie ein Bild in die Zwischenablage kopieren und Strg+V<\/strong>dr\u00fccken, um es direkt in den Dialog einzuf\u00fcgen.<\/p>\n Beschreiben Sie, was VPasCode generieren soll, und geben Sie die gew\u00fcnschte Diagrammsprache oder das gew\u00fcnschte Format an. Seien Sie spezifisch bez\u00fcglich des Diagrammtyps und des Zielformats.<\/p>\n Beispielanweisung:<\/strong><\/p>\n Erstellen Sie ein Sequenzdiagramm in PlantUML basierend auf dem bereitgestellten Bild.<\/p>\n<\/blockquote>\n VPasCode verarbeitet das Bild und die Anweisung und generiert anschlie\u00dfend den Diagrammcode.<\/p>\n Der generierte Code wird auf der linken Seite des VPasCode-Editors angezeigt, w\u00e4hrend das gerenderte Diagramm auf der rechten Seite erscheint. Sie k\u00f6nnen den Code bearbeiten und das visuelle Ergebnis in Echtzeit aktualisieren sehen.<\/p>\n Die Bild-Eingabefunktion ist vielseitig und funktioniert mit verschiedenen Quelltypen:<\/p>\n Bildschirmaufnahmen<\/strong>von Diagrammen, die in einer anderen Diagrammierungsanwendung erstellt wurden<\/p>\n<\/li>\n Kopierte Bilder<\/strong>aus technischen B\u00fcchern, Artikeln oder Websites<\/p>\n<\/li>\n Architekturdiagramme<\/strong>die in der Projektdokumentation enthalten sind<\/p>\n<\/li>\n Fotos von Whiteboards<\/strong>aus Brainstorming-Sitzungen<\/p>\n<\/li>\n Handgezeichnete Prozessdiagramme<\/strong>und Systemskizzen<\/p>\n<\/li>\n Referenzbilder<\/strong>die von Kunden oder Stakeholdern bereitgestellt werden<\/p>\n<\/li>\n Alte Diagramme<\/strong>die nur als PNG-, JPG-, GIF- oder andere Bilddateien verf\u00fcgbar sind<\/p>\n<\/li>\n Konzeptdiagramme<\/strong>die als visuelle Inspiration f\u00fcr neue Modelle dienen<\/p>\n<\/li>\n<\/ul>\n Tipp:<\/strong>Die Bildqualit\u00e4t ist wichtig. F\u00fcr beste Ergebnisse verwenden Sie Bilder mit lesbaren Beschriftungen, gutem Kontrast und deutlich sichtbaren Verbindungen. Komplexe Diagramme erfordern m\u00f6glicherweise eine iterative Verfeinerung.<\/p>\n Szenario:<\/strong>Sie haben eine Bildschirmaufnahme eines Sequenzdiagramms aus einem alten Word-Dokument, das den Benutzerauthentifizierungsfluss zeigt.<\/p>\n Anweisung:<\/strong><\/p>\n Erstellen Sie ein Sequenzdiagramm in PlantUML basierend auf dem bereitgestellten Bild. Beziehen Sie alle Akteure, Nachrichten und Aktivierungsleisten ein.<\/p>\n<\/blockquote>\n![\"\"](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ac60a9b87f31.png\")
<\/p>\n
\nSchl\u00fcsselkonzepte<\/h2>\n
Was ist VPasCode?<\/h3>\n
![\"\"](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ac60b2c8a856.png\")
<\/p>\n\n
Was ist KI-gest\u00fctzte Diagrammerstellung?<\/h3>\n
Warum Diagramm-as-Code wichtig ist<\/h3>\n
![\"\"](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ac60b92d996e.png\")
<\/p>\n\n
\nSo generieren Sie Diagrammcode aus einem Bild<\/h2>\n
Schritt 1: AI Generate \u00f6ffnen<\/h3>\n
![\"\"](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6aba028bb5acb.png\"\/)
<\/p>\nSchritt 2: Ihr Diagrammbild hochladen<\/h3>\n
![\"Laden](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6aba0d3dc0149.png\"\/)
<\/p>\nSchritt 3: Eine Anweisung eingeben<\/h3>\n
\n
![\"Diagrammbeschreibung](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6aba0d623144a.png\"\/)
<\/p>\nSchritt 4: Klicken Sie auf \u201eKI generieren\u201c.<\/h3>\n
![\"Diagramm](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6aba0d7b3a840.png\"\/)
<\/p>\nSchritt 5: \u00dcberpr\u00fcfen und bearbeiten Sie das Ergebnis.<\/h3>\n
\nWelche Bilder k\u00f6nnen Sie verwenden?<\/h2>\n
\n
\nPraktische Beispiele<\/h2>\n
Beispiel 1: Konvertieren eines alten Sequenzdiagramms<\/h3>\n
\n
![\"\"](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ac60cfbd965d.png\")
<\/p>\n
\n
\n