Von statischen Bildern zu lebendigen Diagrammen: Ein umfassender Leitfaden zur KI-gestützten Diagrammerstellung mit VPasCode

Einführung

Diagramme sind die universelle Sprache des systemischen Denkens. Ob Sie eine komplexe Softwarearchitektur erklären, einen Geschäftsprozess abbilden oder eine Benutzerreise skizzieren: Visuelle Darstellungen vermitteln Ideen schneller und klarer als Text allein. Doch in der Welt der Diagrammerstellung besteht eine anhaltende Herausforderung: statische Bilder sind Sackgassen.

Wenn Sie ein Diagramm als PNG, JPG oder sogar als Foto einer Whiteboard-Skizze erhalten, können 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ändig und fehleranfällig.

Hier kommt VPasCode AI, die erweiterte Diagramm-als-Code-Plattform von Visual Paradigm, die nun die KI-gestützte Diagrammerstellung auf Basis von Bildern. Diese Funktion wandelt statische visuelle Referenzen – Screenshots, Legacy-Diagramme, handschriftliche Skizzen oder exportierte Bilder aus anderen Tools – in bearbeitbaren, wartbaren Diagrammcode in gängigen Formaten wie PlantUML, Mermaid und Graphviz um.

Dieser umfassende Leitfaden führt Sie durch alles, was Sie wissen müssen, um diese leistungsstarke Funktion zu nutzen – von der grundlegenden Anwendung bis zu fortgeschrittenen Workflows, die Ihre generierten Diagramme mit größeren Dokumentations- und Modellierungssystemen verbinden.

Schlüsselkonzepte

Was ist VPasCode?

VPasCode ist eine Online-Diagramm-als-Code-Plattform, die textbasierte Diagrammsprachen und strukturierte Daten in visuelle Diagramme umwandelt. Es werden mehrere Formate unterstützt, darunter:

• PlantUML(UML-Diagramme)

• Mermaid(Flussdiagramme, Sequenzdiagramme, Gantt-Diagramme)

• Graphviz(Graphenvisualisierung)

• Markmap(Mindmaps)

• ECharts(Datenvisualisierungen)

• JSON, YAML, XML, CSV, DBML, SQL(Diagramme für Datenstrukturen)

Was ist KI-gestützte Diagrammerstellung?

Die KI-Diagrammerstellung nutzt künstliche Intelligenz, um aus natürlichen Sprachanweisungen Diagrammcode zu generieren. Die neueste Erweiterung fügt hinzu die Fähigkeit zur Eingabe von Bildern, wodurch Sie sowohl eine visuelle Referenz als auch einen Textprompt bereitstellen können. Die KI analysiert die Bildstruktur, interpretiert Beziehungen und Beschriftungen und generiert den entsprechenden Diagrammcode, den Sie sofort bearbeiten und verfeinern können.

Warum Diagramm-as-Code wichtig ist

Traditionelle Diagrammwerkzeuge erzeugen statische Bilder oder proprietäre Dateiformate, die schwer zu versionieren, zu überprüfen oder zu warten sind. Diagramm-as-Code bietet mehrere Vorteile:

• Versionierungsfreundlich: Speichern Sie Diagramme zusammen mit Ihrem Quellcode in Git

• Einfache Zusammenarbeit: Überprüfen Sie Änderungen über Pull-Requests

• Automatische Neugenerierung: Aktualisieren Sie Diagramme, wenn sich die zugrunde liegenden Modelle ändern

• Textbasierte Bearbeitung: Verwenden Sie vertraute Code-Editoren und IDEs

• Wiederverwendbarkeit: Diagrammstrukturen einfach kopieren, einfügen und bearbeiten

So generieren Sie Diagrammcode aus einem Bild

Der Workflow ist einfach und erfordert nur wenige Schritte:

Schritt 1: AI Generate öffnen

Klicken Sie in VPasCode auf AI Generateam oberen Rand der Anwendung. Das Dialogfeld für die KI-Generierung wird angezeigt.

Schritt 2: Ihr Diagrammbild hochladen

