Codemaps - Hãy hiểu code trước khi vibe coding

 (cognition.ai)
22 điểm bởi GN⁺ 2025-11-06 | 3 bình luận | Chia sẻ qua WhatsApp
  • Windsurf Codemaps là công cụ khám phá mã nguồn mới với bản đồ mã có cấu trúc được AI chú thích, giúp lập trình viên hiểu codebase nhanh và chính xác
  • Trong khi các công cụ AI coding hiện có tập trung vào tự động hóa việc viết mã, Codemaps hướng đến engineering lấy hiểu biết làm trung tâm và hoạt động dựa trên các mô hình SWE‑1.5 và Claude Sonnet 4.5
  • Công cụ này hiển thị trực quan luồng chức năng trong codebase, cho phép nhảy ngay đến vị trí mã chính xác hoặc xem phần giải thích của các nhóm mã liên quan thông qua “trace guide”
  • So với các agent dạng chat hiện có như Cascade, công cụ này có khả năng kết nối ngữ cảnh và hiệu quả khám phá cao hơn, đồng thời cải thiện hiệu năng làm việc của agent bằng tính năng tham chiếu @{codemap}
  • AI được định vị như công cụ cộng tác giúp tăng cường khả năng hiểu và trách nhiệm của kỹ sư, chứ không chỉ là sự thay thế đơn thuần

Tầm quan trọng của việc hiểu code và sự xuất hiện của Codemaps

  • Phát triển phần mềm không chỉ đơn giản là viết code mà bắt đầu từ sự thấu hiểu vấn đề
    • Các công cụ AI viết code thay con người có thể nâng cao năng suất, nhưng cũng gây ra sự đứt gãy trong hiểu biết giữa lập trình viên và mã nguồn
    • Với những công việc khó và có giá trị cao, sự tách rời này dẫn đến mức độ kém hiệu quả nghiêm trọng
  • Cognition nhấn mạnh rằng cần “AI bật não” chứ không phải “AI tắt não”
  • Codemaps là bản đồ mã được AI chú thích dựa trên SWE‑1.5 và Claude Sonnet 4.5, mở rộng từ công nghệ của DeepWiki và Ask Devin

Vì sao là Codemaps

  • Mọi công việc engineering đều bắt đầu từ việc hiểu code, trong khi các codebase lớn tiêu tốn rất nhiều thời gian cho việc khám phá và ghi nhớ
    • Kỹ sư mới cần 3–9 tháng để thực sự thành thạo, còn kỹ sư senior dành hơn 5 giờ mỗi tuần cho onboarding
    • Theo khảo sát của Stripe, bảo trì legacy là nguyên nhân chính làm giảm năng suất
  • Các công cụ AI coding hiện có chủ yếu xoay quanh hỏi đáp tổng quát, nên không hỗ trợ tốt onboarding tập trung và khám phá chính xác
  • Codemaps được thiết kế như công cụ ánh xạ dựa trên mã nguồn chính xác để giải quyết các giới hạn này

Tính năng ánh xạ theo vấn đề trong thời gian thực

  • Có thể chạy trong Windsurf bằng Cmd + Shift + C, rồi nhập mục tiêu công việc hoặc chọn gợi ý tự động
    • Có thể chọn giữa chế độ Fast(SWE‑1.5) hoặc Smart(Sonnet 4.5)
    • Mỗi Codemap dựa trên một snapshot của mã nguồn và tuân thủ nguyên tắc ZDR
  • Khám phá cấu trúc mã thông qua bản đồ node trực quan, và khi nhấp vào sẽ chuyển đến đúng vị trí mã
  • Mở trace guide bằng tùy chọn “See more” để xem giải thích chi tiết về các nhóm mã
  • Khi gọi @{codemap} trong Cascade để tham chiếu một phần cụ thể, khả năng hiểu ngữ cảnh và hiệu năng của agent sẽ được cải thiện

Cách tiếp cận chống lại ‘Vibeslop’

  • “Vibe coding” đang bị biến tướng thành việc tạo mã bằng AI một cách bừa bãi, và bảo trì mã không có hiểu biết đang bị chỉ ra là một vấn đề
  • Codemaps giúp con người và AI chia sẻ cấu trúc hệ thống, luồng dữ liệu và phụ thuộc, qua đó thu hẹp khoảng cách hiểu biết
  • Vai trò của kỹ sư chuyển từ người viết sang người chịu trách nhiệm (accountability), đảm bảo chất lượng thông qua sự thấu hiểu
  • Mục tiêu không chỉ là tốc độ mà còn là giúp kỹ sư duy trì mạch làm việc và tự tin giải quyết các vấn đề phức tạp
  • AI được trình bày như phương tiện cộng tác tăng cường công việc giá trị cao và giảm nhẹ công việc giá trị thấp, chứ không đơn thuần thay thế

