🎯 Kenapa Diagram Bawaan Claude Selalu Terasa Generik

Setiap kali Claude diminta membuat diagram, hasil defaultnya hampir selalu sama: kotak-kotak dengan sudut membulat, warna abu-abu standar, dan layout yang terasa asing dari identitas visual mana pun. Diagram jenis ini cukup untuk kebutuhan internal, tapi ketika harus masuk ke laporan, presentasi, atau konten publik, hasilnya terasa kurang matang.

Opsi lain adalah membangun ulang diagram tersebut di Figma. Prosesnya bekerja, tapi memakan waktu, sering sampai 30 menit hanya untuk urusan warna dan penataan ulang elemen. Banyak orang akhirnya memilih melewati proses pembuatan diagram sama sekali karena dianggap terlalu memakan waktu.

Diagram Design hadir untuk menutup celah ini. Skill open source ini dibuat oleh Cathryn Lavery, pendiri BestSelf.co, dan sudah mencapai 22,7 ribu stars di GitHub dengan lisensi MIT (gratis, boleh dimodifikasi bebas). Klaim inti dari skill ini: 28 jenis diagram bergaya editorial, dihasilkan sebagai file HTML dan SVG mandiri, tanpa Figma dan tanpa tampilan generik ala Mermaid.

💡 Untuk Siapa Skill Ini Paling Berguna

Tiga kelompok yang paling terbantu oleh skill ini:

• Developer yang membutuhkan diagram arsitektur sistem untuk dokumentasi teknis, tanpa harus menggambar manual di tools desain.
• Content creator dan konsultan yang membutuhkan diagram untuk deck presentasi atau laporan, dengan kualitas visual yang layak ditampilkan ke klien.
• Pemilik brand atau website yang menginginkan setiap diagram konsisten dengan identitas visual yang sudah dibangun, bukan template generik yang terlihat asal tempel.

Diferensiator utama skill ini terletak pada satu fitur: kemampuan membaca website pengguna dan otomatis memetakan warna serta font brand ke seluruh diagram yang dihasilkan, dalam waktu sekitar 60 detik.

🛠️ Cara Install dan Menjalankan

Langkah 1 — Install skill

Tersedia dua metode instalasi resmi.

Metode A, clone dan symlink. Direkomendasikan bagi yang berencana menyesuaikan style guide dalam jangka panjang.

git clone [email protected]:cathrynlavery/diagram-design.git ~/code/diagram-design
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design

Setelah proses ini selesai, restart Claude Code. Skill akan terdaftar otomatis dengan nama diagram-design.

Metode B, install sebagai plugin. Lebih cepat, cocok untuk mencoba skill ini terlebih dahulu sebelum berkomitmen pada kustomisasi jangka panjang.

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design