Tips Menggunakan Excalidraw untuk Membuat Diagram Teknis yang Jelas

Excalidraw adalah tool diagram berbasis web yang sedang naik daun di kalangan developer dan technical writer. Berbeda dengan tool diagram tradisional yang kaku dan formal, Excalidraw menawarkan gaya hand-drawn yang lebih santai tapi tetap profesional. Yang menarik, tool ini bisa diakses langsung dari browser—bahkan di Termux—tanpa perlu instalasi rumit. Artikel ini akan membahas cara praktis menggunakan Excalidraw untuk membuat diagram teknis yang jelas, lengkap dengan tips dari pengalaman nyata mendesain arsitektur sistem dan dokumentasi API.

Mengapa Excalidraw Cocok untuk Diagram Teknis

Saat pertama kali mencoba Excalidraw, yang langsung terasa adalah kecepatannya. Tidak ada loading template berat, tidak ada menu berlapis-lapis. Anda langsung bisa drag-and-drop shape, menghubungkan dengan arrow, dan menambahkan teks. Gaya hand-drawn-nya justru membuat diagram terasa lebih approachable—cocok untuk presentasi internal, dokumentasi sprint, atau menjelaskan konsep ke junior developer yang baru bergabung.

Tool ini juga mendukung kolaborasi real-time dan export ke berbagai format (PNG, SVG, JSON). Bagi pengguna Termux yang sering bekerja mobile, Excalidraw bisa diakses via browser Chromium atau Firefox, dan file JSON-nya bisa disimpan di storage lokal untuk diedit ulang kapan saja.

Langkah Praktis Membuat Diagram Teknis di Excalidraw

1. Mulai dengan Struktur Utama: Jangan langsung menggambar detail. Tentukan dulu komponen utama sistem Anda—misalnya client, server, database, external API. Gunakan rectangle untuk service/komponen, dan ellipse untuk actor (user, admin). Beri jarak yang cukup antar elemen agar tidak sesak.
2. Gunakan Arrow dengan Konsisten: Excalidraw punya beberapa jenis arrow (solid, dashed, dotted). Tetapkan konvensi: misalnya solid arrow untuk request HTTP, dashed untuk response, dotted untuk proses async. Konsistensi ini penting agar pembaca tidak bingung.
3. Manfaatkan Library Bawaan: Klik ikon perpustakaan di toolbar kiri untuk mengakses shape siap pakai seperti ikon cloud, database, atau mobile device. Ini menghemat waktu dan membuat diagram lebih recognizable. Anda juga bisa membuat custom library untuk komponen yang sering dipakai di project Anda.
4. Tambahkan Label yang Deskriptif: Jangan hanya menulis "API" atau "DB". Tulis nama spesifik seperti "User Service API" atau "PostgreSQL - users table". Untuk arrow, tambahkan label method HTTP (GET, POST) atau nama event (onUserCreated). Detail ini membuat diagram self-explanatory.
5. Gunakan Warna dengan Bijak: Excalidraw memungkinkan Anda mengubah warna stroke dan background. Gunakan warna untuk grouping logis—misalnya biru untuk frontend components, hijau untuk backend services, merah untuk external dependencies. Hindari terlalu banyak warna agar tidak ramai.
6. Manfaatkan Grouping dan Locking: Setelah selesai menggambar satu bagian, select semua elemen terkait dan group (Ctrl+G). Ini memudahkan saat Anda perlu memindahkan atau resize bagian tertentu tanpa mengacaukan layout. Gunakan lock untuk elemen yang sudah final agar tidak ter-edit tidak sengaja.
7. Export dan Versioning: Simpan file dalam format JSON untuk editing di masa depan. Export ke PNG atau SVG untuk dokumentasi. Jika menggunakan Git, commit file JSON-nya—ukurannya kecil dan bisa di-diff. Ini sangat membantu saat melacak perubahan arsitektur dari waktu ke waktu.

Kesalahan yang Sering Terjadi