Kế hoạch sắp tới

  • Codemaps là bước đầu tiên trong việc trực quan hóa cho con người kết quả lập chỉ mục và phân tích từ các agent nội bộ
    • Hiện đã có thể dùng để chia sẻ giữa các nhóm và phục vụ học tập
    • Trong tương lai, hiệu quả cải thiện năng lực giải quyết vấn đề của các agent như Devin và Cascade sẽ được benchmark
  • Đang xem xét chức năng liên kết và chú thích giữa các Codemap cùng việc định nghĩa giao thức .codemap mở
  • Mục tiêu là kết hợp với tính năng Fast Context để phát triển context engineering tự động thành dạng con người có thể đọc được
  • Có thể sử dụng Codemaps trên các phiên bản Windsurf và DeepWiki mới nhất

Bài viết liên quan

3 bình luận

 
galadbran 2025-11-07

Mỗi lần dùng deepwiki tôi đều thấy rất ấn tượng, nên cũng rất mong chờ tính năng này!
 
tested 2025-11-06

Ước gì cũng có trên VS Code
 
GN⁺ 2025-11-06
Ý kiến trên Hacker News

  • Đọc bài này xong thì tôi thấy có vài điểm cần nói
    Đây có vẻ lại là một sản phẩm AI nhắm tới Fortune 500. Có thể nó không thực sự phù hợp với các nhóm quy mô nhỏ hoặc vừa
    Thực ra các công cụ vẽ sơ đồ dựa trên phân tích tĩnh kiểu này đã có từ lâu rồi, và ngoài việc để LLM vẽ thay thì cũng không mới mẻ lắm
    Onboarding không chỉ là đưa cho người ta xem flowchart, mà cốt lõi là chia sẻ bối cảnh vấn đề mà cả nhóm đang có. So với mấy phần boilerplate như CRUD hay MVC, việc giải thích các mẫu và ràng buộc đặc thù của riêng team quan trọng hơn nhiều

    • Nếu chỉ trực quan hóa bằng phân tích tĩnh thì sẽ thiếu độ linh hoạt trong việc quyết định nên hiển thị cái gì
      Điểm hay của trực quan hóa do LLM tạo ra là nó có thêm khả năng phán đoán và thường thức nên trực quan hơn
    • Hôm nay tôi cũng có cảm giác mình là một trong những người trong xkcd “Lucky 10,000”
      Có ai gợi ý mấy công cụ phân tích tĩnh kiểu này không? Nếu là mã nguồn mở thì càng tốt, và hỗ trợ Python, Java, JavaScript, đặc biệt là Angular, thì quá tuyệt

  • Tôi mở Windsurf lại sau một thời gian dài, bấm “Upgrade Available” thì nó đưa tôi tới trang này
    Lệnh được hướng dẫn là sudo apt-get upgrade windsurf, nhưng thực chất đây là một lệnh nguy hiểm vì nó nâng cấp gần như toàn bộ gói của hệ thống
    May là cuối cùng tôi tự xử lý bằng sudo apt-get install --only-upgrade windsurf
    Dù sao thì tính năng Codemaps mới thêm vào cũng khá hay và đáng để thử

    • Cú pháp khó hiểu của apt-get upgrade $PACKAGE thực sự rất kỳ quặc. Ngay cả trong manual cũng không có cú pháp đúng
    • Nghe nói team đã thấy phản hồi này và sửa ngay rồi 
      - sudo apt-get upgrade windsurf
