Diagram alir algoritma dan proses online

Alat online untuk menyusun diagram alir algoritma dan proses bisnis. Diagram ada sekaligus sebagai gambar dan sebagai teks Mermaid: ketik satu baris dan blok muncul, geser blok dan teksnya berubah, dan penataan manual bertahan saat teks disunting. Tata letak dan panah yang memutari blok dibuat sendiri oleh editor.

Cara menyusun diagram

Mulai dari contoh atau dari teks

Empat templat: proses sederhana, percabangan, algoritma dengan perulangan, dan diagram dengan jalur. Baris seperti “A[Proses] --> B{Kondisi?}” membuat dua blok dan satu panah.

Sunting langsung di diagram

“Blok” menambah langkah, “Hubungkan” menarik panah, klik ganda mengubah label blok atau panah, dan blok bisa diseret dengan tetikus. Ctrl dan roda tetikus mengubah skala.

Ambil hasilnya

Di tab “Ekspor”: PNG, SVG, PDF satu lembar A4, gambar ke papan klip, teks untuk README, dan tautan yang membuka diagram secara utuh.

Susun diagram lewat teks, tetikus, atau deskripsi

Klik ganda — label · Tab — langkah berikutnya · tombol panah — geser · Ctrl+roda — skala

Diagram sebagai teks Mermaid

Sunting teksnya atau gambarnya langsung — keduanya hidup. Sintaks ini dipahami GitHub, Notion, dan Obsidian.

Contoh

Fitur

Teks dan gambar adalah satu dokumen

Di kiri diagram berupa gambar, di kanan proses yang sama berupa teks. Ketik satu baris dan blok muncul; geser blok, ganti bentuknya, atau ubah label panah, maka teksnya ikut berubah.

Geseran blok tidak hilang saat teks disunting

Geseran disimpan sebagai selisih dari posisi yang dihitung tata letak: tambahkan tiga baris, diagram tersusun ulang, dan blok Anda tetap di tempat yang sama relatif terhadap tetangganya. Pada editor yang menggambar dari teks, penyusunan ulang biasanya mengatur ulang penataan manual.

Diagram dari deskripsi dan dari kode program

Jelaskan proses dengan kata-kata atau tempel kode Python, C, C++, Java, JavaScript, atau Pascal — jaringan saraf mengembalikan teks diagram lengkap dengan kondisi, perulangan, serta masukan dan keluaran. Menyunting dengan kalimat tetap menjaga geseran Anda. Tersedia dengan Premium.

Panah memutari blok, bukan menembusnya

Garis berjalan mendatar dan tegak lalu membelok ke koridor kosong di antara baris. Umpan balik seperti “kembali ke langkah 2” dibawa lewat samping, bukan mencoret gambar.

Bentuk yang terbaca tanpa legenda

Mulai dan selesai, proses, keputusan, masukan-keluaran, persiapan, penyimpanan, subrutin, konektor — simbol yang lazim pada diagram alir algoritma.

PNG, SVG, PDF, dan gambar ke papan klip

SVG adalah vektor untuk tata letak, PDF satu lembar A4 untuk tugas kuliah dan SOP, PNG dan salinan gambar untuk Word, chat, atau presentasi. Ada tampilan hitam-putih untuk dicetak.

Yang bisa dilakukan

Menyusun diagram alir algoritma dengan kondisi dan perulangan
Menggambar diagram proses bisnis dengan jalur per divisi
Membuat diagram alir dari kode program atau dari deskripsi kata-kata
Mengubah teks Mermaid menjadi gambar dan sebaliknya
Menggeser blok sesuai tata letak Anda tanpa kehilangan penataan otomatis
Mengekspor diagram ke PDF satu lembar A4 atau ke vektor SVG
Mengirim diagram lewat tautan atau menyisipkannya ke README sebagai blok mermaid

Mengapa di sini

Editor diagram terbagi dua kubu. Sebagian membuat gambar dari teks — dan mengatur ulang penataan blok setiap kali menyusun ulang. Sebagian lagi membolehkan menggeser semuanya sampai piksel — tetapi tanpa sumber teks, sehingga diagram tidak bisa dibuat otomatis dan versinya tidak bisa dibandingkan. Di sini keduanya hidup bersamaan: teks tetap Mermaid biasa, sedangkan geseran manual menjadi lapisan tersendiri yang bertahan saat teks diketik ulang.

