This Open-Source Tool Makes Claude Create Architecture Diagrams

BBetter Stack
Computing/Software

Transcript

00:00:00Minta agen koding kita memetakan repositori, dan sekarang kita mendapatkan Kafka, Redis, atau gateway API yang bahkan tidak ada.
00:00:07Diagram tersebut sering kali terlihat bagus, tetapi banyak hal yang terlewat.
00:00:10Ini adalah Archify, di mana agen tidak menggambar apa pun.
00:00:14Agen tersebut menghasilkan grafik bertipe, Archify memvalidasinya, lalu merender diagramnya.
00:00:19Ini mungkin salah satu cara terbaik untuk memvisualisasikan arsitektur kita.
00:00:23Kita akan segera mengetahuinya.
00:00:30Sekarang, model kita mungkin seharusnya tidak menggambar diagram sama sekali.
00:00:33Cara kerja Archify adalah mendeskripsikan sistem sebagai JSON berstruktur dan bertipe.
00:00:37Hal itu divalidasi, dan hanya setelah itu compiler lokal mengubahnya menjadi HTML akhir.
00:00:42Jika grafiknya tidak valid, proses akan gagal.
00:00:45Itulah Archify, yang mendapatkan 44.000 bintang hanya dalam beberapa bulan karena terintegrasi langsung ke Cloud Code, Cursor, dan Codex.
00:00:53Jadi, saya ingin mengujinya.
00:00:54Saya akan menginstal Archify, mengarahkannya ke repositori, dan membuatnya menjawab satu pertanyaan tentang arsitektur.
00:01:00Lalu kita akan melihat apakah kita bahkan dapat menggunakan hasil ini dalam PR.
00:01:03Dan ada beberapa kasus penggunaan di mana saya sama sekali tidak akan menggunakannya, tapi kita akan segera membahasnya.
00:01:08Jika Anda menyukai alat koding yang mempercepat alur kerja Anda, pastikan untuk berlangganan.
00:01:11Kami selalu merilis video baru secara berkala.
00:01:13Baiklah, menginstalnya hanya memerlukan satu perintah di sini.
00:01:17Dan ini bukan aplikasi yang harus saya siapkan.
00:01:19Ini sebenarnya adalah sebuah skill agen.
00:01:22Setelah terinstal, saya dapat menggunakan skill yang sama dari Cloud Code atau alat lain yang saya sebutkan sebelumnya
00:01:28tanpa harus mengubah editor atau bahkan alur kerja saya.
00:01:32Sekarang saya dapat mengiriminya tugas nyata.
00:01:34Saya tidak akan memintanya menggambar arsitektur dari repositori ini.
00:01:37Itu terdengar lumayan.
00:01:39Namun secara keseluruhan, itu hanya akan mengembalikan banyak informasi tidak berguna kepada kita.
00:01:42Jadi saya akan mengajukan satu pertanyaan yang solid.
00:01:45Gunakan Archify, buat diagram arsitektur maksimal 8 hingga 12 node.
00:01:49Apa yang terjadi saat terjadi cache miss pada layanan ini?
00:01:52Sertakan hanya kotak-kotak yang ada di dalam repositori ini.
00:01:54Jika Anda tidak dapat membuktikan adanya komponen, abaikan komponen tersebut.
00:01:58Hasilkan HTML yang mandiri (self-contained).
00:02:00Itu seperti satu rencana, satu pertanyaan.
00:02:02Kira-kira 8 hingga 12 node.
00:02:04Karena jika kita meminta agen memetakan seluruh basis kode kita, apakah kita benar-benar menyederhanakan sesuatu atau
00:02:08justru membuatnya semakin sulit dipahami?
00:02:10Sekarang saya baru saja mengubah pohon repositori saya menjadi sebuah diagram alur.
00:02:14Agen tersebut menulis arsitektur sebagai JSON.
00:02:16Kemudian Archify memvalidasinya.
00:02:18Saya juga dapat menjalankan validasi tersebut secara langsung seperti yang akan saya lakukan di sini.
00:02:23Ini sebenarnya fitur yang sangat keren yang saya temukan di dalam alat ini.
00:02:27Node juga dapat menyertakan bukti repositori yang terikat pada commit dan rentang baris tertentu.
00:02:32Jika bukti itu tidak ada, node tersebut tidak mendapatkan lencana SRC hanya karena node tersebut terdengar
00:02:37meyakinkan dalam jawabannya.
00:02:39Baiklah.
00:02:39Sekarang, bagaimana hal ini bisa membantu?
00:02:41Ini terlihat seperti diagram arsitektur.
00:02:43Ya, tentu, tetapi Anda tidak harus menggunakannya seperti itu.
00:02:46Saya dapat mencari layanan aktual di dalamnya.
00:02:50Saya dapat mengkliknya dan langsung melihat apa yang ada di hulu (upstream) dan hilir (downstream).
00:02:55Kemudian saya dapat menelusuri rute tersebut dan mengikuti jalur cache miss melalui sistem.
00:02:59Jadi alih-alih menatap 10 panah dan mencoba melacaknya kembali dalam pikiran, saya sekarang dapat
00:03:05menelusurinya.
00:03:06Selain melakukan itu, saya juga dapat mengekspornya.
00:03:08Saya bisa menyalin PNG atau menghasilkan kartu bagikan berukuran 1200 kali 36.
00:03:13Perbedaan sebenarnya di sini adalah mermaid ini, bukan?
00:03:17Alat mermaid biasanya adalah sesuatu yang hanya saya baca.
00:03:20Ini adalah sesuatu yang bisa saya ajak berinteraksi dan saya tanyakan.
00:03:23Dan gerakan tersebut tidak digunakan untuk menyembunyikan struktur yang buruk; ekspor diagram sebagai gambar statis
00:03:28dan maknanya tetap ada untuk bertahan.
00:03:31Dan ada kasus penggunaan kedua yang mungkin sebenarnya lebih berguna, kan?
00:03:35Bagaimana menurut kita?
00:03:36Nah, saya sedang memikirkan ulasan kode (code review).
00:03:38Katakanlah ini adalah sistem sebelum ada perubahan.
00:03:41Lalu saya menambahkan pekerja percobaan ulang (retry worker) yang sudah ada.
00:03:44Saya dapat menyuruh agen memperbarui arsitektur tanpa mengarang sesuatu dari udara kosong.
00:03:49Archify kemudian dapat membandingkan (diff) dua snapshot yang telah divalidasi: ditambahkan, dihapus, dipindahkan, dirutekan ulang.
00:03:54Jadi alih-alih mendapatkan dua diagram yang dihasilkan, saya bisa melihat apa yang benar-benar berubah.
00:03:59Dan editornya tetap berupa obrolan (chat).
00:04:02Namun jika saya ingin arsitektur ini bertahan ke sesi agen berikutnya, saya melakukan commit pada file JSON tersebut.
00:04:07Pada titik ini, cara paling mudah untuk memahami Archify adalah seperti ini.
00:04:11Bagi VM HTML untuk peta sistem, agen koding adalah antarmuka depannya (front end).
00:04:15JSON adalah representasi perantaranya.
00:04:19HTML adalah hasil yang dikompilasi.
00:04:21Dan lapisan tengah tersebut melakukan sebagian besar pekerjaan.
00:04:24JSON mengikuti skema yang ketat.
00:04:26Bidang yang tidak dikenal dapat menyebabkan validasi gagal.
00:04:28Dan ada lima mode diagram.
00:04:30Arsitektur, alur kerja (workflow), sekuens, alur data, dan siklus hidup (life cycle).
00:04:34Namun salah satu keputusan yang paling menarik adalah apa yang tidak dikendalikan oleh model.
00:04:38Tata letak (layout).
00:04:39Model mendeskripsikan sistem.
00:04:41Model tidak memutuskan secara persis di mana setiap kotak akan ditempatkan.
00:04:44Mereka sebenarnya mencoba menggunakan mermaid bertema dengan tata letak derajat otomatis.
00:04:48Itu tidak lebih baik daripada mermaid biasa.
00:04:51Dan validasi juga gagal secara tertutup (fails closed).
00:04:54JSON yang buruk tidak akan pernah berubah menjadi diagram yang indah dengan cara apa pun.
00:04:58Anda mendapatkan diagnostik, kode aturan, dan perbaikan yang didukung.
00:05:02Sekarang, dari semua ini, di sinilah mungkin saya tidak akan menggunakan Archify.
00:05:06Jika Anda membutuhkan diagram langsung di dalam file readme Anda, mungkin jangan.
00:05:10Mungkin butuh waktu.
00:05:11GitHub merendernya.
00:05:12HTML Archify tidak melakukannya.
00:05:15Archify sedang memecahkan jenis masalah yang jauh berbeda di sini.
00:05:18Sudah ada agen yang terlibat di dalam prosesnya.
00:05:20Agen tersebut menghasilkan artifak arsitektur.
00:05:23Mungkin itu dimasukkan ke dalam sebuah PR.
00:05:25Mungkin itu dimasukkan ke dalam tinjauan desain.
00:05:27Di situlah keluaran yang terverifikasi mulai penting.
00:05:30Sekarang, di dalam ini, ada banyak hal yang saya sukai.
00:05:32Alat ini hidup di dalam perangkat yang sudah kita gunakan setiap hari.
00:05:35Saya dapat mengekspor keluar hasilnya.
00:05:38Bukti repositori memberi saya sesuatu yang konkret untuk benar-benar diperiksa.
00:05:41Dan karena arsitekturnya terstruktur, saya dapat terus mengeditnya tanpa hal-hal berubah begitu saja seiring waktu.
00:05:46Tampilannya juga cukup bagus sehingga saya mungkin tidak merasa perlu menggambarnya ulang di Figma atau alat lain semacam itu.
00:05:53Namun semua ini juga berarti bahwa, pada saat yang sama, Archify tidak mengetahui arsitektur Anda.
00:05:58Sebuah grafik bisa sepenuhnya valid namun tetap mendeskripsikan sistem yang salah.
00:06:02Anda tetap harus membacanya.
00:06:03Model yang buruk, seperti yang kita tahu, sering kali hanya akan membuat JSON yang berfungsi, tetapi tetap terlihat jelek.
00:06:08Dan jika tempat akhir untuk diagram Anda adalah readme, Mermaid mungkin masih lebih baik di sini.
00:06:13Dengan Archify, Anda mungkin melakukan commit pada JSON dan HTML atau mengekspor sebuah gambar.
00:06:18Dan ada satu kesalahan yang harus benar-benar Anda hindari di sini.
00:06:21Jangan arahkan alat ini ke repositori besar dan katakan, petakan semuanya.
00:06:25Saya rasa Anda bisa menebak bagaimana hasilnya karena Anda mungkin hanya akan mendapatkan banyak sampah kembali.
00:06:29Tapi itu bukan kegagalan dari Archify.
00:06:32Melainkan itu adalah pertanyaan yang buruk.
00:06:34Jika Anda sudah bekerja dengan agen koding dan Anda secara berkala membuat diagram yang akan Anda lihat di masa mendatang atau mungkin dilihat orang lain, ini masuk akal.
00:06:42Tinjauan PR, dokumen desain, saya mungkin akan menggunakan ini.
00:06:47Saya tidak akan menginstal ini karena saya menginginkan versi yang lebih cantik dari sesuatu yang sudah kita miliki, contohnya Mermaid.
00:06:52Dan saya pasti tidak akan mengharapkannya melakukan rekayasa balik (reverse engineer) apa pun untuk saya.
00:06:55Hambatan untuk mencobanya sangatlah kecil.
00:06:58Satu perintah npx, node ada di mesin Anda.
00:07:00Tidak ada bobot model (model weights) di sini.
00:07:02M4 Pro saya pada dasarnya tidak relevan dalam hal ini.
00:07:05Namun ada satu aturan yang akan saya pegang.
00:07:07Satu pertanyaan per file.
00:07:08Jika Anda tidak dapat dengan jelas menyatakan pertanyaan apa yang dijawab oleh diagram tersebut, jangan buat diagramnya.
00:07:14Saya Josh dari BetterStack.
00:07:15Jika Anda menyukai kiat dan trik koding seperti ini, pastikan untuk berlangganan ke saluran ini.
00:07:19Sampai jumpa di video lainnya.
00:07:20Sampai jumpa di video lainnya.

