Bedah Produk Keren: Apakah tt-a1i/archify Architecture Visualizer Layak Diadopsi untuk Stack Production Anda?

Cool Products Teardown: Inside tt-a1i/archify Architecture Visualizer — How Does It Work in Production? Oleh: Doddi Priyambodo

Bikin diagram arsitektur itu sering kali jadi pain in the ass buat kita para systems engineer. Kalau pakai Draw.io atau Excalidraw, kita harus drag-and-drop manual yang makan waktu. Kalau pakai Mermaid.js, kadang layouting-nya berantakan saat komponennya mulai kompleks.

Nah, belakangan ini saya perhatiin ada satu tool yang lagi rame di-star di GitHub: tt-a1i/archify. Ini bukan sekadar renderer biasa, tapi tool yang di-desain khusus untuk hidup di dalam ekosistem AI agents (seperti Cursor, Claude Code, atau Codex). Mari kita bongkar jeroannya dan lihat kenapa tool ini layak masuk ke toolchain kalian.

---

Apa Itu tt-a1i/archify Architecture Visualizer & Mengapa Sedang Trending?

Secara sederhana, Archify adalah rendering and validation system berbasis Node.js yang mengubah deskripsi sistem atau codebase menjadi interactive system map (HTML/SVG) secara langsung dari chat interface AI kalian.

Kenapa tool ini blowing up? Karena dia memecahkan masalah "AI Hallucination" dalam pembuatan diagram. Biasanya, kalau kita suruh LLM bikin diagram, hasilnya kadang nggak konsisten. Archify mengambil pendekatan berbeda: dia memaksa AI agent untuk men-generate Typed JSON IR (Intermediate Representation), lalu Archify yang akan melakukan kompilasi secara deterministik menjadi visual.

Beberapa killer features yang bikin devs pada suka:

• Interactive & Grounded: Hasilnya bukan cuma gambar statis. Kita bisa search nodes, trace upstream/downstream, dan nge-klik route untuk melihat flow data.
• Architecture Diffing: Bisa nge-bandingin dua snapshot arsitektur (Before / Delta / After). Kelihatan jelas mana service yang ditambah, dihapus, atau di-reroute.
• Single File Output: Hasil akhirnya adalah satu file HTML self-contained (atau PNG/SVG/WebM) yang gampang banget di-share ke tim atau diselipin di PR (Pull Request).

---

Di Balik Layar: Arsitektur & Keputusan Desain

Sebagai engineer, kita pasti penasaran: gimana cara kerjanya di balik layar?

Archify memisahkan antara reasoning engine (LLM/Agent) dan rendering engine. AI tidak menggambar apa-apa; AI hanya menganalisis codebase dan memproduksi JSON IR sesuai skema yang ketat. Archify kemudian memvalidasi JSON tersebut dan menjalankan algoritma layouting deterministik.

Berikut adalah execution pipeline dari Archify:

flowchart LR
    subgraph AI_Agent_Layer [AI Agent Layer]
        A[Cursor / Claude Code] -->|Analyzes Codebase| B(Generates Typed JSON IR)
    end

    subgraph Archify_Core [Archify Engine Node.js]
        B --> C{JSON Validator}
        C -->|Invalid| D[Feedback to Agent to Fix]
        C -->|Valid| E[Deterministic Layout Engine]
        E --> F[HTML/SVG Compiler]
    end

    subgraph Output_Layer [Artifacts]
        F --> G(Self-contained HTML)
        F --> H(PNG / WebM Share Cards)
    end
    
    style A fill:#1e1e1e,stroke:#fff,color:#fff
    style B fill:#4b0082,stroke:#fff,color:#fff
    style C fill:#b8860b,stroke:#fff,color:#fff
    style E fill:#006400,stroke:#fff,color:#fff
    style F fill:#00008b,stroke:#fff,color:#fff

Design Choices yang Menarik:

1. Typed JSON IR sebagai Kontrak: Dengan menggunakan JSON IR yang punya strict typing, Archify memastikan bahwa topologi yang digambar adalah fakta dari codebase, bukan karangan LLM.
2. Deterministic Rendering: Kalau kalian kasih JSON yang sama dua kali, hasil layout-nya akan 100% sama. Ini krusial untuk fitur Architecture Diffing (Before/After) agar node tidak lompat-lompat saat di-render ulang.
3. Zero-Telemetry by Default: Untuk tool yang membaca arsitektur internal, privacy adalah nomor satu. Archify hanya melakukan HTTP GET untuk cek update (tanpa mengirim data project atau prompt), dan bahkan ini bisa dimatikan total via environment variable.

