Codemaps - Pahami kode sebelum vibe coding

• Windsurf Codemaps adalah alat penelusuran kode baru berupa peta kode terstruktur yang diberi anotasi oleh AI, untuk membantu developer memahami codebase dengan cepat dan akurat
• Sementara alat coding AI yang ada berfokus pada otomatisasi penulisan kode, Codemaps bertujuan pada engineering yang berpusat pada pemahaman dan berjalan di atas model SWE‑1.5 dan Claude Sonnet 4.5
• Alur fungsi di dalam codebase ditampilkan secara visual, dan pengguna bisa langsung berpindah ke lokasi kode yang tepat atau melihat penjelasan kelompok kode terkait melalui “trace guide”
• Dibanding agen berbasis chat yang sudah ada seperti Cascade, alat ini menawarkan keterhubungan konteks dan efisiensi eksplorasi yang lebih tinggi, serta meningkatkan performa kerja agen lewat fitur referensi @{codemap}
• AI diposisikan bukan sebagai pengganti semata, melainkan sebagai alat kolaboratif yang memperkuat pemahaman dan akuntabilitas engineer

---

Pentingnya memahami kode dan hadirnya Codemaps

• Pengembangan software bukan sekadar menulis kode, tetapi berawal dari pemahaman terhadap masalah
  • Alat AI yang menulis kode sebagai pengganti memang meningkatkan produktivitas, tetapi juga menyebabkan terputusnya pemahaman antara developer dan kode
  • Pada pekerjaan yang sulit dan bernilai tinggi, pemisahan ini berujung pada inefisiensi yang fatal
• Cognition menekankan perlunya “AI yang menyalakan otak”, bukan AI yang mematikan otak
• Codemaps adalah peta kode beranotasi AI berbasis SWE‑1.5 dan Claude Sonnet 4.5, sebagai pengembangan dari teknologi DeepWiki dan Ask Devin

Mengapa Codemaps

• Semua pekerjaan engineering dimulai dari pemahaman kode, dan codebase skala besar menghabiskan banyak waktu untuk ditelusuri dan diingat
  • Engineer baru membutuhkan 3–9 bulan hingga benar-benar mahir, sementara engineer senior menghabiskan lebih dari 5 jam per minggu untuk onboarding
  • Menurut survei Stripe, maintenance legacy adalah salah satu penyebab utama turunnya produktivitas
• Alat coding AI yang ada berfokus pada tanya-jawab umum, sehingga tidak mampu mendukung onboarding intensif dan penelusuran presisi
• Codemaps dirancang sebagai alat pemetaan berbasis kode yang akurat untuk mengatasi keterbatasan ini

Fitur pemetaan real-time yang berpusat pada masalah

• Di dalam Windsurf, fitur ini dijalankan dengan Cmd + Shift + C, lalu pengguna memasukkan tujuan kerja atau memilih saran otomatis
  • Tersedia pilihan mode Fast(SWE‑1.5) atau Smart(Sonnet 4.5)
  • Setiap Codemap dibuat berdasarkan snapshot kode dan mematuhi prinsip ZDR
• Struktur kode dapat dijelajahi melalui peta node visual, dan saat diklik pengguna akan dipindahkan ke lokasi kode yang tepat
• Melalui opsi “See more”, pengguna dapat membuka trace guide untuk melihat penjelasan kelompok kode secara lebih rinci
• Jika @{codemap} dipanggil di dalam Cascade untuk merujuk bagian tertentu, maka pemahaman konteks dan performa agen akan meningkat

Pendekatan untuk melawan ‘Vibeslop’

• “Vibe coding” disebut telah berubah menjadi generasi kode AI yang serampangan, sehingga maintenance kode tanpa pemahaman menjadi masalah
• Codemaps membantu manusia dan AI berbagi struktur sistem, alur data, dan dependensi, sehingga kesenjangan pemahaman bisa dipersempit
• Peran engineer bergeser dari penulis menjadi pihak yang bertanggung jawab (accountability), dengan kualitas dijaga lewat pemahaman
• Tujuannya bukan hanya kecepatan, tetapi juga membantu engineer tetap berada dalam alur kerja dan percaya diri menyelesaikan masalah kompleks
• AI ditampilkan bukan sebagai pengganti sederhana, melainkan sebagai sarana kolaborasi yang memperkuat pekerjaan bernilai tinggi dan mengurangi pekerjaan bernilai rendah

Rencana ke depan

