Diagram arsitektur bantu kamu memahami cara kerja sistem kamu. Kamu bisa memakainya untuk mengeksplorasi logika, melacak data, dan menyampaikan struktur. Cursor mendukung pembuatan diagram ini langsung dengan alat seperti Mermaid, jadi kamu bisa beralih dari kode ke visual hanya dengan beberapa prompt.
Contoh diagram arsitektur

​
Kenapa diagram penting

Diagram memperjelas alur data dan bagaimana komponen saling berinteraksi. Diagram berguna ketika lo:
  • Pengen paham flow control di codebase lo
  • Perlu ngelacak data lineage dari input ke output
  • Lagi onboarding orang lain atau ngedokumentasiin sistem lo
Diagram juga ampuh buat debugging dan bantu lo nanya pertanyaan yang lebih cerdas. Visual bantu lo (dan model) ngeliat gambaran besarnya.

​
Dua dimensi yang perlu dipertimbangkan

Ada beberapa sudut pandang yang bisa dipikirkan:
  • Tujuan: Kamu lagi memetakan logika, alur data, infrastruktur, atau hal lain?
  • Format: Kamu mau yang cepat (kayak diagram Mermaid) atau yang formal (kayak UML)?

​
Cara bikin prompt

Mulai dengan tujuan yang jelas. Berikut beberapa cara umum buat nanya:
  • Kontrol alur: “Tunjukin gimana request mengalir dari controller ke database.”
  • Jejak data: “Lacak variabel ini dari titik masuk sampai tempat akhirnya.”
  • Struktur: “Kasih gue tampilan di level komponen dari service ini.”
Lo bisa sebutin titik awal dan akhir, atau minta Cursor buat nemuin jalur lengkapnya.

​
Bekerja dengan Mermaid

Mermaid mudah dipelajari dan bisa dirender langsung di Markdown (dengan ekstensi yang tepat). Cursor bisa menghasilkan diagram seperti:
  • flowchart untuk logika dan urutan
  • sequenceDiagram untuk interaksi
  • classDiagram untuk struktur objek
  • graph TD untuk peta terarah sederhana
Kamu bisa memasang ekstensi Mermaid untuk melihat pratinjau diagram.
  1. Buka tab Extensions
  2. Cari Mermaid
  3. Pasang
Memasang ekstensi Mermaid

​
Strategi membuat diagram

Mulai kecil. Jangan coba memetakan semuanya sekaligus.
  • Pilih satu fungsi, route, atau proses
  • Minta Cursor membuat diagram bagian itu dengan Mermaid
  • Setelah punya beberapa, minta Cursor menggabungkannya
Ini sejalan dengan model C4 – kamu mulai dari level rendah (kode atau komponen) lalu naik ke ringkasan level yang lebih tinggi.
  1. Mulai dengan diagram detail di level rendah
  2. Ringkas jadi tampilan level menengah
  3. Ulangi sampai kamu mencapai tingkat abstraksi yang kamu mau
  4. Minta Cursor menggabungkannya jadi satu diagram atau peta sistem

​
Ringkasan

  • Pakai diagram untuk memahami alur, logika, dan data
  • Mulai dengan prompt kecil dan kembangkan diagram kamu dari situ
  • Mermaid adalah format yang paling gampang dipakai di Cursor
  • Mulai dari level rendah lalu naikkan abstraksinya, persis seperti model C4
  • Cursor bisa bantu kamu bikin, nyempurnain, dan nggabungin diagram dengan mudah