• Diagram Terlalu Padat: Kesalahan paling umum adalah mencoba memasukkan semua detail dalam satu diagram. Hasilnya sesak dan sulit dibaca. Solusinya: buat diagram berlapis. Diagram high-level untuk overview, diagram detail untuk masing-masing subsistem.
• Tidak Konsisten dengan Notasi: Menggunakan rectangle untuk service di satu bagian, lalu ellipse di bagian lain untuk hal yang sama. Ini membingungkan. Tetapkan legend atau konvensi di awal dan patuhi sepanjang diagram.
• Lupa Menambahkan Context: Diagram tanpa judul, tanggal, atau keterangan versi sulit dilacak. Tambahkan text box di pojok untuk metadata: judul diagram, tanggal pembuatan, nama pembuat, dan versi sistem yang digambarkan.
• Arrow yang Bersilangan Tanpa Jembatan: Saat arrow saling bersilangan, gunakan fitur "Send to back" atau atur routing arrow agar tidak overlap. Excalidraw tidak punya auto-routing, jadi Anda perlu manual adjust anchor points.
• Tidak Memanfaatkan Snap to Grid: Meskipun gaya hand-drawn terlihat casual, alignment tetap penting. Aktifkan snap to objects (magnet icon) agar elemen otomatis align saat Anda drag. Ini membuat diagram terlihat lebih rapi tanpa kehilangan karakter hand-drawn-nya.

Tips Aman dan Etis

Saat membuat diagram arsitektur sistem, hindari menyertakan informasi sensitif seperti IP address internal, credential, atau detail keamanan spesifik yang bisa dieksploitasi. Jika diagram perlu dibagikan ke pihak eksternal, review dulu dan redact informasi yang tidak perlu diketahui publik.

Untuk pengguna Termux, pastikan file JSON diagram disimpan di direktori yang aman dan tidak ter-commit ke public repository secara tidak sengaja. Gunakan .gitignore untuk file diagram yang berisi informasi internal. Jika perlu kolaborasi, gunakan fitur shareable link Excalidraw dengan mode view-only untuk mencegah edit tidak sah.

Saat menggambar flow yang melibatkan autentikasi atau otorisasi, fokus pada alur logis (user login → verify token → access resource) tanpa menjelaskan detail implementasi keamanan yang bisa disalahgunakan. Tujuan diagram adalah komunikasi, bukan dokumentasi teknis lengkap yang bisa jadi attack vector.

Workflow Praktis untuk Developer

Dari pengalaman menggunakan Excalidraw dalam beberapa project, workflow yang paling efektif adalah: mulai dengan whiteboarding session (bisa di Excalidraw langsung atau kertas), lalu digitalisasi ke Excalidraw untuk versi yang lebih clean. Simpan file JSON di folder docs/ di repository, dan export PNG untuk ditampilkan di README atau wiki.

Untuk pengguna Termux, Anda bisa setup workflow sederhana: edit diagram di browser, download JSON, lalu sync ke Git menggunakan termux-api atau script bash. Ini memungkinkan Anda update dokumentasi visual langsung dari mobile device saat brainstorming di luar kantor.

Satu tips tambahan: buat template diagram untuk use case yang sering muncul—misalnya REST API flow, microservices architecture, atau database schema. Simpan sebagai file JSON terpisah dan duplicate saat memulai diagram baru. Ini menghemat waktu setup dan menjaga konsistensi visual antar dokumentasi.

Kesimpulan

Excalidraw adalah tool yang powerful tapi tetap sederhana untuk membuat diagram teknis. Kuncinya adalah konsistensi notasi, layout yang tidak sesak, dan label yang deskriptif. Dengan gaya hand-drawn yang khas, diagram Anda akan terlihat lebih approachable tanpa kehilangan profesionalisme. Bagi developer yang sering bekerja mobile atau di environment terbatas seperti Termux, Excalidraw menawarkan fleksibilitas tanpa mengorbankan kualitas output. Mulai dengan diagram sederhana, iterasi berdasarkan feedback, dan jangan lupa versioning file JSON Anda untuk tracking perubahan arsitektur dari waktu ke waktu.