Diagram arsitektur membantu Anda memahami cara kerja sistem Anda. Anda dapat menggunakannya untuk mengeksplorasi logika, melacak data, dan mengkomunikasikan struktur. Cursor mendukung pembuatan diagram ini secara langsung menggunakan alat seperti Mermaid, sehingga Anda dapat beralih dari kode ke visual hanya dengan beberapa prompt.
Contoh diagram arsitektur

​
Mengapa diagram penting

Diagram memperjelas bagaimana data mengalir dan bagaimana komponen berinteraksi. Diagram berguna ketika Anda:
  • Ingin memahami kontrol alur dalam basis kode Anda
  • Perlu melacak garis keturunan data dari input ke output
  • Sedang memperkenalkan orang lain atau mendokumentasikan sistem Anda
Diagram juga sangat baik untuk debugging dan mengajukan pertanyaan yang lebih cerdas. Visual membantu Anda (dan model) melihat gambaran yang lebih besar.

​
Dua dimensi yang perlu dipertimbangkan

Ada beberapa sudut pandang berbeda untuk dipikirkan:
  • Tujuan: Apakah Anda memetakan logika, alur data, infrastruktur, atau hal lain?
  • Format: Apakah Anda menginginkan sesuatu yang cepat (seperti diagram Mermaid) atau formal (seperti UML)?

​
Cara memberikan prompt

Mulai dengan tujuan yang jelas. Berikut adalah beberapa cara umum untuk bertanya:
  • Kontrol alur: “Tunjukkan bagaimana permintaan berjalan dari controller ke database.”
  • Lineage data: “Lacak variabel ini dari tempat masuknya hingga tempat berakhirnya.”
  • Struktur: “Berikan saya tampilan tingkat komponen dari layanan ini.”
Anda dapat menyertakan titik awal dan akhir, atau meminta Cursor untuk menemukan jalur lengkapnya.

​
Bekerja dengan Mermaid

Mermaid mudah dipelajari dan dapat dirender langsung di Markdown (dengan ekstensi yang tepat). Cursor dapat menghasilkan diagram seperti:
  • flowchart untuk logika dan urutan
  • sequenceDiagram untuk interaksi
  • classDiagram untuk struktur objek
  • graph TD untuk peta arah sederhana
Anda dapat menginstal ekstensi Mermaid untuk melihat pratinjau diagram.
  1. Buka tab Extensions
  2. Cari Mermaid
  3. Install
Menginstal ekstensi Mermaid

​
Strategi diagram

Mulai dari yang kecil. Jangan bertujuan untuk memetakan semuanya sekaligus.
  • Pilih satu fungsi, rute, atau proses
  • Minta Cursor untuk membuat diagram bagian tersebut menggunakan Mermaid
  • Setelah Anda memiliki beberapa, minta untuk menggabungkannya
Ini mencerminkan model C4 – di mana Anda mulai dari tingkat rendah (kode atau komponen) dan bekerja ke atas menuju gambaran tingkat tinggi.

​
Alur yang direkomendasikan

  1. Mulai dengan diagram tingkat rendah yang detail
  2. Ringkas menjadi tampilan tingkat menengah
  3. Ulangi hingga Anda mencapai tingkat abstraksi yang diinginkan
  4. Minta Cursor untuk menggabungkannya menjadi satu diagram atau peta sistem

​
Kesimpulan

  • Gunakan diagram untuk memahami alur, logika, dan data
  • Mulai dengan prompt kecil dan kembangkan diagram Anda dari sana
  • Mermaid adalah format yang paling mudah untuk digunakan di Cursor
  • Mulai dari tingkat rendah dan abstraksi ke atas, sama seperti dalam model C4
  • Cursor dapat membantu Anda menghasilkan, menyempurnakan, dan menggabungkan diagram dengan mudah