Apa itu Pembuat Diagram Alur?

Seret dan lepas untuk membuat diagram alur dengan kotak keputusan, kotak proses, jajar genjang masukan/keluaran, bentuk dokumen, dan konektor. Ekspor diagram yang sudah jadi sebagai PNG, SVG, atau PDF.

Pilih dari kotak proses, belah ketupat keputusan, pil mulai/akhir, jajar genjang masukan/keluaran, dan bentuk dokumen. Semuanya langsung pas di tempatnya dan tetap tersambung saat simpul digeser. Klik dua kali sebuah simpul untuk mengganti nama, seret dari satu pegangan ke pegangan lain untuk menyambungkan dua bentuk, lalu ubah warna atau kosongkan kanvas dengan sekali klik. Setelah diagram selesai, ekspor SVG transparan untuk slide, PNG di tingkat zoom mana pun, atau PDF siap cetak.

Cara menggunakan

1. Langkah 1 — Seret node bentuk (proses, keputusan, mulai/selesai) dari toolbar ke kanvas.
2. Langkah 2 — Hubungkan node dengan menyeret dari satu pegangan ke pegangan lainnya. Klik dua kali untuk mengedit label.
3. Langkah 3 — Atur tata letak Anda, lalu ekspor diagram alur sebagai PNG, SVG, atau PDF untuk presentasi, cetak, atau dokumentasi.

Kapan menggunakan

• Mendokumentasikan alur permintaan backend lengkap dengan cabang sukses dan gagal sebelum mulai menulis kode.
• Memetakan jalur eskalasi tim dukungan pelanggan agar bisa dipahami karyawan baru di hari pertama.
• Menggambarkan algoritma dalam dokumen desain saat narasi sudah tidak cukup jelas.

Hasil

Seorang product manager memetakan alur onboarding pengguna: Mulai → Daftar → Email Terverifikasi? (keputusan) → Ya → Dashboard / Tidak → Kirim Ulang Email → kembali ke verifikasi.

FAQ

Apa beda kotak proses dan belah ketupat keputusan?

Persegi panjang mewakili aksi atau langkah (Kirim email, Perbarui data). Belah ketupat mewakili pertanyaan ya/tidak yang membagi alur menjadi dua jalur. Pil menandai awal dan akhir keseluruhan diagram. Mengikuti konvensi ini membuat flowchart tetap mudah dibaca.

Bagaimana cara menyambungkan dua bentuk?

Arahkan kursor ke simpul, pegangan kecil akan muncul di tepi. Klik dan tarik dari satu pegangan ke pegangan bentuk lain, lepaskan, lalu panah otomatis muncul. Titik tengah panah dapat digeser nanti untuk merutekannya menjauhi simpul lain.

Bisakah memberi label pada panah, bukan hanya kotaknya?

Bisa. Klik dua kali panah untuk membuka kolom teks di titik tengahnya. Berguna pada belah ketupat untuk memberi label "Ya" dan "Tidak" di dua jalur keluar, atau memberi catatan kondisi seperti status=200 atau "retry habis".

Kenapa lebih baik ekspor SVG daripada PNG?

SVG tetap tajam di tingkat zoom mana pun dan bisa diedit di Figma, Illustrator, atau Inkscape jika nanti perlu mengubah teks atau warna. PNG resolusinya tetap, tapi lebih konsisten saat ditempel ke Confluence, Notion, atau PowerPoint tanpa masalah impor.

Berapa banyak simpul yang sanggup ditangani kanvas tanpa lemot?

React Flow nyaman dipakai hingga beberapa ratus simpul. Lebih dari itu, geser dan zoom mulai berat di laptop kelas menengah ke bawah. Jika diagram tumbuh sebesar itu, pecah menjadi diagram tingkat tinggi yang menautkan ke detail tiap subsistem.

Alat terkait