Key Takeaway

Archify mengatasi keterbatasan agen koding dalam memvisualisasikan arsitektur dengan memvalidasi representasi JSON secara ketat sebelum mengompilasinya menjadi diagram HTML yang interaktif.

Highlights

  • Alat bernama Archify menghasilkan diagram arsitektur dari repositori dengan meminta agen membuat JSON terstruktur dan bertipe, lalu mengompilasinya menjadi HTML.

  • Alat ini menduduki 44.000 bintang dalam beberapa bulan karena terintegrasi langsung ke Cloud Code, Cursor, dan Codex.

  • Validasi pada Archify gagal secara tertutup (fails closed) jika JSON tidak valid, mencegah pembuatan diagram yang salah atau mengarang komponen.

  • Pengguna dapat melacak rute hulu dan hilir serta mengikuti jalur cache miss secara interaktif langsung di dalam diagram HTML.

  • Archify mendukung lima mode diagram utama, yaitu arsitektur, alur kerja, sekuens, alur data, dan siklus hidup.

Timeline

Masalah Visualisasi Arsitektur dan Pengenalan Archify

  • Agen koding sering kali menghasilkan diagram arsitektur yang memasukkan komponen fiktif seperti Kafka atau Redis yang tidak ada di repositori.
  • Archify bekerja dengan mendeskripsikan sistem sebagai JSON berstruktur yang divalidasi sebelum dikompilasi menjadi HTML.
  • Alat ini terintegrasi langsung ke Cloud Code, Cursor, dan Codex tanpa memerlukan pengaturan aplikasi yang rumit.