---

Quickstart Praktis & Bedah Kode

Karena Archify di-desain sebagai Agent Skill, cara pakenya sedikit berbeda dari CLI tools tradisional. Kita meng-install-nya agar bisa di-panggil oleh AI editor kita.

1. Instalasi via NPX (Global) Paling gampang pakai npx skills. Kalau kalian pakai Cursor, jalankan ini di terminal:

# Install secara eksplisit untuk Cursor
npx -y skills add tt-a1i/archify --skill archify --agent cursor --global --copy --yes

# Atau kalau cuma mau nyoba tanpa install permanen (misal pakai Codex):
npx skills use tt-a1i/archify@archify --agent codex

(Pro-tip: Kalau kalian paranoid soal network request, set export ARCHIFY_UPDATE_CHECK_DISABLED=1 di .bashrc/.zshrc kalian untuk mematikan fitur update reminder).

2. Cara Penggunaan (Prompting the Agent) Kalian nggak perlu nulis JSON manual. Buka chat di Cursor atau Claude Code, lalu kasih prompt seperti ini:

Use Archify to draw: Browser -> API -> Redis cache -> PostgreSQL fallback.

Atau, untuk use-case yang lebih advanced (membaca repository beneran):

Analyze this repository, then use archify to create a high-level runtime architecture diagram. 
Show 8–12 core components, one primary path, external dependencies, and trust boundaries. 
Put supporting details in the metadata.

Agent akan membaca source code kalian, men-generate JSON IR, dan memanggil Archify secara otomatis. Hasilnya? Kalian tinggal klik link lokal atau buka file HTML yang di-generate untuk melihat diagram interaktif lengkap dengan fitur trace reach (upstream/downstream).

---

Analisis Jujur Saya: Kapan Harus Menggunakannya (Pro & Kontra)

Setelah ngoprek dan melihat output-nya, ini verdict saya sebagai systems engineer mengenai posisi Archify di stack kalian.

Kelebihan (Pros):

• Bye-bye Manual Layouting: Integrasi langsung dengan Cursor/Claude bikin proses dokumentasi arsitektur jadi frictionless. Kalian ngoding, AI yang nge-gambar arsitekturnya berdasarkan state kode terbaru.
• Interaktivitas Level Dewa: Fitur Semantic Lens dan Route Probe di HTML output-nya sangat berguna saat onboarding engineer baru. Mereka bisa nge-klik node API Server dan langsung lihat downstream dependencies-nya.
• Diffing untuk Code Review: Kemampuan untuk nge-generate "Delta" diagram (apa yang berubah di PR ini) adalah game changer buat reviewer.
• Export Ready: Fitur Share Card (1200x630 PNG) sangat praktis buat ditempel di README GitHub atau tiket Jira.

Kekurangan & Trade-offs (Kontra):

• Sangat Bergantung pada AI Agent: Archify bukanlah tool yang enak dipakai kalau kalian mau nulis diagram secara manual (seperti PlantUML atau Mermaid). Kalau kalian nggak pakai AI editor (misal masih pakai Vim murni tanpa copilot/agent), tool ini kurang relevan.
• Keterbatasan Konteks LLM: Karena Archify mengandalkan AI untuk membaca repository, kualitas diagram sangat bergantung pada context window LLM. Untuk monolith repository raksasa, kalian harus pintar-pintar ngasih prompt (misal: batasi hanya 8-12 komponen) agar AI tidak timeout atau halusinasi saat men-generate JSON IR.
• Node.js Dependency: Walaupun di metadata sering dikaitkan dengan ekosistem lain, core engine Archify butuh Node.js/NPX untuk berjalan. Buat environment yang strictly Go atau Rust tanpa Node, ini nambah dependency di CI/CD pipeline.

Kesimpulan: Kalau tim kalian sudah all-in menggunakan AI-assisted IDE seperti Cursor atau Claude Code, tt-a1i/archify adalah no-brainer. Ini adalah evolusi natural dari docs-as-code menjadi docs-as-agent-output. Tinggalkan Mermaid.js untuk topologi sistem yang kompleks, dan biarkan Archify yang nge-render pipeline kalian.