Cara Menggunakan Excalidraw untuk Membuat Diagram Alur Onboarding Aplikasi Mobile

Membuat diagram alur onboarding aplikasi mobile yang jelas adalah kunci agar tim developer, desainer, dan product manager bisa bekerja dengan pemahaman yang sama. Excalidraw adalah tool diagram berbasis web yang ringan, gratis, dan sangat cocok untuk membuat wireframe atau flowchart tanpa perlu install software berat. Artikel ini akan memandu kamu membuat diagram alur onboarding dari nol menggunakan Excalidraw, lengkap dengan tips praktis yang bisa langsung diterapkan.

Kenapa Excalidraw Cocok untuk Diagram Onboarding

Excalidraw punya beberapa keunggulan yang membuatnya ideal untuk developer dan tim kecil. Pertama, tampilannya hand-drawn membuat diagram terasa lebih approachable dan tidak terlalu formal, cocok untuk brainstorming awal. Kedua, tidak ada learning curve yang curam—kamu bisa langsung drag-drop dan menggambar tanpa harus belajar simbol-simbol kompleks seperti di tool enterprise. Ketiga, file bisa diekspor ke PNG, SVG, atau JSON, jadi mudah dibagikan ke tim atau dimasukkan ke dokumentasi.

Yang paling penting, Excalidraw bisa diakses lewat browser tanpa registrasi. Buat pengguna Termux yang sering kerja di lingkungan terbatas, kamu bisa buka Excalidraw di browser Android sambil coding di Termux, tanpa perlu switch device.

Langkah Praktis Membuat Diagram Alur Onboarding

1. Buka Excalidraw dan Siapkan Canvas
   Akses excalidraw.com lewat browser. Kamu akan langsung masuk ke canvas kosong. Gunakan scroll atau pinch untuk zoom in/out. Kalau mau kerja lebih nyaman di Termux, buka lewat browser desktop mode agar toolbar lebih lengkap.
2. Tentukan Struktur Alur Onboarding
   Sebelum mulai menggambar, list dulu tahapan onboarding yang mau kamu buat. Contoh umum: Splash Screen → Welcome Screen → Login/Register → Permission Request → Tutorial Walkthrough → Home Screen. Tulis ini di notes dulu atau langsung di Excalidraw pakai text tool.
3. Buat Shape untuk Setiap Screen
   Pilih Rectangle tool dari toolbar kiri. Buat kotak untuk setiap screen. Usahakan ukurannya konsisten—kamu bisa copy-paste shape pertama agar semua kotak sama besar. Beri label jelas di tiap kotak, misalnya "Splash Screen", "Login Screen", dst. Gunakan font size yang cukup besar agar mudah dibaca saat di-zoom out.
4. Tambahkan Arrow untuk Menunjukkan Flow
   Pilih Arrow tool, lalu tarik dari satu shape ke shape berikutnya. Excalidraw otomatis akan snap arrow ke tepi shape. Untuk flow yang bercabang (misalnya user bisa skip tutorial atau tidak), buat dua arrow dari satu shape. Beri label di arrow untuk menjelaskan kondisi, contoh: "User tap Skip" atau "First time user".
5. Gunakan Warna untuk Membedakan Kategori
   Klik shape, lalu pilih warna dari toolbar atas. Misalnya, gunakan biru untuk screen wajib, hijau untuk screen opsional, dan merah untuk error state. Ini membantu tim langsung paham prioritas tanpa harus baca detail.
6. Tambahkan Catatan atau Decision Point
   Gunakan Diamond shape untuk decision point (misalnya "Sudah punya akun?"). Tambahkan text box kecil di samping flow untuk catatan teknis, seperti "Check token di local storage" atau "Hit API /verify-phone". Ini sangat membantu developer yang akan implement.
7. Export dan Simpan
   Klik menu hamburger di kiri atas, pilih "Export image" untuk PNG atau "Export to clipboard" kalau mau paste langsung ke Slack/Notion. Kalau mau edit lagi nanti, pilih "Save to..." dan simpan file .excalidraw. File ini bisa dibuka lagi kapan saja tanpa kehilangan layer atau history.