Klicken Sie auf Bild hochladenam unteren Rand des Dialogs und wählen Sie ein Bild von Ihrem Computer aus. Alternativ können Sie ein Bild in die Zwischenablage kopieren und Strg+Vdrücken, um es direkt in den Dialog einzufügen.

Schritt 3: Eine Anweisung eingeben

Beschreiben Sie, was VPasCode generieren soll, und geben Sie die gewünschte Diagrammsprache oder das gewünschte Format an. Seien Sie spezifisch bezüglich des Diagrammtyps und des Zielformats.

Beispielanweisung:

Erstellen Sie ein Sequenzdiagramm in PlantUML basierend auf dem bereitgestellten Bild.

Schritt 4: Klicken Sie auf „KI generieren“.

VPasCode verarbeitet das Bild und die Anweisung und generiert anschließend den Diagrammcode.

Schritt 5: Ü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 aktualisieren sehen.

Welche Bilder können Sie verwenden?

Die Bild-Eingabefunktion ist vielseitig und funktioniert mit verschiedenen Quelltypen:

• Bildschirmaufnahmenvon Diagrammen, die in einer anderen Diagrammierungsanwendung erstellt wurden

• Kopierte Bilderaus technischen Büchern, Artikeln oder Websites

• Architekturdiagrammedie in der Projektdokumentation enthalten sind

• Fotos von Whiteboardsaus Brainstorming-Sitzungen

• Handgezeichnete Prozessdiagrammeund Systemskizzen

• Referenzbilderdie von Kunden oder Stakeholdern bereitgestellt werden

• Alte Diagrammedie nur als PNG-, JPG-, GIF- oder andere Bilddateien verfügbar sind

• Konzeptdiagrammedie als visuelle Inspiration für neue Modelle dienen

Tipp:Die Bildqualität ist wichtig. Für beste Ergebnisse verwenden Sie Bilder mit lesbaren Beschriftungen, gutem Kontrast und deutlich sichtbaren Verbindungen. Komplexe Diagramme erfordern möglicherweise eine iterative Verfeinerung.

Praktische Beispiele

Beispiel 1: Konvertieren eines alten Sequenzdiagramms

Szenario:Sie haben eine Bildschirmaufnahme eines Sequenzdiagramms aus einem alten Word-Dokument, das den Benutzerauthentifizierungsfluss zeigt.

Anweisung:

Erstellen Sie ein Sequenzdiagramm in PlantUML basierend auf dem bereitgestellten Bild. Beziehen Sie alle Akteure, Nachrichten und Aktivierungsleisten ein.

@startuml
skinparam defaultFontSize 14
skinparam defaultFontColor #333333
!include https://static.visual-paradigm.com/web/resources/plantuml-stdlib/themes/vp.puml
skinparam sequenceParticipant underline
skinparam vpDiagramType InteractionDiagram

title Sequenzdiagramm zur Bestellabwicklung

actor Kunde
participant "Bestelldienst" as OrderService
participant "Zahlungs-Gateway" as PaymentGateway
participant "Lagerdienst" as InventoryService
database "Bestelldatenbank" as OrderDB

Kunde -> OrderService : placeOrder(items)
activate OrderService

OrderService -> InventoryService : checkStock(items)
activate InventoryService
InventoryService --> OrderService : stockAvailable(items)
deactivate InventoryService

alt Lagerbestand verfügbar
    OrderService -> PaymentGateway : authorizePayment(amount)
    activate PaymentGateway
    PaymentGateway --> OrderService : paymentAuthorized(reference)
    deactivate PaymentGateway

    OrderService -> OrderDB : saveOrder(order)
    activate OrderDB
    OrderDB --> OrderService : orderId
    deactivate OrderDB

    OrderService --> Kunde : orderConfirmation(orderId)
else Lagerbestand nicht verfügbar
    OrderService --> Kunde : orderRejected(reason)
end

deactivate OrderService

@enduml

Ergebnis:VPasCode generiert PlantUML-Code, den Sie sofort bearbeiten können, um neue Authentifizierungsschritte hinzuzufügen, Nachrichtennamen zu ändern oder das Layout anzupassen.

Beispiel 2: Umwandlung einer handgezeichneten Architektur-Skizze

