Zurück zur Sharing-Liste

[Cursor-Guide]Architekturdiagramme

Autor:Cursor
Plattform:本地文件
Datum:2025-05-31

Lernen Sie, wie Sie mit Mermaid Architekturdiagramme erstellen, um Systemstrukturen und Datenflüsse zu visualisieren. Ideal für Entwickler, die Systeme dokumentieren oder komplexe Workflows debuggen.

ArchitekturMermaidSystemdesignDatenflussVisualisierungDiagrammeSoftwareentwicklungDokumentation

[Cursor-Guide]Architekturdiagramme

Original-Link: Original-Link

Lernen Sie, wie Sie mit Mermaid Architekturdiagramme erstellen, um Systemstrukturen und Datenflüsse zu visualisieren

Architekturdiagramme helfen Ihnen, das Funktionieren Ihres Systems zu verstehen. Sie können damit Logik nachvollziehen, Daten verfolgen und Strukturen kommunizieren. Cursor unterstützt die direkte Generierung dieser Diagramme mit Tools wie Mermaid, sodass Sie mit nur wenigen Eingaben von Code zur Visualisierung gelangen.

postgres-flowchart

Warum Diagramme wichtig sind

Diagramme verdeutlichen, wie Daten fließen und Komponenten interagieren. Sie sind nützlich, wenn Sie:

  • Den Ablauf 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 stellen intelligentere Fragen. Visualisierungen helfen Ihnen (und dem Modell), das große Ganze zu sehen.

Zwei Dimensionen zu beachten

Es gibt verschiedene Perspektiven zu berücksichtigen:

  • Zweck: Möchten Sie Logik, Datenfluss, Infrastruktur oder etwas anderes abbilden?
  • Format: Wollen Sie etwas Schnelles (wie ein Mermaid-Diagramm) oder Formelles (wie UML)?

Wie man Aufforderungen formuliert

Beginnen Sie mit einem klaren Ziel. Hier sind einige gängige Möglichkeiten zu fragen:

  • Ablaufsteuerung: „Zeigen Sie mir, wie Anfragen vom Controller zur Datenbank gelangen.“
  • Datenherkunft: „Verfolgen Sie diese Variable von ihrem Eintrittspunkt bis zu ihrem Endpunkt.“
  • Struktur: „Geben Sie mir eine Komponentenansicht dieses Dienstes.“

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 (mit der richtigen Erweiterung) gerendert. Cursor kann Diagramme wie folgt generieren:

  • flowchart für Logik und Sequenzen
  • sequenceDiagram für Interaktionen
  • classDiagram für Objektstrukturen
  • graph TD für einfache Richtungsdiagramme

diagrams-1

Sie können die Mermaid-Erweiterung installieren, um Diagramme in der Vorschau anzuzeigen.

  1. Gehen Sie zum Tab „Erweiterungen“
  2. Suchen Sie nach Mermaid
  3. Installieren Sie

installing-mermaid

Diagrammstrategie

Fangen Sie klein an. Versuchen Sie nicht, alles auf einmal abzubilden.

  • 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 ihn, sie zu kombinieren

Dies spiegelt das C4-Modell wider – bei dem Sie auf niedriger Ebene (Code oder Komponenten) beginnen und sich zu höheren Überblicksdarstellungen hocharbeiten.

Empfohlener Ablauf

  1. Beginnen Sie mit einem detaillierten, niedrigstufigen Diagramm
  2. Fassen Sie es zu einer mittelstufigen Ansicht zusammen
  3. Wiederholen Sie dies, bis Sie die gewünschte Abstraktionsebene erreichen
  4. Bitten Sie Cursor, sie zu einem einzigen Diagramm oder Systemplan zusammenzuführen

diagrams-2

Wichtige Punkte

  • Verwenden Sie Diagramme, um Abläufe, Logik und Daten zu verstehen
  • Beginnen Sie mit kleinen Aufforderungen und erweitern Sie Ihr Diagramm schrittweise
  • Mermaid ist das einfachste Format für die Arbeit in Cursor
  • Beginnen Sie auf niedriger Ebene und arbeiten Sie sich hoch, genau wie im C4-Modell
  • Cursor kann Ihnen helfen, Diagramme mühelos zu generieren, zu verfeinern und zu kombinieren

Artikelreihenindex