• Codemaps adalah tahap pertama yang memvisualisasikan hasil pengindeksan dan analisis agen internal kepada manusia
  • Saat ini sudah dapat digunakan untuk berbagi dan belajar antar tim
  • Ke depannya, dampaknya terhadap peningkatan kemampuan pemecahan masalah agen seperti Devin dan Cascade akan di-benchmark
• Fitur koneksi dan anotasi antarcodemap serta definisi protokol .codemap terbuka sedang dipertimbangkan
• Dengan digabungkan ke fitur Fast Context, tujuannya adalah mengembangkan context engineering otomatis menjadi bentuk yang dapat dibaca manusia
• Codemaps tersedia di Windsurf dan DeepWiki versi terbaru

[galadbran]

Setiap kali menggunakan DeepWiki saya selalu terkesan, jadi saya juga menantikan fitur ini!

[tested]

Semoga juga hadir di VS Code

[GN⁺]

Komentar Hacker News

• Setelah membaca tulisan ini, saya jadi terpikir ada beberapa hal yang perlu dicatat
  Ini terlihat seperti satu lagi produk AI untuk perusahaan Fortune 500. Mungkin kurang cocok untuk tim skala kecil hingga menengah
  Sebenarnya alat diagram berbasis analisis statis seperti ini sudah ada sejak lama, dan selain fakta bahwa sekarang diagramnya digambar oleh LLM, tidak banyak hal yang benar-benar baru
  Onboarding bukan sekadar menunjukkan flowchart, melainkan berbagi konteks masalah yang dimiliki tim. Yang lebih penting bukan boilerplate seperti CRUD atau MVC, tetapi menjelaskan pola dan batasan khas milik tim kita sendiri

  • Jika divisualisasikan hanya dengan analisis statis, ada kekurangan dalam fleksibilitas untuk menentukan apa yang perlu ditampilkan
    Kelebihan visualisasi buatan LLM adalah adanya penilaian dan akal sehat semacam ini, sehingga hasilnya lebih intuitif
  • Hari ini saya juga merasa seperti salah satu dari xkcd “Lucky 10,000”
    Ada yang bisa merekomendasikan alat analisis statis seperti ini? Kalau bisa open source, dan lebih bagus lagi jika mendukung Python, Java, dan JavaScript, terutama Angular

• Saya menyalakan Windsurf lagi setelah lama tidak dipakai dan menekan “Upgrade Available”, lalu diarahkan ke halaman ini
  Perintah yang dianjurkan, sudo apt-get upgrade windsurf, pada dasarnya adalah perintah berisiko yang meng-upgrade seluruh paket sistem
  Untungnya saya menyelesaikannya langsung dengan sudo apt-get install --only-upgrade windsurf
  Bagaimanapun juga, fitur Codemaps yang baru ditambahkan cukup keren dan layak dicoba

  • Sintaks tidak intuitif apt-get upgrade $PACKAGE benar-benar aneh. Bahkan sintaks yang benar pun tidak ada di manual
  • Katanya timnya melihat masukan ini dan langsung memperbaikinya

    - sudo apt-get upgrade windsurf
    + sudo apt-get install windsurf
    

  • Saya masih tidak paham apa kelebihan sintaks itu. Sangat membingungkan

• Saya berharap lebih banyak orang mencoba Windsurf
  Sebagai engineer senior, saya menggabungkan agentic coding dan coding biasa, dan Windsurf adalah alat yang diremehkan
  Saya benar-benar senang saat fitur Codemaps pertama kali muncul

  • Saya juga punya pandangan serupa. Di perusahaan saya kami memakai Windsurf, dan UX-nya benar-benar jadi kekuatan utamanya
    Saya sudah memakai Codemaps selama beberapa minggu dan hasilnya sangat bagus. Kalau perubahan kode makin banyak, perawatannya mungkin jadi merepotkan, tetapi tampaknya masih bisa diatasi
  • Saya lebih suka IDE seperti Zed yang tidak memaksa login atau mengunci pengguna ke suatu ekosistem
  • Setelah membaca ini saya juga jadi ingin mencobanya. Saya sudah memakai berbagai alat seperti abacus.ai IDE, claude CLI, dan lainnya, tetapi belum menemukan workflow yang benar-benar pas
  • Saya heran kenapa sampai sekarang belum ada yang membahas Copilot bawaan VSCode
    Saya membuat prototipe SaaS dengan cepat memakai kombinasi Sonnet 4, Sequential Thinking, dan server Tavily MCP. Harganya juga masuk akal
  • Saya penggemar Windsurf, tetapi belakangan ini sepenuhnya pindah ke Codex. Lingkungan cloud-nya terlalu nyaman
    Windsurf memang bagus, tetapi karena kebijakan harganya kami batal mengadopsinya untuk seluruh perusahaan

