Tutorial Vibe Coding Membuat Diagram Arsitektur Profesional dengan Claude Code

Vibe coding telah merevolusi cara developer membangun software di 2026. Alih-alih menulis setiap baris kode secara manual, kita menggambarkan apa yang diinginkan kepada AI agent, dan agent tersebut menghasilkan implementasinya. Namun, banyak yang belum menyadari bahwa vibe coding juga bisa diterapkan untuk membuat visualisasi teknis. Artikel ini membahas cara menggunakan Claude Code bersama skill diagram-design untuk menghasilkan diagram arsitektur profesional tanpa membuka Figma atau mempelajari Mermaid.

Apa itu Vibe Coding untuk Visualisasi Teknis

Vibe coding pada dasarnya adalah proses development di mana developer menjelaskan intent secara natural language, lalu AI agent menangani implementasi detailnya. Ketika diterapkan pada visualisasi, prosesnya menjadi: kamu menjelaskan komponen sistem dan relasinya, Claude Code menghasilkan diagram HTML+SVG yang rapi dan profesional. Tidak ada lagi waktu terbuang untuk menyesuaikan posisi box di Figma atau memperbaiki syntax Mermaid yang error.

Skill diagram-design oleh Cathryn Lavery adalah salah satu implementasi paling matang untuk use case ini. Repository cathrynlavery/diagram-design menyediakan 39 tipe diagram editorial dengan output self-contained HTML dan SVG. Tidak ada shadow, tidak ada rounded box generik, dan tidak ada dependency eksternal. Setiap diagram bisa dibuka langsung di browser tanpa build step.

Mengenal Diagram-Design Skill untuk Claude Code

Skill ini mendukung berbagai tipe visualisasi: architecture, flowchart, sequence diagram, state machine, ER diagram, timeline, swimlane, quadrant, radar chart, loop/flywheel, tree, org chart, dan banyak lagi. Yang menarik adalah kemampuannya untuk membaca brand identity dari website kamu dan menyesuaikan warna serta typography dalam 60 detik. Output tersedia dalam tiga varian: minimal light, minimal dark, dan full-editorial.

Keunggulan utama dari skill ini adalah semantic system patterns. Behavior diagram dijelaskan secara terpisah dari layout, sehingga sebuah queue, policy trace, atau trust boundary bisa menggunakan tipe diagram terdekat tanpa perlu menambah tipe baru. Hasilnya adalah visualisasi yang konsisten dan mudah dibaca, dengan target density 4/10 dan accent color yang dipreserve untuk 1-2 elemen paling penting.

Langkah 1: Instalasi Skill Diagram di Claude Code

Skill diagram-design bisa diinstal melalui marketplace plugin Claude Code. Jalankan perintah berikut di terminal Claude Code:

/plugin marketplace add cathrynlavery/diagram-design

Setelah marketplace terdaftar, pilih Browse and install plugins, cari cathrynlavery/diagram-design, lalu install. Alternatifnya, install langsung dengan:

/plugin install diagram-design@cathrynlavery

Setelah instalasi selesai, skill siap digunakan. Kamu juga bisa clone repository untuk melihat contoh-contoh diagram yang sudah dibuat:

git clone https://github.com/cathrynlavery/diagram-design.git
cd diagram-design/docs/screenshots
ls -la

Langkah 2: Membuat Diagram Arsitektur Pertama

Mari buat diagram arsitektur sistem e-commerce sederhana. Cukup berikan deskripsi natural language kepada Claude Code:

Buat diagram arsitektur untuk sistem e-commerce dengan komponen:
- Frontend React di Vercel
- API Gateway menggunakan Kong
- Auth Service dengan OAuth2
- Product Service (Node.js)
- Order Service (Go)
- Payment Gateway (Stripe)
- Database PostgreSQL utama
- Redis untuk caching
- S3 untuk asset storage

Gunakan diagram-design skill dengan style full-editorial.

Claude akan menganalisis komponen, menentukan relasi antar service, dan menghasilkan file HTML dengan SVG diagram yang rapi. Setiap komponen akan diberi label jelas, connection line akan menunjukkan arah data flow, dan layout otomatis dioptimalkan untuk readability. File yang dihasilkan bisa langsung dibuka di browser atau di-embed ke dokumentasi.

Langkah 3: Kustomisasi Warna dan Brand Identity

