Mimari diyagramlar, sisteminizin nasıl çalıştığını anlamanıza yardımcı olur. Bunları mantığı keşfetmek, veriyi takip etmek ve yapıyı iletmek için kullanabilirsiniz. Cursor, Mermaid gibi araçları kullanarak bu diyagramları doğrudan oluşturmayı destekler, böylece sadece birkaç komutla koddan görsele geçebilirsiniz.
Mimari diyagram örneği

​
Diyagramlar neden önemlidir

Diyagramlar, verilerin nasıl aktığını ve bileşenlerin nasıl etkileşim kurduğunu açıklığa kavuşturur. Şu durumlarda faydalıdırlar:
  • Kod tabanınızdaki akış kontrolünü anlamak istediğinizde
  • Girişten çıkışa veri soyunu izlemeniz gerektiğinde
  • Başkalarını sisteme dahil ederken veya sisteminizi belgelendirirken
Ayrıca hata ayıklama ve daha akıllı sorular sormak için de harikadırlar. Görseller, size (ve modele) büyük resmi görme konusunda yardımcı olur.

​
Dikkate alınması gereken iki boyut

Düşünülmesi gereken birkaç farklı açı var:
  • Amaç: Mantık, veri akışı, altyapı veya başka bir şeyi mi haritalıyorsunuz?
  • Format: Hızlı bir şey mi istiyorsunuz (Mermaid diyagramı gibi) yoksa resmi bir şey mi (UML gibi)?

​
Nasıl sorulur

Net bir hedefle başlayın. İşte bazı yaygın soru sorma yolları:
  • Akış kontrolü: “İsteklerin controller’dan veritabanına nasıl gittiğini göster.”
  • Veri soyağacı: “Bu değişkeni girdiği yerden bittiği yere kadar takip et.”
  • Yapı: “Bu servisin bileşen düzeyinde görünümünü ver.”
Başlangıç ve bitiş noktalarını dahil edebilir veya Cursor’dan tam yolu bulmasını isteyebilirsiniz.

​
Mermaid ile Çalışma

Mermaid öğrenmesi kolay bir araçtır ve doğrudan Markdown içinde render edilir (doğru uzantı ile). Cursor şu gibi diyagramlar oluşturabilir:
  • Mantık ve diziler 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ükleyebilirsiniz.
  1. Extensions sekmesine gidin
  2. Mermaid’i arayın
  3. Yükleyin
Mermaid uzantısını yükleme

​
Diyagram stratejisi

Küçük başlayın. Her şeyi bir anda haritalamaya çalışmayın.
  • Bir fonksiyon, rota veya süreç seçin
  • Cursor’dan Mermaid kullanarak o kısmı diyagramlamasını isteyin
  • Birkaç tane elde ettikten sonra, bunları birleştirmesini isteyin
Bu C4 modelini yansıtır – düşük seviyede (kod veya bileşenler) başlayıp daha üst seviye genel bakışlara doğru çalışırsınız.

​
Önerilen akış

  1. Ayrıntılı, düşük seviyeli bir diyagramla başlayın
  2. Bunu orta seviye bir görünüme özetleyin
  3. İstediğiniz soyutlama seviyesine ulaşana kadar tekrarlayın
  4. Cursor’dan bunları tek bir diyagram veya sistem haritasında birleştirmesini isteyin

​
Çıkarımlar

  • Akış, mantık ve veriyi anlamak için diyagramları kullanın
  • Küçük promptlarla başlayın ve diyagramınızı oradan büyütün
  • Mermaid, Cursor’da çalışmak için en kolay formattır
  • Düşük seviyede başlayın ve yukarıya doğru soyutlayın, tıpkı C4 modelinde olduğu gibi
  • Cursor, diyagramları kolaylıkla oluşturmanıza, iyileştirmenize ve birleştirmenize yardımcı olabilir