Szenario:Ihr Team hat während einer Design-Sitzung eine Microservices-Architektur auf einem Whiteboard skizziert.

Anweisung:

Erstellen Sie ein Komponentendiagramm in PlantUML basierend auf dieser handgezeichneten Skizze. Ordnen Sie Dienste nach Domäne und zeigen Sie API-Verbindungen auf.

@startuml
!include https://static.visual-paradigm.com/web/resources/plantuml-stdlib/themes/vp.puml
skinparam vpDiagramType ComponentDiagram
' skinparam linetype ortho
left to right direction
skinparam defaultFontSize 14
skinparam defaultFontColor #333333

title E-Commerce-Plattform - Komponentendiagramm

/'
Architektonischer Überblick
Dienste sind nach Geschäftsbereich gruppiert (Erlebnis, Handel, Identität,
Zahlung, Erfüllung). Schnittstellen (Kugel-Gelenk) stellen die API-Verträge
zwischen den Bereichen dar. Jede Schnittstelle wird von genau einer Komponente bereitgestellt
und von einer oder mehreren verschiedenen Komponenten konsumiert.
'/

' 1. Pakete & Komponenten
package "Erlebnis-Bereich" {
  component "Web-Shopfront" as WebStore
  component "Mobile App" as MobileApp
}

package "Handelsbereich" {
  component "Bestelldienst" as OrderSvc
  component "Katalogdienst" as CatalogSvc
  component "Warenkorbdienst" as CartSvc
}

package "Identitätsbereich" {
  component "Identitätsdienst" as IdentitySvc
}

package "Zahlungsbereich" {
  component "Zahlungsdienst" as PaymentSvc
}

package "Erfüllungsbereich" {
  component "Versanddienst" as ShippingSvc
  component "Benachrichtigungsdienst" as NotifySvc
}

' 2. Schnittstellendeklarationen
interface "Shopfront-API" as iStorefrontAPI
interface "Warenkorb-API" as iCartAPI
interface "Katalog-API" as iCatalogAPI
interface "Bestell-API" as iOrderAPI
interface "Auth-API" as iAuthAPI
interface "Zahlungs-API" as iPaymentAPI
interface "Versand-API" as iShippingAPI
interface "Benachrichtigungs-API" as iNotifyAPI

' 3. Bereitgestellte Schnittstellen
iStorefrontAPI -- WebStore
iStorefrontAPI -- MobileApp
iCartAPI -- CartSvc
iCatalogAPI -- CatalogSvc
iOrderAPI -- OrderSvc
iAuthAPI -- IdentitySvc
iPaymentAPI -- PaymentSvc
iShippingAPI -- ShippingSvc
iNotifyAPI -- NotifySvc

