Architekturdiagramme helfen dir, nachzuvollziehen, wie dein System funktioniert. Du kannst sie nutzen, um Logik zu explorieren, Datenflüsse nachzuverfolgen und Strukturen zu kommunizieren. Cursor unterstützt das direkte Generieren dieser Diagramme mit Tools wie Mermaid, sodass du mit nur wenigen Prompts von Code zu Visualisierungen kommst.
Beispiel für ein Architekturdiagramm

​
Warum Diagramme wichtig sind

Diagramme zeigen klar, wie Daten fließen und wie Komponenten interagieren. Sie sind nützlich, wenn du:
  • die Ablaufsteuerung in deiner Codebase verstehen willst
  • die Datenherkunft vom Input bis zum Output nachvollziehen musst
  • andere onboardest oder dein System dokumentierst
Sie sind auch super fürs Debuggen und um smartere Fragen zu stellen. Visuals helfen dir (und dem Modell), das große Ganze zu sehen.

​
Zwei Dimensionen, die du berücksichtigen solltest

Es gibt ein paar verschiedene Blickwinkel, über die du nachdenken kannst:
  • Zweck: Kartierst du Logik, Datenfluss, Infrastruktur oder etwas anderes?
  • Format: Willst du etwas Schnelles (wie ein Mermaid-Diagramm) oder etwas Formales (wie UML)?

​
So promptest du

Starte mit einem klaren Ziel. Hier sind ein paar gängige Arten zu fragen:
  • Flow Control: „Zeig mir, wie Requests vom Controller bis zur Datenbank laufen.“
  • Data Lineage: „Verfolge diese Variable von ihrem Eintrittspunkt bis zu ihrem Ziel.“
  • Struktur: „Gib mir eine komponentenbasierte Ansicht dieses Services.“
Du kannst Start- und Endpunkte angeben oder Cursor bitten, den vollständigen Pfad zu finden.

​
Arbeiten mit Mermaid

Mermaid ist leicht zu lernen und rendert direkt in Markdown (mit der passenden Erweiterung). Cursor kann Diagramme generieren wie:
  • flowchart für Logik und Abläufe
  • sequenceDiagram für Interaktionen
  • classDiagram für Objektstrukturen
  • graph TD für einfache gerichtete Graphen
Du kannst die Mermaid-Erweiterung installieren, um Diagramme in der Vorschau zu sehen.
  1. Geh zum Tab „Extensions“
  2. Such nach „Mermaid“
  3. Installieren
Installing Mermaid extension

​
Diagrammstrategie

Klein anfangen. Versuch nicht, alles auf einmal abzubilden.
  • Wähl eine Funktion, Route oder einen Prozess
  • Bitte Cursor, diesen Teil mit Mermaid zu visualisieren
  • Wenn du ein paar hast, bitte es, sie zu kombinieren
Das spiegelt das C4‑Modell wider – du startest auf einer niedrigen Ebene (Code oder Komponenten) und arbeitest dich zu höheren Übersichten hoch.
  1. Starte mit einem detaillierten, niedrigstufigen Diagramm
  2. Fasse es zu einer mittleren Ebene zusammen
  3. Wiederhol das, bis du die gewünschte Abstraktionsebene erreichst
  4. Bitte Cursor, sie zu einem einzigen Diagramm oder einer Systemmap zusammenzuführen

​
Takeaways

  • Nutze Diagramme, um Flow, Logik und Daten zu verstehen
  • Fang mit kleinen Prompts an und erweitere dein Diagramm Schritt für Schritt
  • Mermaid ist das einfachste Format, mit dem du in Cursor arbeiten kannst
  • Starte auf Low-Level und abstrahiere nach oben, genau wie im C4-Modell
  • Cursor hilft dir, Diagramme mühelos zu erstellen, zu verfeinern und zu kombinieren