Architekturdiagramme helfen Ihnen dabei, zu verstehen, wie Ihr System funktioniert. Sie können sie verwenden, um Logik zu erkunden, Daten zu verfolgen und Strukturen zu kommunizieren. Cursor unterstützt die direkte Erstellung dieser Diagramme mit Tools wie Mermaid, sodass Sie mit nur wenigen Eingabeaufforderungen von Code zu visueller Darstellung gelangen können.
Beispiel eines Architekturdiagramms

​
Warum Diagramme wichtig sind

Diagramme verdeutlichen, wie Daten fließen und wie Komponenten interagieren. Sie sind nützlich, wenn Sie:
  • Den Kontrollfluss in Ihrer Codebasis verstehen möchten
  • Die Datenherkunft von der Eingabe bis zur Ausgabe nachverfolgen müssen
  • Andere einarbeiten oder Ihr System dokumentieren
Sie eignen sich auch hervorragend zum Debuggen und für das Stellen intelligenterer Fragen. Visualisierungen helfen Ihnen (und dem Modell), das große Ganze zu sehen.

​
Zwei zu berücksichtigende Dimensionen

Es gibt verschiedene Blickwinkel zu bedenken:
  • Zweck: Bilden Sie Logik, Datenfluss, Infrastruktur oder etwas anderes ab?
  • Format: Möchten Sie etwas Schnelles (wie ein Mermaid-Diagramm) oder Formales (wie UML)?

​
Wie man Prompts erstellt

Beginnen Sie mit einem klaren Ziel. Hier sind einige gängige Arten zu fragen:
  • Ablaufsteuerung: “Zeigen Sie mir, wie Anfragen vom Controller zur Datenbank gelangen.”
  • Datenherkunft: “Verfolgen Sie diese Variable von ihrem Eintritt bis zu ihrem Ende.”
  • Struktur: “Geben Sie mir eine komponentenbasierte Ansicht dieses Services.”
Sie können Start- und Endpunkte angeben oder Cursor bitten, den vollständigen Pfad zu finden.

​
Arbeiten mit Mermaid

Mermaid ist einfach zu erlernen und wird direkt in Markdown gerendert (mit der richtigen Erweiterung). Cursor kann Diagramme wie diese generieren:
  • flowchart für Logik und Abläufe
  • sequenceDiagram für Interaktionen
  • classDiagram für Objektstrukturen
  • graph TD für einfache Richtungskarten
Sie können die Mermaid-Erweiterung installieren, um Diagramme in der Vorschau anzuzeigen.
  1. Gehen Sie zum Erweiterungen-Tab
  2. Suchen Sie nach Mermaid
  3. Installieren
Installation der Mermaid-Erweiterung

​
Diagramm-Strategie

Fangen Sie klein an. Versuchen Sie nicht, alles auf einmal zu erfassen.
  • Wählen Sie eine Funktion, Route oder einen Prozess aus
  • Bitten Sie Cursor, diesen Teil mit Mermaid zu diagrammieren
  • Sobald Sie einige haben, bitten Sie es, sie zu kombinieren
Dies spiegelt das C4-Modell wider – wo Sie auf einer niedrigen Ebene (Code oder Komponenten) beginnen und sich zu höheren Übersichten vorarbeiten.

​
Empfohlener Ablauf

  1. Beginnen Sie mit einem detaillierten, niedrigstufigen Diagramm
  2. Fassen Sie es in eine mittlere Ebene zusammen
  3. Wiederholen Sie dies, bis Sie die gewünschte Abstraktionsebene erreichen
  4. Bitten Sie Cursor, sie in ein einziges Diagramm oder eine Systemkarte zu verschmelzen

​
Wichtige Erkenntnisse

  • Verwenden Sie Diagramme, um Ablauf, Logik und Daten zu verstehen
  • Beginnen Sie mit kleinen Prompts und erweitern Sie Ihr Diagramm von dort aus
  • Mermaid ist das einfachste Format für die Arbeit in Cursor
  • Beginnen Sie auf niedriger Ebene und abstrahieren Sie nach oben, genau wie im C4-Modell
  • Cursor kann Ihnen dabei helfen, Diagramme mit Leichtigkeit zu generieren, zu verfeinern und zu kombinieren