Noch manuell drawio zeichnen? Mit Cursor steigern Sie Ihre Zeicheneffizienz

Autor: AlwinXie
Original-Link: Original-Link
👤 Autor: AlwinXie
🌐 Quelle: WeChat Official Account

---

Ergebnispräsentation

Um keine falschen Erwartungen zu wecken, zeigen wir Ihnen zunächst das Endergebnis des Architekturdiagramms. Nicht nur ist das Design ansprechend und der Ablauf klar, sondern wichtig ist auch, dass es in Minuten erstellt werden kann (während manuelles Zeichnen traditionell stundenlang dauern würde):

01

Hintergrund

Die gängige Methode zur Erstellung von Flussdiagrammen ist die Verwendung von Mermaid-Diagrammen, da KI diese besser versteht und die Genauigkeit der Generierung höher ist. Zudem sind sie nicht nur für Menschen, sondern auch für KI lesbar und spielen eine wichtige Rolle bei der KI-Anleitung. Der Nachteil ist jedoch, dass das Design relativ einförmig und starr ist.

In wichtigen Präsentationsszenarien benötigen wir ansprechendere und individuellere Diagramme, um den Wert zu demonstrieren. Hierfür verwenden wir normalerweise drawio, dessen Vorteil in der hochgradigen Anpassbarkeit des Designs liegt, während der Nachteil der hohe Zeitaufwand für Layoutanpassungen und Linienoptimierungen ist.

Wenn es ein Tool gäbe, das uns bei diesem Zeitproblem helfen könnte, wäre das ideal. Dieser Artikel zeigt, wie Sie mit Cursor schnell ansprechende drawio-Architekturdiagramme erstellen können.

02

Mermaid-Diagramm

Bevor wir auf drawio eingehen, schauen wir uns zunächst die Wirkung von Mermaid-Diagrammen an. In der Praxis können Sie Cursor direkt verwenden, um diese zu generieren. Indem Sie unseren Kerncode einbinden, kann Cursor ein Sequenzdiagramm erstellen. Das Ergebnis sieht wie folgt aus:

Die Analyse des Mermaid-Sequenzdiagramms (vollständig von Cursor generiert, ohne Änderungen. Die Genauigkeit ist hoch und stimmt im Wesentlichen mit der Code-Logik überein):

Die Wirkung des Mermaid-Diagramms ist durchaus gut, insbesondere bei Sequenzdiagrammen, die sehr klar und präzise sind.

Als Nächstes werden wir dieses Mermaid-Diagramm nutzen, um die KI bei der Erstellung eines drawio-Architekturdiagramms anzuleiten. Dadurch sparen wir uns den Schritt, der KI zu beschreiben, worum es in unserem System geht. Ohne dieses Sequenzdiagramm wären viele Interaktionen nötig, um die entsprechende Architektur zu zeichnen. Mit diesem Diagramm kann die KI jedoch in einem Schritt ein genaues Architekturdiagramm erstellen.

03

Vorbereitungen für die Generierung von drawio-Diagrammen mit Cursor

Bevor wir beginnen, müssen wir die Tools bereitstellen. Neben Cursor benötigen wir ein drawio-Plugin für Cursor. Hier wurde das beliebteste Plugin Draw.io Integration gewählt. Nach der Installation dieses Plugins können wir die von Cursor generierten drawio-Diagramme direkt in Cursor anzeigen und bearbeiten, was sehr praktisch ist.

Nachdem die Tools bereit sind, müssen wir noch einige Referenzmaterialien vorbereiten, um sicherzustellen, dass die von Cursor generierten Ergebnisse genau und unseren Erwartungen entsprechend sind.

Hier sind die beiden wichtigsten Materialien:

• Eine drawio-Datei mit dem Zielstil, die als Referenz für Cursor dient. Andernfalls ist das Ergebnis unvorhersehbar.
• Eine Cursor Rules-Datei im mdc-Format, die Cursor bei der Diagrammerstellung anleitet.

1. Zielreferenzdiagramm: Idealerweise im drawio-Quellformat. Das Beispiel-Diagramm (.drawio-Format) in diesem Artikel sieht wie folgt aus (im Vergleich zum Endergebnis ist der Stil sehr konsistent):

Hinweis: Wenn das Zielreferenzdiagramm nicht im drawio-Format vorliegt (z.B. wenn wir uns an den schönen Diagrammen anderer orientieren möchten), können wir das Referenzdiagramm an Cursor übergeben, damit es den Stil, die Farben, die Linien und das Layout analysiert. Anschließend kann Cursor eine MD-Datei mit Anleitungen generieren, die dann in das mdc-Format der Cursor Rules umgewandelt werden kann. Dies hat zwar eine gewisse Wirkung, aber die Wiederherstellungsgenauigkeit ist nicht so hoch wie bei drawio-Formaten. Hier sind manuelle Anpassungen und Interaktionen mit Cursor erforderlich, um das Ergebnis zu optimieren.

2. mdc-Datei zur Anleitung von Cursor: Beispiel drawio-rules.mdc:

Der tatsächliche Inhalt kann je nach Diagramm leicht angepasst werden. Hier handelt es sich um eine Regel, die auf dem Zielstil basiert. Der Teil zur Versionsverwaltung ist jedoch allgemeingültig und besonders wichtig:

Die beiden Hauptziele sind:

• Nach jeder Generierung oder Änderung eines drawio-Diagramms wird eine neue Kopie erstellt, anstatt die ursprüngliche Version zu überschreiben. Da die Verwaltung von drawio-Dateien in Cursor zwar über Plugins möglich ist, aber nicht so einfach wie bei Code, ist es am besten, jede Änderung in einer neuen drawio-Datei vorzunehmen.
• Neben der Erstellung von Kopien werden alle Änderungen in einem changelog.md protokolliert, um die Lesbarkeit und Nachverfolgbarkeit für Menschen zu erleichtern. Das Ergebnis sieht etwa so aus:

04

Umsetzung und Optimierung der drawio-Diagrammgenerierung mit Cursor

Nachdem alle Vorbereitungen abgeschlossen sind, können wir beginnen.

Der zentrale Prompt: @drawio-rules.mdc @Referenzdiagramm @Mermaid-Sequenzdiagramm Generieren Sie basierend auf der Logik des Sequenzdiagramms und dem Stil des Referenzdiagramms ein drawio-Diagramm für mich.

Das Ergebnis ist Version v1.0:

Insgesamt sieht das Ergebnis bereits gut aus, es gibt jedoch einige kleinere Probleme: 1. Überlappende Linien; 2. Einige Linien verdecken den Text wichtiger Elemente.

Nach einigen Interaktionen mit Cursor und den Regeln erhalten wir schließlich Version v1.3:

Die grundlegende Architektur ist korrekt, der Stil stimmt, aber das Problem der überlappenden Linien ist schwer zu lösen. Hier gibt es Raum für weitere Optimierungen, z.B. durch Festlegen der Start- und Endpositionen, Abstände oder Koordinaten der Linien. Das Endergebnis erfordert jedoch Zeit für Feinabstimmungen, die schließlich in der mdc-Datei festgehalten werden können, um zukünftige Diagramme zu leiten.

Letztendlich wird durch die Kombination von Cursor mit Referenzdiagrammen und mdc ein grober Rahmen generiert, der durch geringfügige manuelle Anpassungen zum Endergebnis führt, Version v1.4:

Zudem hat Cursor ein entsprechendes changelog generiert:

![Bild](https://mmbiz.qpic.cn/sz_mmbiz_png/O4hdbRPSHhcxxwfZXibOJIDXRyiaefTIlkLBIVf