' 4. Erforderliche Schnittstellen
CartSvc --( iCatalogAPI
OrderSvc --( iCartAPI
OrderSvc --( iCatalogAPI
OrderSvc --( iAuthAPI
OrderSvc --( iPaymentAPI
OrderSvc --( iShippingAPI
OrderSvc --( iNotifyAPI
PaymentSvc --( iAuthAPI
ShippingSvc --( iOrderAPI
NotifySvc --( iOrderAPI
WebStore --( iCartAPI
WebStore --( iOrderAPI
WebStore --( iAuthAPI
MobileApp --( iCartAPI
MobileApp --( iOrderAPI
MobileApp --( iAuthAPI

@enduml

Ergebnis:Sie erhalten ein strukturiertes Komponentendiagramm, das das Wesentliche Ihrer Skizze einfängt, das Sie anschließend mit korrekten Dienstnamen verfeinern, Datenbankkomponenten hinzufügen und für die Dokumentation exportieren können.

Beispiel 3: Migration von einem anderen Tool

Szenario:Sie wechseln von einem proprietären Diagramm-Tool zu VPasCode, können jedoch nur Bilder exportieren.

Anweisung:

Erstellen Sie ein Anwendungsfalldiagramm in PlantUML basierend auf diesem Bild. Bewahren Sie alle Akteure, Anwendungsfälle und Beziehungen auf.

@startuml
skinparam defaultFontSize 14
skinparam defaultFontColor #333333
!include https://static.visual-paradigm.com/web/resources/plantuml-stdlib/themes/vp.puml
skinparam vpDiagramType UseCaseDiagram
left to right direction

actor "Kunden(Haupt)" as Customer
actor "Zahlungs-Gatewayn(Neben)" as Gateway

rectangle "Online-Shopping-System" {
  usecase "Produkte durchsuchen" as UC1
  usecase "Bestellung aufgeben" as UC2
  usecase "Zahlung leisten" as UC3
  usecase "Bestellstatus anzeigen" as UC4
  usecase "Katalog verwalten" as UC5
  usecase "Benutzer authentifizieren" as UC6
}

actor "Administratorn(Haupt)" as Admin

Customer -[#black]- UC1
Customer -[#black]- UC2
Customer -[#black]- UC3
Customer -[#black]- UC4
Admin -[#crimson]- UC5
UC3 -[#goldenrod]-- Gateway

UC2 ..> UC6 : <<include>>
UC3 ..> UC6 : <<include>>
UC4 <.. UC3 : <<extend>>

@enduml

Ergebnis:Ein bearbeitbares PlantUML-Diagramm, das als Ausgangspunkt in dem neuen Tool dient und Stunden manueller Neugestaltung eliminiert.

Warum KI-Diagrammerstellung aus Bildern verwenden?

1. Konvertieren Sie statische Visualisierungen in bearbeitbaren Diagrammcode

Ein Diagrammbild ist nützlich zum Anzeigen und Teilen, lässt sich jedoch schwer warten. Sie können ein Element nicht einfach umbenennen, eine neue Beziehung hinzufügen, das Layout ändern oder Revisionen in einer PNG-Datei nachverfolgen. Die KI-gestützte Diagrammgenerierung bietet einen praktischen Weg, von einer statischen visuellen Referenz zu bearbeitbarem Diagrammcode zu wechseln.

2. Diagramme aus verschiedenen Quellen wiederverwenden

Traditionelle Import-Workflows erfordern oft bestimmte Dateiformate. Wenn ein Diagramm in einer Anwendung erstellt wurde, die das erforderliche Exportformat nicht unterstützt, bleibt möglicherweise nur die manuelle Neukreation. Bei der bildbasierten KI-Diagrammgenerierung ist das ursprüngliche Erstellungstool weniger wichtig.

3. Wiederholende manuelle Arbeit reduzieren

Die manuelle Neukreation eines Diagramms erfordert die Identifizierung jedes Teilnehmers, jeder Entität, jeder Komponente, jeder Beschriftung, jedes Verbinders und jeder Beziehung. Die KI kann dabei helfen, schnell die erste Version des Diagrammcodes zu erstellen, sodass Sie eine generierte Struktur zur Überprüfung und Verbesserung haben, anstatt bei Null anzufangen.

4. Diagramm-as-Code zugänglicher machen

Diagramm-as-Code bietet wichtige Vorteile, doch das Erlernen der Syntax kann für neue Benutzer eine Hürde darstellen. Die KI-gestützte Diagrammgenerierung 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 erlernen und verfeinern.

5. Eine visuelle Referenz beim Erstellen neuer Diagramme bewahren

Sie müssen ein Bild nicht exakt reproduzieren. Ein hochgeladenes Bild kann als Referenz für die Erstellung eines modifizierten oder erweiterten Diagramms dienen. Beispielsweise können Sie ein bestehendes Systemarchitektur-Bild bereitstellen und VPasCode auffordern, ein PlantUML-Diagramm zu generieren, das einen Zahlungsdienst hinzufügt oder die Architektur in logische Schichten umstrukturiert.

Erweiterte Funktionen über die Bildgenerierung hinaus

VPasCode ist mehr als nur ein KI-Diagrammgenerator. Es ist ein vollständiger Diagramm-as-Code-Arbeitsbereich:

Automatische Formaterkennung

VPasCode kann das Diagramm- oder Datenformat aus dem Inhalt erkennen, den Sie in den Editor einfügen, wodurch die manuelle Konfiguration der Sprache entfällt.

Echtzeit-Vorschau des Diagramms

Während Sie den generierten Code bearbeiten, aktualisiert sich das gerenderte Diagramm im Vorschau-Bereich, sodass Änderungen einfach getestet und das Layout verbessert werden können.

KI-gestützte Code-Modifikation

Nach der Generierung eines Diagramms können Sie weiterhin mit der KI arbeiten, indem Sie sie auffordern, den Code zu modifizieren. Beispiele:

• „Fügen Sie einen neuen Akteur namens PaymentGateway hinzu“

• „Führen Sie einen Ausnahmefluss für fehlgeschlagene Authentifizierung ein“

• „Gruppieren Sie Komponenten nach Subsystem“

• „Vereinfachen Sie dieses komplexe Diagramm“

KI-gestützte Fehlerbehebung

Wenn der generierte oder manuell bearbeitete Code Syntaxprobleme enthält, kann VPasCode dabei helfen, diese zu beheben. Die KI-Fehlerbehebungsfunktion schlägt Korrekturen vor und zeigt Code-Unterschiede an, damit Sie verstehen, was sich geändert hat.

Eingebaute Diagrammübersetzung

Diagrammbeschriftungen können in andere Sprachen übersetzt werden, was für Teams nützlich ist, die technische Diagramme für internationale Benutzer oder Projektbüros vorbereiten.

Teilen und Exportieren

Teilen Sie Diagramme über URLs oder QR-Codes oder exportieren Sie sie als PNG- oder SVG-Bilder. Der SVG-Export ist besonders nützlich für skalierbare Diagramme in Dokumentationen und Präsentationen.

Verbindung generierter Diagramme mit dem Visual Paradigm-Ökosystem

VPasCode ist in das breitere Visual Paradigm-Ökosystem integriert und ermöglicht es, dass KI-generierte Diagramme Teil umfassender Workflows werden:

Dokument mit OpenDocs

Senden Sie das Diagramm an die OpenDocs-Pipeline und verwenden Sie es auf einer Dokumentenseite erneut. Kombinieren Sie generierte Diagramme mit Erklärungen, Anforderungen, Designentscheidungen und User Stories. Wenn sich das Diagramm ändert, aktualisieren Sie die Diagrammquelle und senden Sie die neueste Version über die Pipeline.

Fahren Sie mit der visuellen Modellierung mit Visual Paradigm Desktop fort

Senden Sie das Diagramm an die Pipeline und importieren Sie es als neues Diagramm in Visual Paradigm Desktop. Verwenden Sie VPasCode für die schnelle Generierung von Diagramm-Code und Visual Paradigm Desktop für umfangreiche Modellierungs- und Projektarbeiten.

Nachbearbeitung mit Visual Paradigm Online

Klicken Sie In VP Online bearbeiten unten rechts im Diagramm-Viewer, um das Diagramm für weitere visuelle Bearbeitung und Verfeinerung in Visual Paradigm Online zu öffnen.

Tipps für bessere KI-generierte Diagramme

1. Verwenden Sie ein klares Bild:Höher aufgelöste Bilder mit lesbarem Text liefern in der Regel bessere Referenzen.

2. Geben Sie den Diagrammtyp an:Geben Sie an, ob Sie ein Sequenzdiagramm, ein Use-Case-Diagramm, ein Flussdiagramm, ein Klassendiagramm oder ein anderes Format wünschen.

3. Nennen Sie die Zielsprache:Fügen Sie in Ihrer Anweisung PlantUML, Mermaid, Graphviz oder ein anderes unterstütztes Format ein.

4. Beschreiben Sie das gewünschte Ergebnis:Erklären Sie, ob Sie eine exakte Nachbildung, eine vereinfachte Version oder ein erweitertes Diagramm wünschen.

5. Überprüfen Sie generierte Beschriftungen:Text in Screenshots und handschriftlichen Bildern erfordert möglicherweise manuelle Korrekturen.

6. Generieren Sie komplexe Diagramme in Stufen:Erstellen Sie für große Diagramme zunächst eine erste Version und bitten Sie die KI dann, bestimmte Abschnitte hinzuzufügen oder neu zu organisieren.

7. Verwenden Sie die Live-Vorschau:Überprüfen Sie das gerenderte Diagramm während der Codebearbeitung, um fehlende Beziehungen oder unerwartete Layoutänderungen zu erkennen.

8. 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 profitieren?

Softwareentwickler

Konvertieren Sie Architekturskizzen, Sequenzreferenzen und Legacy-Screenshots in bearbeitbare Diagramme, die gemeinsam mit technischem Code und Dokumentation gepflegt werden.

Softwarearchitekten

Verwenden Sie Bildreferenzen, um strukturierte Ausgangspunkte für Systemkontextdiagramme, Komponentendiagramme, Bereitstellungsdiagramme und C4-Modelle zu erstellen.

Business Analysten

Verwandeln Sie Prozessskizzen oder Workflow-Bilder in bearbeitbare Flussdiagramme und Aktivitätsdiagramme und verfeinern Sie diese anschließend mit den Beteiligten.

Technische Redakteure

Konvertieren Sie visuelle Referenzen in wiederverwendbaren Diagrammcode und fügen Sie die daraus resultierenden Diagramme in OpenDocs oder andere Projektdokumentationen ein.

Schüler und Lehrkräfte

Erkunden Sie, wie visuelle Diagramme auf PlantUML- oder Mermaid-Syntax abgebildet werden. Verwenden Sie Referenzdiagramme als Beispiele für Unterrichtseinheiten zu UML, Systemanalyse oder Softwarearchitektur.

Teams, die zwischen Tools migrieren

Verwenden Sie Bild-Eingaben als praktische Migrationshilfe, wenn originale bearbeitbare Dateien nicht verfügbar sind oder nicht direkt importiert werden können.

Vom Bildreferenz zu einem lebendigen Diagramm

Der wichtigste Vorteil dieses Workflows besteht darin, dass er verändert, was Sie mit einem bestehenden Diagrammbild tun können. Früher war ein Bild oft das Endergebnis – Sie konnten es betrachten oder in ein Dokument einfügen, aber Änderungen erforderten Zugriff auf die ursprüngliche Quelldatei oder eine vollständige Neuaufzeichnung.

Mit der bildbasierten KI-Diagrammerstellung wird das Bild zum Ausgangspunkt eines neuen Diagramm-als-Code-Workflows:

1. Beginnen Sie mit einem bestehenden Bild oder einer handgezeichneten Konzeption

2. Verwenden Sie KI, um ein bearbeitbares Diagrammskript zu generieren

3. Überprüfen Sie den generierten Code und das gerenderte Ergebnis

4. Korrigieren Sie Beschriftungen, Beziehungen und Layout-Details

5. Fordern Sie die KI auf, das Diagramm zu modifizieren oder zu erweitern

6. Teilen, exportieren, dokumentieren oder das Modellieren des Ergebnisses fortsetzen

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.

Fazit

Die KI-Diagrammerstellungsfunktion von VPasCode stellt einen bedeutenden Fortschritt in der Art und Weise dar, wie wir mit Diagrammen arbeiten. Indem sie die Lücke zwischen statischen visuellen Referenzen und bearbeitbaren Diagramm-als-Code-Formaten überbrückt, beseitigt sie einen der mühsamsten Aspekte der Diagrammwartung: die manuelle Neukreation.

Egal, ob Sie mit einer Textidee, einem bestehenden Diagrammbild, einem Screenshot oder einer handgezeichneten Skizze beginnen – VPasCode hilft Ihnen, schneller vom visuellen Konzept zu bearbeitbarem Diagrammcode zu gelangen. Die Kombination aus KI-gestützter Generierung, Echtzeitvorschau, Code-Modifikationsfunktionen und Integration in das Visual Paradigm-Ökosystem schafft einen leistungsstarken Workflow für Entwickler, Architekten, Analysten und technische Redakteure.

Die wichtigste Erkenntnis ist diese: Ihre Diagramme müssen nicht länger Sackgassen seinMit VPasCode kann jedes Bild zum Ausgangspunkt für ein lebendiges, sich entwickelndes Diagramm werden, das mit Ihrem Projekt wächst.