• Ini memang ide yang menarik, tetapi jika diagram yang dihasilkan tidak akurat justru berisiko menimbulkan salah paham
  Jika pada akhirnya manusia tetap harus memverifikasi ulang, tujuan alat ini jadi terasa hilang

  • Sebenarnya, bagi orang yang bukan “benar-benar ingin memahami kodenya”, diagram mungkin hanya artefak formalitas untuk ditunjukkan ke atasan

• Fitur seperti ini kurang praktis karena hanya menampilkan peta keterkaitan kode tanpa konteks bisnis
  AI tidak memahami “mengapa” di balik arsitektur. Pada akhirnya, saya rasa membaca dokumen desain dan kode tetap lebih baik

  • Lagi pula, banyak konteks bisnis ada di kepala manusia. Untuk benar-benar mencapai level engineer sesungguhnya, AI harus bisa bertanya langsung kepada manusia
  • Tetapi jika konteks itu diberikan secara eksplisit, kualitas keluaran LLM jelas menjadi lebih baik
  • Di masa depan, jika konteks bisnis dimasukkan ke prompt, AI juga akan memahami “mengapa” tersebut
  • Sebenarnya cukup banyak konteks pekerjaan yang terserap ke dalam kode
    Itu bisa dilihat dari contoh deepwiki maupun tautan Codemap
    Saat debugging, sebenarnya informasi sebanyak itu sudah cukup
  • Saya tidak tahu sejak kapan coding jadi terlalu berpusat pada konteks bisnis. Pemahaman teknis saja juga sudah sangat bernilai

• Saya rasa pendekatan seperti ini adalah arah yang tepat untuk memecahkan masalah
  Daripada membuat produk AI yang setengah jadi, yang lebih penting adalah menjadikan codebase lebih mudah dipahami oleh manusia dan LLM
  Sistem yang mendokumentasikan dirinya sendiri seperti ini bisa mengurangi kelelahan pengembangan di perusahaan besar

  • Saya juga menjalankan kedua pendekatan secara bersamaan. Saat memahami codebase baru, visualisasi memang berguna, tetapi setelah itu produktivitas tetap yang paling penting

• (Co-author) Pertanyaan sangat diterima!
  Silakan lihat video demo berdurasi 1 menit
  Ini adalah ide dari CTO Cognition, Steven. Dia tidak suka sorotan, tetapi kali ini dia benar-benar melakukannya dengan baik
  Silakan lihat juga tweet-nya

  • Saya penasaran apakah ada contoh yang bekerja baik juga pada codebase skala besar. Untuk proyek kecil, LLM masih oke, tetapi kode yang kompleks adalah ujian sebenarnya
  • Ada satu usulan — semoga Codemaps bisa dilihat juga di panel utama, bukan hanya sidebar. Saat ini tampilannya terlalu sempit

• Tiga tahun lalu saya pernah membuat side project dengan ide serupa
  Karena itu sebelum era LLM, saya membuat sendiri parser AST untuk mengekstrak relasi dalam kode Go dan Java, lalu memvisualisasikannya dengan Graphviz
  Saya juga menambahkan filter berbasis regex, dan itu sangat berguna saat mencoba memahami codebase yang asing
  Sekarang masih ada di packagemap.co, tetapi sudah sangat usang

  • Saya juga pernah membuat hal yang mirip, tetapi berupa visualisasi 3D untuk bahasa Go
    Tujuannya agar developer bisa memahami struktur kode secara spasial dan bekerja sambil melihat konteks dalam lingkungan VR
    Tulisan terkait ada di sini

• Usulan fitur: akan bagus jika ada Github Action yang otomatis membuat Codemap untuk repositori, memasukkannya ke README, lalu memperbaruinya secara otomatis saat ada PR penting

• Ide visualisasi kode memang keren, tetapi sering kali ada risiko “terjebak pada ide buruk”
  Sebagian besar diagram gagal menyampaikan makna yang dimaksud, dan justru butuh waktu untuk ditafsirkan
  Pada praktiknya, orang membaca kode atau matematika sambil membentuk model visual mereka sendiri di kepala
  Misalnya, jika aplikasi Flutter divisualisasikan tetapi struktur tree widget-nya tidak terlihat, itu akan berbenturan dengan model mental saya
  Pada akhirnya, visualisasi seperti ini mirip dengan adegan yang tergambar di kepala saat membaca novel.
  Saya masih belum yakin apakah LLM adalah teknologi yang bisa membuat “film kode yang ingin kita lihat”