Cara Menggunakan Excalidraw untuk Membuat Diagram Arsitektur Software Sederhana

Sebagai developer, kita sering perlu menjelaskan arsitektur software ke tim, klien, atau bahkan ke diri sendiri saat debugging. Masalahnya, tools diagram profesional seperti Visio atau Lucidchart sering berbayar dan berat. Excalidraw hadir sebagai solusi gratis, ringan, dan bisa diakses langsung dari browser—bahkan dari Termux di Android. Artikel ini akan memandu kamu membuat diagram arsitektur software sederhana dengan Excalidraw, lengkap dengan tips praktis dari pengalaman lapangan.

Kenapa Excalidraw Cocok untuk Developer

Excalidraw punya keunggulan yang jarang dimiliki tools diagram lain: tampilannya seperti sketsa tangan yang membuat diagram terasa lebih approachable dan tidak kaku. Ini penting saat presentasi ke non-technical stakeholder yang sering overwhelmed dengan diagram teknis yang terlalu formal. Tools ini juga open source, tidak perlu install, dan file hasil export bisa langsung di-commit ke repository sebagai dokumentasi.

Yang lebih menarik, Excalidraw bisa dijalankan offline setelah pertama kali dibuka, dan file .excalidraw sebenarnya adalah JSON yang bisa di-version control dengan Git. Buat pengguna Termux, kamu bisa akses lewat browser Termux (seperti Firefox atau Chrome) tanpa perlu aplikasi khusus.

Langkah Praktis Membuat Diagram Arsitektur

1. Buka Excalidraw dan Pahami Interface
   Akses excalidraw.com dari browser. Interface-nya minimalis: toolbar di kiri untuk shapes, atas untuk actions, dan canvas di tengah. Tidak ada menu berlapis-lapis yang membingungkan. Shortcut keyboard juga intuitif: R untuk rectangle, D untuk diamond, A untuk arrow.
2. Tentukan Komponen Utama Sistem
   Sebelum mulai menggambar, list dulu komponen sistem kamu. Contoh untuk aplikasi web sederhana: Client (browser), Load Balancer, API Server, Database, Cache Layer. Gunakan rectangle untuk services, cylinder untuk database (pilih dari library), dan cloud shape untuk external services.
3. Buat Layer Pertama: Client dan Entry Point
   Mulai dari kiri canvas, buat rectangle untuk "Web Browser" atau "Mobile App". Tambahkan arrow ke kanan menuju "Load Balancer" atau "API Gateway". Beri label pada arrow dengan double-click, misalnya "HTTPS Request". Ini membantu menjelaskan protokol yang digunakan.
4. Tambahkan Backend Services
   Di tengah canvas, buat beberapa rectangle untuk backend services. Kalau ada microservices, kelompokkan dengan container (gunakan rectangle dengan warna background berbeda). Contoh: "Auth Service", "User Service", "Payment Service". Hubungkan dengan arrow dari Load Balancer.
5. Integrasikan Data Layer
   Di bagian kanan atau bawah, tambahkan database dan cache. Gunakan cylinder shape untuk database (PostgreSQL, MySQL) dan rectangle dengan icon untuk Redis/Memcached. Hubungkan services ke data layer dengan arrow berlabel "Read/Write" atau "Query".
6. Tambahkan External Dependencies
   Jangan lupa third-party services seperti payment gateway, email service, atau cloud storage. Letakkan di area terpisah (biasanya atas atau bawah) dan gunakan warna berbeda untuk membedakan dari infrastruktur internal. Ini penting untuk security review dan cost analysis.
7. Gunakan Warna dan Grouping
   Pilih elemen, lalu ubah background color dari toolbar. Gunakan konsisten: misalnya biru untuk frontend, hijau untuk backend, kuning untuk data layer, merah untuk external. Grouping bisa dilakukan dengan select multiple elements (Shift+Click) lalu Ctrl+G.
8. Export dan Simpan
   Excalidraw punya beberapa format export: PNG untuk dokumentasi, SVG untuk scalability, atau .excalidraw untuk edit nanti. Untuk dokumentasi di README.md, PNG dengan transparent background paling praktis. Klik menu hamburger > Export image > pilih format dan scale.

Kesalahan yang Sering Terjadi

• Terlalu Detail di Awal
  Diagram arsitektur bukan class diagram. Fokus pada komponen besar dan alur data utama, bukan setiap function atau method. Detail bisa ditambahkan di diagram terpisah kalau diperlukan.
• Arrow Tanpa Label
  Arrow yang tidak diberi keterangan membuat diagram ambigu. Minimal tulis protokol (HTTP, gRPC, WebSocket) atau jenis operasi (sync/async). Ini sangat membantu saat troubleshooting production issue.
• Tidak Konsisten dengan Konvensi
  Kalau sudah pakai cylinder untuk database, jangan tiba-tiba pakai rectangle untuk database lain. Konsistensi visual memudahkan pembacaan, terutama untuk diagram kompleks.
• Lupa Simpan Versi Editable
  Banyak developer hanya export PNG dan buang file .excalidraw. Padahal arsitektur sistem berubah terus. Simpan file .excalidraw di repository atau cloud storage untuk maintenance jangka panjang.
• Mengabaikan Flow Direction
  Standar industri: alur data dari kiri ke kanan atau atas ke bawah. Diagram yang flow-nya acak membuat pembaca bingung dan terkesan tidak profesional.

Tips Aman dan Etis

Saat membuat diagram arsitektur, hindari mencantumkan informasi sensitif seperti IP address internal, credentials, atau API keys—bahkan dalam contoh. Gunakan placeholder seperti "db.internal" atau "api.example.com". Kalau diagram untuk dokumentasi publik atau portfolio, pastikan tidak ada informasi yang bisa dieksploitasi untuk reconnaissance attack.

Untuk pengguna Termux, pastikan browser yang digunakan up-to-date untuk menghindari vulnerability. Excalidraw sendiri aman karena berjalan client-side dan tidak mengirim data ke server, tapi browser yang outdated bisa jadi attack vector.

Jangan gunakan diagram arsitektur orang lain tanpa izin, terutama dari dokumentasi internal perusahaan. Ini bisa melanggar NDA dan menimbulkan masalah legal. Kalau butuh referensi, gunakan contoh dari dokumentasi open source atau buat sendiri berdasarkan arsitektur umum.

Workflow Praktis untuk Tim

Dari pengalaman kerja dengan tim remote, workflow yang efektif adalah: buat draft diagram di Excalidraw, export ke PNG, upload ke issue tracker atau wiki, lalu share link .excalidraw file untuk kolaborasi. Excalidraw punya fitur collaboration real-time lewat shareable link, tapi untuk keamanan lebih baik gunakan self-hosted instance kalau membahas arsitektur production.

Untuk review arsitektur, print diagram atau tampilkan di screen sharing, lalu minta feedback spesifik: apakah ada bottleneck, single point of failure, atau security gap. Diagram yang baik memicu diskusi produktif, bukan hanya dokumentasi pasif.

Kesimpulan

Excalidraw adalah tools yang powerful tapi sederhana untuk membuat diagram arsitektur software. Dengan pendekatan sketsa tangan, diagram jadi lebih approachable tanpa mengorbankan profesionalisme. Kunci sukses menggunakan Excalidraw adalah konsistensi visual, labeling yang jelas, dan fokus pada komponen utama sistem. Untuk developer yang sering bekerja mobile atau di Termux, Excalidraw memberikan fleksibilitas tanpa kompromi kualitas. Mulai dengan diagram sederhana, iterasi berdasarkan feedback, dan jangan lupa simpan versi editable untuk maintenance jangka panjang.