Kesalahan yang Sering Terjadi

• Terlalu Detail di Awal
  Banyak yang langsung bikin diagram dengan semua edge case dan error handling. Mulai dari happy path dulu, baru tambahkan skenario alternatif setelah struktur utama jelas. Diagram yang terlalu ramai malah bikin bingung.
• Tidak Konsisten dalam Penamaan
  Gunakan naming convention yang sama. Kalau pakai "Login Screen", jangan tiba-tiba ganti jadi "Halaman Masuk" di screen lain. Konsistensi ini penting agar developer tidak salah interpretasi saat coding.
• Lupa Tandai Decision Point
  Flow yang cuma garis lurus tanpa decision point biasanya tidak realistis. Hampir semua onboarding punya percabangan, misalnya user sudah login atau belum, permission granted atau ditolak. Tandai ini dengan jelas.
• Tidak Menyimpan File Asli
  Kalau cuma export PNG tanpa simpan file .excalidraw, kamu tidak bisa edit lagi nanti. Selalu simpan file asli, terutama kalau diagram ini akan jadi dokumentasi jangka panjang.
• Mengabaikan Mobile Viewport
  Kalau diagram ini untuk aplikasi mobile, pastikan kamu visualisasikan dalam konteks layar portrait. Jangan bikin flow yang terlalu horizontal karena tidak mencerminkan pengalaman user sebenarnya.

Tips Aman dan Etis

Saat membuat diagram onboarding, hindari menyertakan data sensitif seperti API key, token, atau credential asli. Gunakan placeholder seperti "YOUR_API_KEY" atau "example@email.com". Kalau diagram ini akan dibagikan ke publik atau dimasukkan ke repository, pastikan tidak ada informasi internal perusahaan yang bocor.

Untuk developer yang kerja dengan tim remote, gunakan fitur collaboration Excalidraw dengan hati-hati. Link collaboration bersifat publik, jadi siapa saja yang punya link bisa edit. Jangan share link ini di channel publik atau forum. Kalau perlu kolaborasi, gunakan fitur "Live collaboration" hanya dengan orang yang kamu percaya, atau export hasil akhir saja untuk dibagikan.

Jangan gunakan diagram ini untuk membuat dark pattern atau flow yang menipu user, seperti menyembunyikan tombol skip atau memaksa user memberikan permission yang tidak perlu. Onboarding yang baik adalah yang transparan dan menghormati pilihan user.

Workflow Praktis untuk Pengguna Termux

Kalau kamu sering kerja di Termux, workflow ini bisa membantu: buka Excalidraw di browser Android, buat diagram sambil referensi code di Termux. Setelah selesai, export diagram ke PNG, lalu upload ke GitHub atau hosting image gratis seperti Imgur. Kamu bisa embed link image ini di README.md repository kamu. Untuk sync file .excalidraw, simpan di folder Termux yang ter-sync dengan cloud storage seperti Syncthing atau rclone.

Alternatif lain, gunakan Excalidraw CLI (excalidraw-cli) yang bisa di-install via npm. Dengan ini, kamu bisa convert file .excalidraw ke PNG langsung dari terminal tanpa buka browser. Ini berguna kalau kamu mau automate proses dokumentasi.

Kesimpulan

Excalidraw adalah tool yang simpel tapi powerful untuk membuat diagram alur onboarding aplikasi mobile. Dengan pendekatan visual yang hand-drawn, diagram jadi lebih mudah dipahami dan tidak terasa kaku. Kunci sukses membuat diagram yang berguna adalah mulai dari struktur sederhana, konsisten dalam penamaan, dan selalu simpan file asli untuk keperluan revisi. Untuk developer yang kerja di lingkungan terbatas seperti Termux, Excalidraw tetap bisa diakses dan diintegrasikan ke workflow tanpa hambatan. Yang terpenting, gunakan diagram ini sebagai alat komunikasi tim, bukan sekadar formalitas dokumentasi.