Diagramme sind oft der schnellste Weg, ein System, einen Workflow, eine Architektur oder einen Geschäftsprozess zu erklären. Die Nachbildung eines bestehenden Diagramms in einem Diagramm-Tool kann jedoch erhebliche Zeit in Anspruch nehmen – insbesondere, wenn das Originaldiagramm nur als Bild verfügbar ist.
Visual Paradigm hat VPasCode um eine bildbasierte KI-Diagrammerstellung erweitert. Sie können nun ein Diagrammbild zusammen mit einer Textanweisung hochladen und die KI anweisen, bearbeitbaren Diagrammcode basierend auf der visuellen Referenz zu generieren.
Das Bild kann ein in einer anderen Anwendung erstelltes Diagramm, ein Screenshot aus einem Dokument oder einer Website, ein Diagramm aus einem Buch oder sogar eine handgezeichnete Skizze sein. Anstatt jede Form, Beschriftung und Beziehung manuell neu zu erstellen, können Sie VPasCode verwenden, um einen Ausgangspunkt im Diagramm-als-Code-Format zu erstellen und die Bearbeitung im Browser fortzusetzen.
Probieren Sie die KI-Diagrammerstellung in VPasCode aus
Was ist die KI-Diagrammerstellung in VPasCode?
VPasCode ist eine Online-Plattform für Diagramm-als-Code, die textbasierte Diagrammsprachen und strukturierte Daten in visuelle Diagramme umwandelt. Es unterstützt gängige Formate wie PlantUML, Mermaid, Graphviz, Markmap, ECharts, JSON, YAML, XML, CSV, DBML, SQL und mehr.
Vor dieser Erweiterung funktionierte die KI-Diagrammerstellung Funktion hauptsächlich auf Textanweisungen. Sie konnten beispielsweise einen Prompt wie diesen eingeben:
Erstellen Sie ein Use-Case-Diagramm in PlantUML für ein Versicherungssystem.
VPasCode generierte daraufhin Diagrammcode aus Ihrer Beschreibung. Da nun auch die Eingabe von Bildern möglich ist, können Sie sowohl eine visuelle Referenz als auch eine Anweisung in natürlicher Sprache bereitstellen. Dies erleichtert es, die Struktur eines bestehenden Diagramms nachzubilden, ein visuelles Konzept in bearbeitbaren Code umzuwandeln oder ein Bild als Ausgangspunkt für ein neues Diagramm zu verwenden.
Sie können beispielsweise ein Sequenzdiagramm hochladen und Folgendes eingeben:
Erstellen Sie ein Sequenzdiagramm in PlantUML basierend auf dem bereitgestellten Bild.
VPasCode analysiert das hochgeladene Bild, interpretiert die Diagrammstruktur und generiert Code, der im Editor gerendert wird. Anschließend können Sie das Ergebnis überprüfen, den Code anpassen und das Diagramm verfeinern, um es Ihren Anforderungen anzupassen.
So generieren Sie Diagrammcode aus einem Bild
Die Erstellung eines KI-generierten Diagramms aus einem Bild erfordert nur wenige Schritte.
- Öffnen Sie KI-Generierung. Klicken Sie in VPasCode oben in der Anwendung auf KI-Generierung. Das Dialogfeld für die KI-Generierung wird angezeigt.
- Laden Sie Ihr Diagrammbild hoch. Klicken Sie Bild hochladen am unteren Rand des Dialogs und wählen Sie ein Bild von Ihrem Computer aus. Sie können ein Bild auch in die Zwischenablage kopieren und Strg+V um es direkt in das Dialogfeld einzufügen.
- Geben Sie eine Anweisung ein. Beschreiben Sie, was VPasCode generieren soll, und geben Sie die gewünschte Diagrammsprache oder das gewünschte Format an. Beispiel: Generieren Sie ein Sequenzdiagramm in PlantUML basierend auf dem bereitgestellten Bild.
- Klicken Sie auf KI-Generieren. VPasCode verarbeitet das Bild und die Anweisung und generiert anschließend Diagrammcode.
- Überprüfen und bearbeiten Sie das Ergebnis. Der generierte Code wird auf der linken Seite des VPasCode-Editors angezeigt, während das gerenderte Diagramm auf der rechten Seite erscheint. Sie können den Code bearbeiten und das visuelle Ergebnis in Echtzeit aktualisiert sehen.
Dieser Workflow bietet Ihnen die Geschwindigkeit der KI-Diagrammerstellung und bewahrt gleichzeitig die Flexibilität von Diagramm-as-Code. Das generierte Ergebnis ist kein statisches Bild, das Sie nur betrachten können. Es wird zu bearbeitbarem Code, den Sie verfeinern, erweitern, teilen und wiederverwenden können.
Welche Bilder können Sie verwenden?
Die Bild-Eingabefunktion ist nützlich, wenn Ihr Diagramm visuell vorhanden ist, aber nicht in einem bearbeitbaren Diagrammformat. Mögliche Quellen sind:
- Bildschirmaufnahmen von Diagrammen, die in einer anderen Diagramm-Anwendung erstellt wurden
- Bilder, die aus technischen Büchern, Artikeln oder Websites kopiert wurden
- Architekturdiagramme, die in der Projektdokumentation enthalten sind
- Fotos von Whiteboards
- Handgezeichnete Prozessdiagramme und Systemskizzen
- Referenzbilder, die von Kunden oder Stakeholdern bereitgestellt wurden
- Alte Diagramme, die nur als PNG-, JPG-, GIF- oder andere Bilddateien verfügbar sind
- Konzeptdiagramme, die als visuelle Inspiration für ein neues Modell dienen
Bildqualität und Lesbarkeit können das generierte Ergebnis beeinflussen. Für das beste Ergebnis verwenden Sie ein Bild mit lesbaren Beschriftungen, gutem Kontrast und deutlich sichtbaren Verbindungen. Wenn das ursprüngliche Diagramm komplex ist, erzielen Sie möglicherweise bessere Ergebnisse, indem Sie zunächst eine Erstversion generieren und diese anschließend durch zusätzliche Anweisungen oder manuelle Codebearbeitungen verfeinern.
Warum KI-Diagrammerstellung aus Bildern verwenden?
Statische Visualisierungen in bearbeitbaren Diagrammcode umwandeln
Ein Diagrammbild ist nützlich zum Anzeigen und Teilen, aber es ist schwierig zu pflegen. Sie können ein Element nicht einfach umbenennen, eine neue Beziehung hinzufügen, das Layout ändern oder Revisionen in einer PNG-Datei verfolgen.
Die KI-Diagrammerstellung bietet einen praktischen Weg, von einer statischen visuellen Referenz zu bearbeitbarem Diagrammcode zu wechseln. Sobald das Diagramm generiert wurde, kann es mit PlantUML, Mermaid, Graphviz oder einem anderen unterstützten Format aktualisiert werden.
Diagramme aus verschiedenen Quellen wiederverwenden
Traditionelle Import-Workflows erfordern oft ein bestimmtes Dateiformat. Wenn ein Diagramm in einer Anwendung erstellt wurde, die das erforderliche Exportformat nicht unterstützt, kann die manuelle Neukreation die einzige Option sein.
Bei der bildbasierten KI-Diagrammerstellung ist das ursprüngliche Erstellungstool weniger wichtig. Sie können eine Bildschirmaufnahme, ein heruntergeladenes Referenzbild oder ein fotografiertes Skizzenbild als Ausgangspunkt für Ihr VPasCode-Diagramm verwenden.
Wiederholende manuelle Arbeit reduzieren
Das manuelle Nachbauen eines Diagramms umfasst die Identifizierung jedes Teilnehmers, jeder Entität, jeder Komponente, jeder Beschriftung, jeder Verbindung und jeder Beziehung. Es erfordert auch das Anordnen der Elemente und die Prüfung, ob das Endergebnis dieselbe Idee vermittelt wie das Original.
KI kann dabei helfen, die erste Version des Diagrammcodes schnell zu erstellen. Anstatt mit einem leeren Editor zu beginnen, starten Sie mit einer generierten Struktur, die Sie überprüfen und verbessern können.
Diagram-as-Code zugänglicher machen
Diagram-as-Code bietet wichtige Vorteile: Diagramme können als Text bearbeitet, mit dem Quellcode gespeichert, über Änderungen überprüft und bei jeder Weiterentwicklung des zugrunde liegenden Modells neu generiert werden. Das Erlernen der Syntax kann jedoch für neue Benutzer eine Hürde darstellen.
Die KI-gestützte Diagrammerstellung hilft, die Lücke zwischen visueller Modellierung und Diagrammcode zu überbrücken. Benutzer können mit einem Bild und einer Anweisung in einfacher Sprache beginnen und dann den generierten Code im VPasCode-Editor erlernen und verfeinern.
Während der Erstellung eines neuen Diagramms eine visuelle Referenz bewahren
Sie müssen ein Bild nicht exakt nachbilden. Ein hochgeladenes Bild kann auch als Referenz für die Erstellung eines modifizierten oder erweiterten Diagramms dienen.
Sie können beispielsweise ein bestehendes Bild der Systemarchitektur bereitstellen und VPasCode auffordern, ein PlantUML-Diagramm zu generieren, das einen Zahlungsdienst hinzufügt, externe Systeme trennt oder die Architektur in logische Schichten umstrukturiert.
VPasCode: Mehr als ein KI-Diagrammerzeuger
Die KI-gestützte Diagrammerstellung ist ein Teil des VPasCode-Erlebnisses. VPasCode wurde als vollständiger Diagram-as-Code-Arbeitsbereich für Entwickler, Architekten, technische Autoren und Projektteams konzipiert.
Automatische Formaterkennung
VPasCode kann das Diagramm- oder Datenformat aus dem Inhalt erkennen, den Sie in den Editor einfügen. Dies verringert die Notwendigkeit, die Sprache vor der Anzeige des Ergebnisses manuell zu konfigurieren.
Echtzeit-Vorschau des Diagramms
Während Sie den generierten Code bearbeiten, aktualisiert sich das gerenderte Diagramm im Vorschau-Bereich. Dies erleichtert das Testen von Änderungen, das Korrigieren von Beschriftungen, das Hinzufügen von Beziehungen und die Verbesserung des Diagramm-Layouts.
Unterstützung für gängige Diagrammsprachen
Sie können VPasCode verwenden, um Diagramme mit PlantUML, Mermaid, Graphviz, D2, Markmap und ECharts zu erstellen. Zu den unterstützten Diagrammkategorien gehören Use-Case-Diagramme, Sequenzdiagramme, Klassendiagramme, Aktivitätsdiagramme, Komponentendiagramme, Bereitstellungsdiagramme, Zustandsdiagramme, ER-Diagramme, Flussdiagramme, Mindmaps, Gantt-Diagramme, C4-Diagramme und mehr.
KI-gestützte Code-Modifikation
Nach der Erstellung eines Diagramms können Sie weiterhin mit der KI arbeiten, indem Sie sie auffordern, den Code zu modifizieren. Sie können beispielsweise bitten, einen neuen Akteur hinzuzufügen, einen Ausnahmefluss einzuführen, Komponenten nach Subsystem zu gruppieren oder ein komplexes Diagramm zu vereinfachen.
KI-gestützte Fehlerbehebung
Enthält der generierte oder manuell bearbeitete Code ein Syntaxproblem, kann VPasCode dabei helfen, es zu beheben. Die KI-Fehlerbehebungsfunktion kann Korrekturen vorschlagen und Codeunterschiede anzeigen, damit Sie verstehen können, was sich geändert hat.
Native Diagrammübersetzung
Diagrammbeschriftungen können auch in andere Sprachen übersetzt werden. Dies ist nützlich für Teams, die technische Diagramme für internationale Benutzer, Kunden oder Projektbüros vorbereiten müssen.
Freigabe und Export
Sobald Ihr Diagramm fertig ist, können Sie es über eine URL oder einen QR-Code freigeben oder als PNG- oder SVG-Bild exportieren. Der SVG-Export ist besonders nützlich, wenn Sie ein skalierbares Diagramm für Dokumentation, Präsentationen oder Großformatanzeigen benötigen.
Generierte Diagramme mit dem Visual Paradigm-Ökosystem verbinden
VPasCode ist auch mit dem breiteren Visual Paradigm-Ökosystem verbunden. Dies bedeutet, dass ein KI-generiertes Diagramm Teil eines umfassenderen Dokumentations- und Modellierungsworkflows werden kann, anstatt als isoliertes Online-Bild zu verbleiben.
Dokumentieren Sie das Diagramm mit OpenDocs
Sie können das Diagramm an die OpenDocs-Pipeline senden und es auf einer Dokumentenseite erneut verwenden. Dies erleichtert die Kombination eines generierten Diagramms mit Erklärungen, Anforderungen, Designentscheidungen, User Stories und anderem technischen Inhalt.
Die Verbindung von Diagrammen mit der Dokumentation kann auch den Wartungsaufwand für Dokumente verringern. Wenn sich das Diagramm ändert, können Sie die Diagrammquelle aktualisieren und die neueste Version über die Pipeline senden, anstatt das Dokumentationsobjekt von Grund auf neu zu erstellen.
Visuelle Modellierung mit Visual Paradigm Desktop fortsetzen
Wenn Sie tiefgehende Fähigkeiten zur visuellen Modellierung benötigen, senden Sie das Diagramm an die Pipeline und importieren Sie es als neues Diagramm in Visual Paradigm Desktop. Dies ermöglicht es Ihnen, VPasCode für die schnelle Generierung von Diagrammcode und Visual Paradigm Desktop für umfangreichere Modellierungs- und Projektarbeiten zu verwenden.
Das Diagramm mit Visual Paradigm Online nachbearbeiten
Sie können Ihre Diagramm auch in Visual Paradigm Online weiter bearbeiten. Klicken Sie In VP Online bearbeiten unten rechts im Diagramm-Viewer, um das Diagramm für weitere visuelle Bearbeitung und Verfeinerung zu öffnen.
Vom Bildreferenz zum lebendigen Diagramm
Der wichtigste Vorteil dieses Workflows besteht darin, dass er verändert, was Sie mit einem vorhandenen Diagrammbild tun können.
Früher war ein Bild oft die Endform eines Diagramms. Sie konnten es ansehen, herunterladen oder in ein Dokument einfügen, aber Änderungen erforderten normalerweise Zugriff auf die ursprüngliche Quelldatei oder eine vollständige Neuaufzeichnung.
Mit der bildbasierten KI-Diagrammerstellung kann das Bild zum Ausgangspunkt eines neuen Diagramm-als-Code-Workflows werden:
- Beginnen Sie mit einem vorhandenen Bild oder einer handgezeichneten Skizze.
- Verwenden Sie KI, um ein bearbeitbares Diagrammskript zu generieren.
- Überprüfen Sie den generierten Code und das gerenderte Ergebnis.
- Korrigieren Sie Beschriftungen, Beziehungen und Layout-Details.
- Fordern Sie die KI auf, das Diagramm zu ändern oder zu erweitern.
- Teilen, exportieren, dokumentieren oder das Ergebnis weiter modellieren.
Dieser Ansatz ist besonders nützlich, wenn Teams veraltete Dokumentation übernehmen, Diagramme zwischen Tools migrieren oder informelle Ideen in strukturierte technische Modelle umwandeln müssen.
Tipps für bessere KI-generierte Diagramme
- Verwenden Sie ein klares Bild:Höher aufgelöste Bilder mit lesbarem Text liefern in der Regel bessere Referenzen.
- Geben Sie den Diagrammtyp an:Geben Sie an, ob Sie ein Sequenzdiagramm, ein Use-Case-Diagramm, ein Flussdiagramm, ein Klassendiagramm, ein Komponentendiagramm oder ein anderes Format wünschen.
- Nennen Sie die Zielsprache:Fügen Sie in Ihrer Anweisung PlantUML, Mermaid, Graphviz oder ein anderes unterstütztes Format ein.
- Beschreiben Sie das gewünschte Ergebnis:Erklären Sie, ob Sie eine exakte Nachbildung, eine vereinfachte Version oder ein erweitertes Diagramm wünschen.
- Überprüfen Sie generierte Beschriftungen:Text in Screenshots und handschriftlichen Bildern kann manuelle Korrekturen erfordern.
- Generieren Sie komplexe Diagramme in Stufen:Erstellen Sie für ein großes Diagramm zunächst eine erste Version und bitten Sie die KI dann, bestimmte Abschnitte hinzuzufügen oder neu zu organisieren.
- Verwenden Sie die Live-Vorschau:Überprüfen Sie das gerenderte Diagramm während der Codebearbeitung, um fehlende Beziehungen oder unerwartete Layoutänderungen zu erkennen.
- Behalten Sie den Code als Quelle:Sobald das Diagramm korrekt ist, bewahren Sie den generierten Code auf, damit zukünftige Aktualisierungen einfacher sind.
Wer kann von der bildbasierten KI-Diagrammerstellung profitieren?
Softwareentwickler
Entwickler können Architekturskizzen, Sequenzreferenzen und Legacy-Screenshots in bearbeitbare Diagramme umwandeln, die zusammen mit technischem Code und Dokumentation gepflegt werden können.
Softwarearchitekten
Architekten können Bildreferenzen verwenden, um einen strukturierten Ausgangspunkt für Systemkontextdiagramme, Komponentendiagramme, Bereitstellungsdiagramme und C4-Modelle zu erstellen.
Fachanalysten
Fachanalysten können Prozessskizzen oder Workflow-Bilder in bearbeitbare Flussdiagramme und Aktivitätsdiagramme umwandeln und das Ergebnis anschließend mit den Beteiligten verfeinern.
Technische Redakteure
Technische Redakteure können visuelle Referenzen in wiederverwendbaren Diagrammcode umwandeln und die daraus resultierenden Diagramme in OpenDocs oder andere Projektdokumentationen einbeziehen.
Schüler und Lehrkräfte
Schüler können die KI-Diagrammerstellung nutzen, um zu untersuchen, wie visuelle Diagramme auf PlantUML- oder Mermaid-Syntax abgebildet werden. Lehrkräfte können Referenzdiagramme als Beispiele für Unterrichtseinheiten zu UML, Systemanalyse, Softwarearchitektur oder Prozessmodellierung verwenden.
Teams, die zwischen Tools wechseln
Teams, die Diagramm-Anwendungen wechseln, können die Bildeingabe als praktische Migrationshilfe nutzen, wenn eine ursprüngliche bearbeitbare Datei nicht verfügbar ist oder nicht direkt importiert werden kann.
Beginnen Sie mit der Erstellung von Diagrammen mit VPasCode
VPasCode kombiniert KI-Diagrammerstellung, Diagramm-als-Code-Bearbeitung, Echtzeit-Rendering, Code-Modifikation, Fehlerbehebung, Teilen, Export und Visual-Paradigm-Integrationen in einem einzigen Online-Arbeitsbereich.
Egal, ob Sie mit einer Textidee, einem bestehenden Diagrammbild, einem Screenshot oder einer handschriftlichen Skizze beginnen – VPasCode hilft Ihnen, schneller vom visuellen Konzept zu bearbeitbarem Diagrammcode zu gelangen.
Öffnen Sie den VPasCode-Editor und testen Sie die KI-Diagrammerstellung für Ihr nächstes Architekturdiagramm, Ihren Workflow, Ihr UML-Modell oder Ihre technische Illustration.
Häufig gestellte Fragen
Was ist KI-Diagrammerstellung?
KI-Diagrammerstellung ist eine Funktion, die natürliche Sprachanweisungen verwendet, um Diagrammcode zu erstellen. In VPasCode können Sie auch ein Bild hochladen und die KI bitten, Diagrammcode basierend auf der visuellen Referenz zu generieren.
Kann VPasCode Diagrammcode aus einem Screenshot generieren?
Ja. Sie können einen Screenshot eines Diagramms hochladen und eine Anweisung bereitstellen, die den Diagrammtyp und das gewünschte Ausgabeformat beschreibt. VPasCode generiert dann Code, den Sie im Online-Editor überprüfen und bearbeiten können.
Kann ich ein Bild einfügen, anstatt es hochzuladen?
Ja. Kopieren Sie das Bild in Ihre Zwischenablage und drücken SieStrg+V im KI-Generierungsdialog, um es direkt einzufügen.
Welche Diagrammsprachen kann ich verwenden?
VPasCode unterstützt mehrere Diagramm- und Visualisierungsformate, darunter PlantUML, Mermaid, Graphviz, D2, Markmap und ECharts. Das beste Format hängt von der Art des Diagramms ab, das Sie erstellen möchten, und davon, wie Sie es anschließend verwenden planen.
Kann ich das generierte Diagramm bearbeiten?
Ja. Das generierte Diagramm wird als bearbeitbarer Code dargestellt. Sie können den Code direkt ändern, KI nutzen, um Änderungen anzufordern, und das aktualisierte Diagramm in Echtzeit anzeigen.
Ist die KI-gestützte Diagrammerstellung für handgezeichnete Diagramme nützlich?
Ja. Eine handgezeichnete Skizze kann als nützliche visuelle Referenz dienen, insbesondere für Workflows, Systemideen, Prozessdiagramme und frühe Architekturdiskussionen. Klare Schrift und ein gut beleuchtetes Bild können dazu beitragen, das Ergebnis leichter zu verfeinern.
Was kann ich nach der Generierung eines Diagramms tun?
Sie können den Code weiter bearbeiten, Syntaxfehler beheben, Beschriftungen übersetzen, das Diagramm als PNG oder SVG exportieren, es teilen, an OpenDocs senden, in Visual Paradigm Desktop importieren oder in Visual Paradigm Online bearbeiten.