Pertanyaan tentang diagram alir

Saya menggeser blok, lalu menambah satu baris ke teks. Apakah geserannya hilang?

Tidak. Geseran tidak disimpan sebagai titik di kanvas, melainkan sebagai selisih dari posisi yang dihitung tata letak untuk blok itu. Diagram tersusun ulang seluruhnya mengikuti baris baru, dan blok Anda ikut berpindah sambil mempertahankan selisih yang Anda tetapkan. Tombol “Posisi otomatis” di sudut kanvas menghapus semua geseran sekaligus.

Kode apa yang bisa diubah menjadi diagram alir?

Python, C, C++, C#, Java, JavaScript, Pascal, dan bahasa serupa — hingga 4000 karakter sekali kirim. Kondisi digambar sebagai belah ketupat dengan label “ya” dan “tidak”, perulangan sebagai kondisi dengan jalur kembali, masukan dan keluaran sebagai jajar genjang, fungsi dari kode yang sama sebagai subrutin. Hasilnya datang sebagai teks diagram, jadi blok yang tidak perlu cukup dihapus satu baris.

Mengapa panah berjalan zig-zag, bukan lurus?

Garis lurus ke baris sebelah sering menembus blok lain yang tidak terkait. Di sini panah membelok ke koridor kosong di antara baris: satu sudut lebih panjang, tetapi tidak mencoret apa pun dan jelas ke mana ia tiba.

Bagaimana menggambar kembali ke langkah sebelumnya?

Tulis panah ke belakang: “D --> B” — atau tekan “Hubungkan” pada blok bawah, lalu pada blok atas. Editor akan mengenali perulangan, menata diagram dari atas ke bawah seperti biasa, dan membawa jalur baliknya lewat samping — sehingga terbaca sebagai kembali.

Apakah diagram bisa dibuka di editor lain?

Ya, teks diagram adalah Mermaid biasa. GitHub, GitLab, Notion, Obsidian, dan editor Mermaid menerimanya. “Untuk README” langsung menyalinnya sebagai blok ```mermaid yang digambar GitHub sebagai diagram di dalam deskripsi proyek.

Bagaimana menyisipkan diagram ke tugas kuliah atau SOP?

Bisa dengan “PDF · A4” — diagram diletakkan pada lembar dengan margin 15 mm pada resolusi sekitar 300 titik per inci, atau dengan “Salin gambar” lalu Ctrl+V langsung di Word. Untuk printer hitam-putih, pilih dulu “Hitam-putih untuk cetak”: isian berwarna pada printer seperti itu keluar sebagai bercak abu-abu di bawah teks.

Apa isi tautan diagram?

Teks diagram dan geseran blok Anda, dimampatkan ke dalam alamat halaman. Penerima membuka tautan dan melihat diagram yang sama dengan penataan yang sama, serta bisa menyuntingnya. Diagram miliknya sendiri tidak hilang — kembali dengan Ctrl+Z.

💡 Ingin kami tingkatkan alat ini untuk Anda?

Kami bisa — dan! Kirim pesan singkat dengan ide Anda. Jika ingin diskusi lebih detail, tinggalkan email dan kami akan menghubungi Anda. Bisa anonim.

Bagaimana Anda menilai alat ini?

Terima kasih atas penilaian Anda!

Ubah penilaian

Ingin meninggalkan komentar?

Ingin berbagi lebih? Tinggalkan komentar!

Terima kasih! Komentar Anda akan muncul setelah moderasi.

Siapa yang cocok menggunakan alat ini?

Dengan mengunggah konten, Anda menyatakan berhak mengungkapkan isinya kepada pihak ketiga dan berjanji tidak menyertakan data pribadi pihak ketiga. Lihat Ketentuan Penggunaan. Penyedia AI Tembrica adalah produk independen. Kami tidak berafiliasi, tidak didukung, dan tidak disponsori oleh pembuat model dan layanan yang disebutkan di sini; nama mereka dicantumkan hanya untuk menyatakan secara jujur mesin mana yang menjalankan sebuah alat.

Diterbitkan 11 Sep 2026 Diperbarui 16 Sep 2026 Penulis: Pendiri