Mimari diyagramlar, sisteminin nasıl çalıştığını anlamana yardımcı olur. Mantığı keşfetmek, veriyi izlemek ve yapıyı aktarmak için bunları kullanabilirsin. Cursor, Mermaid gibi araçlarla bu diyagramları doğrudan üretmeyi destekler; böylece yalnızca birkaç prompt ile koddan görsele geçebilirsin.
Bir mimari diyagram örneği

​
Diyagramlar neden önemli

Diyagramlar verinin nasıl aktığını ve bileşenlerin nasıl etkileşime girdiğini netleştirir. Şu durumlarda işine yarar:
  • Kod tabanındaki akış kontrolünü anlamak istediğinde
  • Girdiden çıktıya veri soy ağacını izlemek gerektiğinde
  • Başkalarını projeye alıştırırken ya da sistemini belgelendirirken
Ayrıca hata ayıklamak ve daha akıllıca sorular sormak için de harikadır. Görseller senin (ve modelin) büyük resmi görmene yardımcı olur.

​
Dikkate alınacak iki boyut

Düşünebileceğin birkaç farklı açı var:
  • Amaç: Mantığı, veri akışını, altyapıyı mı yoksa başka bir şeyi mi modelliyorsun?
  • Biçim: Hızlı bir şey (Mermaid diyagramı gibi) mi yoksa daha resmi bir şey (UML gibi) mi istiyorsun?

​
Prompt nasıl yazılır

Net bir hedefle başla. İşte sormanın bazı yaygın yolları:
  • Akış kontrolü: “İstekler controller’dan veritabanına nasıl gider, göster.”
  • Veri kökeni: “Bu değişkenin giriş yaptığı yerden nereye ulaştığına kadar izini sür.”
  • Yapı: “Bu servisin bileşen düzeyinde bir görünümünü ver.”
Başlangıç ve bitiş noktalarını ekleyebilir ya da Cursor’dan tüm yolu bulmasını isteyebilirsin.

​
Mermaid ile çalışmak

Mermaid öğrenmesi kolaydır ve (doğru uzantıyla) doğrudan Markdown içinde render edilir. Cursor aşağıdaki gibi diyagramlar üretebilir:
  • Mantık ve akışlar için flowchart
  • Etkileşimler için sequenceDiagram
  • Nesne yapısı için classDiagram
  • Basit yönlü haritalar için graph TD
Diyagramları önizlemek için Mermaid uzantısını yükleyebilirsin.
  1. Extensions sekmesine git
  2. Mermaid’i ara
  3. Yükle
Mermaid uzantısını yükleme

​
Diyagram stratejisi

Küçük başla. Her şeyi tek seferde haritalamaya çalışma.
  • Bir fonksiyon, rota veya süreç seç
  • Cursor’dan o kısmın diyagramını Mermaid ile çıkarmasını iste
  • Birkaç tane olduğunda, onları birleştirmesini iste
Bu, C4 modeline paraleldir – düşük seviyeden (kod veya bileşenler) başlayıp daha yüksek seviyeli özetlere doğru ilerlersin.
  1. Ayrıntılı, düşük seviyeli bir diyagramla başla
  2. Bunu orta seviyeli bir görünüme özetle
  3. İstediğin soyutlama seviyesine ulaşana kadar tekrarla
  4. Cursor’dan bunları tek bir diyagram veya sistem haritasında birleştirmesini iste

​
Özetler

  • Akış, mantık ve veriyi anlamak için diyagramları kullan
  • Küçük istemlerle başla ve diyagramını buradan büyüt
  • Mermaid, Cursor’da çalışması en kolay format
  • C4 modelinde olduğu gibi düşük seviyeden başla ve yukarı doğru soyutla
  • Cursor, diyagramları kolayca oluşturmanı, iyileştirmeni ve birleştirmeni sağlar