Kod tabanını Claude ile etkileşimli bir diyagrama çevirmek

Modüller izometrik bloklara, veri akışı tıklanabilir hareketli noktalara dönüşüyor. Kurulum, iyileştirme döngüsü ve doğruluğun nasıl kontrol edildiği.

Hızlı not: Bu fikrin en iyi tarafı çıktının kendisi değil, yan etkisi: haritayı çıkardıktan sonra kod tabanı hakkındaki konuşmalar bambaşka bir hızda ilerliyor.

Fikir tek cümleyle özetlenebiliyor: Claude'a kod tabanını görsel bir diyagrama çevirtiyorsun, sonra o kod tabanını onunla konuşmak çok daha kolay hale geliyor. Diyagramdaki hareketli noktalar da süs değil; inceleyebildiğin gerçek veri parçaları.

Aslında yaptığın şey şu: Claude'dan kod tabanının etkileşimli bir görselleştirmesini çizmesini istiyorsun, sonra görselleştirmeyi onunla birlikte iyileştiriyorsun.

Nasıl bir şey ortaya çıkıyor?

Ekranda üç bölge var. Solda sistemin parçaları gruplanmış halde duruyor: döngünün kendisi, döngüyü destekleyen parçalar, asıl uygulama ve dışarı çıkan çıktılar. Ortada izometrik bir harita var; her modül bir blok, blokların arasındaki çizgiler veri yolları. Sağda ise iki sekmeli bir panel: biri sistemin ne yaptığını düz dille anlatıyor, diğeri nasıl kurulduğunu gösteriyor.

Üstteki şeritte de sistemin gerçek sayıları duruyor: hangi depo, kaç rol, kaç koşu, kaç kayıt. Etkileşim basit: üstüne gelince açıklama çıkıyor, sürükleyince kayıyorsun, tekerlekle yakınlaşıyorsun ve bir bloğun içine girip adımlarını görebiliyorsun.

Hareketli noktalar ne işe yarıyor?

Buradaki ayrıntı önemli. İstediğin şey, gerçek veri aktarımından alınmış tek tek veri paketleri. Çok çeşit olmasına gerek yok. Önemli olan üstüne tıklayıp içinde ne taşındığını görebilmen ve tek tek süreçlere yakınlaşıp daha fazla detay alabilmen.

Yani amaç güzel görünen bir animasyon değil. Sistemin içinde neyin aktığını gözle takip edebilmek.

Diyagramın kodu gerçekten yansıttığından nasıl emin oluyorsun?

Yöntem şu: harita üzerinde geziniyorsun ve farklı parçaların nasıl çalıştığını soruyorsun. Bir de iç içe bölümler kurmasına izin veriyorsun, böylece üst seviyeden aşağı inebiliyorsun. Kod tabanı üzerinde daha önce çalıştıysan, kabaca neyin orada olması gerektiğini zaten biliyorsun; eksik ya da fazla duran şey hemen göze çarpıyor.

Aynı görünümü nasıl tutturuyorsun?

Stil tutarlılığı için sıfırdan tarif etmiyorsun. Çoğunlukla daha önce yaptığın başka bir repoyu gösterip "buna benzer bir şey yap" diyorsun. İşin güzel tarafı şu: beğendiğin bir görseli doğrudan Claude Code'a verip aynı dili kullanmasını isteyebiliyorsun. Beğendiğin bir siteyi göstermek de aynı işi görüyor.

Bunu tekrarlanabilir hale getirmek

Aynı işi her repoda yapacaksan, çalışan istemi bir skill dosyasına koy. O andan sonra tek cümleyle çağırıyorsun ve düzen her seferinde aynı çıkıyor. Nitekim bu fikri gören birçok kişi kendi sürümünü skill olarak paketledi; bazıları aynı yaklaşımı ajan izlerini görselleştirmek için kullandı.

Bu repoyu incele ve tek dosyalık, etkileşimli bir
görselleştirme üret (bağımsız HTML, dış bağımlılık yok).

- Her ana modül bir blok olsun, izometrik yerleşim kullan
- Bloklar arasındaki veri akışını çizgilerle göster
- Çizgilerin üstünde hareket eden noktalar olsun; her nokta
  gerçek bir veri parçasını temsil etsin, tıklayınca içeriği açılsın
- Bir sürecin içine girip alt adımlarını görebileyim
- Üstüne gelince her bloğun ne yaptığı düz dille yazsın
- Sağ panelde iki sekme olsun: "ne yapıyor" ve "nasıl kurulmuş"

Uydurma. Sadece repoda gerçekten olan modülleri ve akışları
çiz, emin olmadığın yerleri ayrıca listele.

Asıl kazanç

Çıktının kendisi güzel ama asıl fayda yan etkisinde. Kod tabanını Claude ile konuşurken artık ortak bir resme bakıyorsunuz. "Şu blok" diyorsun ve ikiniz de aynı şeyi anlıyorsunuz. Yeni bir repoya girerken saatlerce dosya gezmek yerine önce haritayı çıkarıyorsun; ekibe bir sistemi anlatırken de herkes aynı ekrana bakıyor.