+ sudo apt-get install windsurf
    • Tôi vẫn không hiểu ưu điểm của cú pháp đó là gì. Thật sự rất dễ gây nhầm

  • Tôi ước sẽ có nhiều người thử Windsurf hơn
    Tôi là một kỹ sư senior, vừa làm agentic coding vừa code theo cách thông thường, và Windsurf là một công cụ bị đánh giá thấp
    Khi tính năng Codemaps mới ra mắt, tôi thực sự rất mừng

    • Tôi cũng thấy tương tự. Công ty tôi đang dùng Windsurf và UX thực sự là điểm mạnh
      Tôi đã dùng Codemaps vài tuần nay và thấy nó rất tốt. Khi số thay đổi trong code tăng lên thì việc bảo trì có thể trở nên phiền phức, nhưng có vẻ vẫn giải quyết được
    • Tôi thích các IDE như Zed hơn vì không có đăng nhập bắt buộc hay bị khóa vào hệ sinh thái
    • Đọc bài này xong tôi cũng định thử xem sao. Tôi đã dùng nhiều công cụ như abacus.ai IDE, claude CLI, v.v. nhưng vẫn chưa tìm được workflow thật sự hoàn hảo
    • Tôi thắc mắc vì sao đến giờ vẫn chưa ai nhắc tới Copilot tích hợp trong VSCode
      Tôi đã dùng tổ hợp Sonnet 4, Sequential Thinking và máy chủ Tavily MCP để làm prototype SaaS rất nhanh. Giá cũng hợp lý
    • Tôi là fan của Windsurf nhưng dạo này đã chuyển hẳn sang Codex. Môi trường cloud quá tiện
      Windsurf cũng tốt, nhưng vì chính sách giá nên công ty tôi đã từ bỏ việc triển khai trên toàn bộ tổ chức

  • Đây là một ý tưởng thú vị, nhưng nếu sơ đồ tạo ra không chính xác thì ngược lại còn có nguy cơ gây hiểu lầm
    Nếu cuối cùng con người vẫn phải xác minh lại thì mục đích của công cụ này sẽ bị giảm ý nghĩa

    • Thực ra nếu không phải là người “thực sự muốn hiểu code”, thì sơ đồ có khi chỉ là một đầu ra mang tính hình thức để trình cho sếp xem

  • Kiểu tính năng này không thực dụng lắm vì nó chỉ cho thấy bản đồ liên kết của code mà thiếu mất ngữ cảnh nghiệp vụ
    AI không hiểu được cái “tại sao” của kiến trúc. Cuối cùng tôi vẫn nghĩ đọc tài liệu thiết kế và đọc code sẽ tốt hơn

    • Hơn nữa, rất nhiều ngữ cảnh nghiệp vụ nằm trong đầu con người. Muốn đạt tới mức kỹ sư thực thụ thì AI phải có thể hỏi trực tiếp con người
    • Nhưng nếu cung cấp ngữ cảnh một cách tường minh thì chất lượng đầu ra của LLM đúng là cải thiện rõ rệt
    • Trong tương lai, nếu prompt có cả ngữ cảnh nghiệp vụ thì AI cũng sẽ hiểu được cái “tại sao” đó
    • Thực ra trong code cũng đã thấm vào khá nhiều ngữ cảnh công việc/nghiệp vụ
      Chỉ cần nhìn ví dụ deepwiki hay liên kết Codemap là thấy
      Khi debug thì thực ra chừng đó thông tin đã đủ rồi
    • Tôi không biết từ bao giờ việc coding lại trở nên xoay quanh ngữ cảnh nghiệp vụ như thế này. Chỉ riêng hiểu biết kỹ thuật thôi cũng đã rất có giá trị rồi

  • Tôi nghĩ cách tiếp cận này là đúng hướng để giải quyết vấn đề
    Thay vì làm ra các sản phẩm AI chỉ hoạt động nửa vời, điều quan trọng hơn là làm cho codebase dễ hiểu với cả con người lẫn LLM
    Các hệ thống tự tài liệu hóa kiểu này có thể giảm bớt sự mệt mỏi phát triển ở các công ty lớn

    • Tôi cũng kết hợp cả hai hướng. Khi cần hiểu một codebase mới thì trực quan hóa rất hữu ích, nhưng sau đó rốt cuộc năng suất mới là điều quan trọng

  • (đồng tác giả) Cứ thoải mái đặt câu hỏi!
    Có thể xem video demo dài 1 phút
    Đây là ý tưởng của CTO Cognition, Steven. Anh ấy không thích được chú ý, nhưng lần này thực sự làm rất tốt
    Cũng có thể tham khảo tweet của anh ấy

    • Tôi tò mò không biết có ví dụ nào cho thấy nó hoạt động tốt cả với codebase lớn không. Với dự án nhỏ thì dùng LLM cũng ổn, nhưng code phức tạp mới là bài kiểm tra thật sự
    • Tôi có một đề xuất — giá mà Codemaps có thể xem được ở panel chính thay vì sidebar. Hiện tại nó quá hẹp

  • Ba năm trước tôi từng làm một side project với ý tưởng tương tự
    Trước thời LLM bùng nổ, tôi đã tự viết AST parser để trích xuất quan hệ trong code Go và Java rồi trực quan hóa bằng Graphviz
    Tôi còn thêm cả bộ lọc dựa trên regex, và nó thực sự hữu ích khi cần hiểu một codebase xa lạ
    Giờ nó vẫn còn ở packagemap.co, nhưng đã khá cũ rồi

    • Tôi cũng từng làm thứ tương tự, nhưng là trực quan hóa 3D cho ngôn ngữ Go
      Mục tiêu là để lập trình viên nắm được cấu trúc code theo không gian và làm việc trong môi trường VR với đầy đủ ngữ cảnh
      Bài viết liên quan ở đây

  • Đề xuất tính năng: sẽ rất hay nếu có Github Action tự động tạo Codemap của repository, nhúng vào README, và tự cập nhật khi có các PR quan trọng

  • Ý tưởng trực quan hóa code thì hay, nhưng đôi khi có nguy cơ sa vào “những ý tưởng tệ”
    Phần lớn sơ đồ không truyền tải tốt ý nghĩa mà chúng nhắm tới, thậm chí còn tốn thời gian để diễn giải hơn
    Trên thực tế, khi đọc code hay toán học, con người thường tự tạo ra mô hình trực quan của riêng mình trong đầu
    Ví dụ, nếu bạn trực quan hóa một ứng dụng Flutter mà không làm lộ ra cấu trúc cây widget, thì nó sẽ xung đột với mô hình tinh thần của tôi
    Cuối cùng thì kiểu trực quan hóa này cũng khá giống với việc khi đọc tiểu thuyết, trong đầu ta tự vẽ ra các cảnh tượng.
    Tôi vẫn chưa chắc liệu LLM có phải là công nghệ để tạo ra “bộ phim về code mà ta muốn xem” hay không