Pemetaan repositori secara langsung sering kali menghasilkan informasi tidak akurat yang membuat diagram terlihat bagus tetapi menyesatkan. Archify mengatasi masalah ini dengan meminta agen menulis kode dalam format JSON bertipe yang kemudian divalidasi oleh compiler lokal. Proses ini memastikan bahwa hanya komponen yang terbukti ada di dalam basis kode yang masuk ke dalam diagram akhir.

Penggunaan Alat dan Interaksi Diagram

  • Instalasi Archify hanya memerlukan satu perintah npx pada perangkat yang sudah ada.
  • Pengguna dapat mengajukan pertanyaan spesifik seperti melacak jalur cache miss dengan batasan 8 hingga 12 node.
  • Diagram HTML yang dihasilkan bersifat interaktif sehingga pengguna dapat mengeklik layanan untuk melihat hubungan hulu dan hilir.

Penggunaan alat ini dimulai dengan memberikan satu pertanyaan terarah alih-alih meminta agen memetakan seluruh repositori sekaligus. Node pada diagram dapat menyertakan bukti repositori yang terikat pada commit dan rentang baris tertentu. Hasil akhir dapat diekspor sebagai PNG atau dibagikan sebagai kartu interaktif yang jauh lebih unggul dibandingkan diagram statis berbasis teks seperti Mermaid.

Ulasan Kode, Mode, dan Kasus Penggunaan

  • Archify memungkinkan perbandingan diff antara dua snapshot arsitektur yang divalidasi untuk ulasan kode.
  • Alat ini menyediakan lima mode diagram meliputi arsitektur, alur kerja, sekuens, alur data, dan siklus hidup.
  • Archify tidak disarankan untuk file readme di GitHub karena tidak merender HTML secara langsung.

Perubahan arsitektur dapat dilacak dengan memperbarui file JSON dan melakukan commit pada repositori untuk sesi agen berikutnya. Model bertindak sebagai pembuat deskripsi sistem sementara tata letak diatur secara otomatis tanpa membiarkan model menebak posisi kotak. Alat ini sangat berguna untuk tinjauan PR dan dokumen desain, meskipun pengguna tetap harus membaca dan memverifikasi keakuratan sistem yang digambarkan.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video