Skill diagram-design bisa membaca brand identity dari website perusahaanmu secara otomatis. Cukup tambahkan URL website ke prompt:

Buat diagram arsitektur dengan brand colors dari https://company.com
Gunakan style minimal-dark.

Claude akan meng-scrape website untuk mengekstrak primary color, secondary color, dan font family, lalu menerapkannya ke diagram. Jika kamu ingin kontrol lebih manual, bisa langsung spesifikasikan warna:

Gunakan primary color #0F172A, accent #3B82F6, dan neutral #64748B.
Font: Inter untuk heading, SF Mono untuk label teknis.

Hasilnya adalah diagram yang terlihat seperti bagian dari design system perusahaanmu, bukan visualisasi generik yang terlalu familiar dari tool AI lainnya.

Langkah 4: Membuat Diagram Sequence dan Flowchart

Beyond arsitektur, skill ini juga powerful untuk diagram sequence dan flowchart. Contohnya, buat sequence diagram untuk proses checkout:

Buat sequence diagram untuk flow checkout:
1. User klik checkout di frontend
2. Frontend kirim request ke API Gateway
3. API Gateway validasi token ke Auth Service
4. Order Service create order di PostgreSQL
5. Payment Service proses pembayaran ke Stripe
6. Stripe callback ke webhook
7. Order Service update status ke confirmed
8. Redis invalidate cache product stock
9. Frontend redirect ke halaman sukses

Claude akan menghasilkan sequence diagram dengan aktor, lifelines, messages, dan activation boxes yang tepat. Untuk flowchart decision logic, gunakan prompt seperti:

Buat flowchart untuk logic refund:
Start -> Cek order status (if delivered, lanjut; else reject)
-> Cek refund window (if within 7 hari, lanjut; else reject)
-> Cek kondisi produk (if good, full refund; else partial)
-> Proses refund -> End

Langkah 5: Export dan Integrasi ke Dokumentasi

Output dari diagram-design skill adalah file HTML self-contained dengan SVG inline. Ini berarti:

• Tidak ada dependency eksternal (JavaScript, CSS file terpisah, atau gambar)

• Bisa dibuka langsung di browser apa pun

• Bisa di-embed ke Markdown, Notion, Confluence, atau static site generator

• Bisa di-convert ke PDF atau PNG menggunakan headless browser

Untuk integrasi ke dokumentasi teknis, simpan file HTML di folder docs/diagrams/ dan reference dari README atau Wiki. Jika menggunakan Docusaurus atau MkDocs, HTML bisa di-embed menggunakan iframe atau di-convert ke SVG standalone. Skill ini juga bisa membaca ulang diagram draw.io atau Mermaid yang sudah ada dan merender ulang dengan kualitas editorial yang lebih tinggi.

Tips Mendapatkan Hasil Maksimal

Berdasarkan pengalaman menggunakan skill ini, ada beberapa pola yang menghasilkan output terbaik. Pertama, selalu sebutkan tipe diagram yang diinginkan secara eksplisit. Kedua, berikan daftar komponen dalam format bullet yang terstruktur. Ketiga, tentukan style (minimal-light, minimal-dark, atau full-editorial) sejak awal. Keempat, untuk diagram kompleks, pecah menjadi beberapa diagram terpisah daripada memaksakan semuanya ke satu canvas.

Kelima, manfaatkan kemampuan skill untuk membaca brand identity otomatis agar diagram konsisten dengan asset visual lainnya. Keenam, selalu review output dan berikan feedback spesifik jika perlu revisi: "geser komponen Auth Service ke kanan", "tambahkan note untuk rate limit", atau "ubah warna database menjadi orange".

Kesimpulan

Vibe coding tidak berhenti pada penulisan kode: visualisasi teknis juga bisa dihasilkan dengan cara yang sama natural dan cepat. Skill diagram-design untuk Claude Code memungkinkan developer membuat diagram arsitektur, sequence, flowchart, dan berbagai visualisasi lainnya dalam hitungan menit, bukan jam. Hasilnya adalah diagram editorial-quality yang konsisten dengan brand identity, tanpa perlu membuka tool desain apa pun. Eksplorasi lebih lanjut di github.com/cathrynlavery/diagram-design dan tingkatkan dokumentasi teknismu ke level berikutnya.