Diagram Design: Skill Claude Code yang Bikin Diagram Editorial dari Prompt Biasa

🎯 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 git@github.com: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

<callout icon="⚠️"> Pada Metode B, perubahan pada file style-guide.md berisiko hilang saat plugin menerima pembaruan, karena skill tersimpan di cache plugin. Bagi yang berencana mengubah token warna secara manual, gunakan Metode A. </callout>

Langkah 2 — Jalankan onboarding brand (opsional, tapi direkomendasikan)

Ketikkan perintah berikut, ganti URL dengan alamat website yang ingin dijadikan acuan warna:

onboard diagram-design ke https://situskamu.com

Proses ini berjalan otomatis melalui tahapan berikut:

1. Skill mengambil halaman utama dari website yang dituju.
2. Warna dominan dan font yang digunakan di website tersebut diekstrak.
3. Nilai yang terdeteksi dipetakan ke token semantik: paper (warna latar), ink (warna teks utama), muted (warna teks sekunder), dan accent (warna fokus, biasanya diambil dari warna CTA atau link).
4. Sebuah preview perubahan ditampilkan sebelum token ini diterapkan secara permanen.
5. Sistem otomatis memeriksa kontras warna sesuai standar WCAG AA. Jika ada warna yang gagal standar kontras pada ukuran teks kecil, skill akan mengusulkan penyesuaian beserta alasannya. Apabila tahap ini dilewati, skill tetap berjalan menggunakan palet default: kombinasi jet-black dan atomic-tangerine (aksen oranye hangat) di atas latar putih-krem.

Langkah 3 — Generate diagram pertama

Berikut tiga contoh perintah bahasa natural yang bisa langsung dipraktekkan, disusun dari yang paling sederhana:

1. Buatkan diagram flowchart alur konten: Ide → Script → Rekam → Edit → Post → Analisa
2. Buatkan quadrant untuk memetakan project Q2 berdasarkan impact vs effort
3. Buatkan architecture diagram: frontend, backend, database, Redis cache Claude akan otomatis memilih jenis diagram yang paling sesuai dengan permintaan, membangun struktur HTML dan SVG-nya, lalu menyimpan hasilnya sebagai file mandiri yang bisa langsung dibuka di browser tanpa proses build tambahan.

Langkah 4 — Export ke PNG atau SVG (opsional)

Diperlukan jika hasil diagram akan dipindahkan ke Figma atau slide presentasi.

/diagram-design:export path/ke/diagram.html

Bisa juga menggunakan perintah bahasa natural: Export diagram ini sebagai SVG dan PNG. Catatan: fitur export ke PNG membutuhkan instalasi satu kali di awal.

pip install playwright && playwright install chromium

📸 Contoh Nyata

Setiap diagram yang dihasilkan tersedia dalam tiga varian tampilan: minimal light, minimal dark, dan full-editorial (dengan tambahan kartu ringkasan). Ketiganya berupa file HTML tunggal yang bisa langsung dibuka di browser, tanpa proses build, tanpa file JavaScript eksternal, dan tanpa gambar dari luar. Repo ini baru saja bertambah jadi 28 jenis diagram (sebelumnya 27). Untuk menjelajahi semuanya sebelum memilih mana yang paling relevan dengan kebutuhan, ada dua opsi galeri:

• Galeri langsung (live): cathrynlavery.github.io/diagram-design
• Galeri lokal (path ini berlaku untuk hasil install Metode A di Langkah 1):

open ~/.claude/skills/diagram-design/assets/index.html

Keduanya punya tab untuk beralih antara tampilan light, dark, dan full-editorial. <callout icon="🖼️" color="gray_bg"> </callout>

✅ Checklist

• Install skill (pilih salah satu: Metode A atau Metode B)
• Restart Claude Code
• Jalankan onboarding ke website sendiri (opsional)
• Coba satu prompt diagram sederhana sebagai uji coba awal
• Coba satu prompt diagram yang relevan dengan kebutuhan kerja sehari-hari
• Export hasil ke PNG atau SVG jika diperlukan untuk keperluan lain

⚠️ Batasan yang Perlu Diketahui

Dokumentasi resmi skill ini secara terbuka mencantumkan kapan sebaiknya tidak digunakan:

• Bukan pilihan tepat untuk diagram unicode cepat di postingan atau output terminal.
• Bukan pengganti tabel untuk daftar sederhana atau perbandingan before-after.
• Tidak cocok untuk kebutuhan "diagram" yang isinya hanya satu kotak dengan satu label. Untuk kasus ini, cukup ditulis sebagai satu kalimat biasa. Prinsip yang disarankan sebelum memutuskan membuat diagram: tanyakan apakah pembaca akan mendapat pemahaman lebih banyak dari diagram ini dibanding dari paragraf yang ditulis dengan baik. Jika jawabannya tidak, diagram tidak diperlukan.

👇 Ingin Panduan Lengkap Ini Tersimpan?

Komen "SKILL" untuk mendapatkan panduan instalasi lengkap dan link download skill-nya langsung dari @kayadigital.ai.