SIMULATOR DIAGRAM ALIR

Simulator Diagram Alir

Buat diagram alir dengan variabel, operasi, percabangan, dan loop, lalu jalankan sambil melihat perubahan nilai.

Berjalan di browser Simpan otomatis Impor dan ekspor JSON Tanpa menjalankan JavaScript sembarang Disarankan menggunakan PC

Disarankan menggunakan PC: penempatan, penghubungan, dan penyuntingan node lebih nyaman dengan mouse.

EDITOR

Diagram alir

100%

Tambahkan node untuk membuat alur

Delete: hapus pilihanCtrl+Z UndoCtrl+Y RedoCtrl+S: simpanKlik dua kali: pengaturan

Variabel dan info proses

Variabel

Nilai kembali ke nilai awal saat proses dimulai.

Keluaran

Hasil node tampilan

Belum ada keluaran.

Riwayat

Riwayat proses

Klik entri untuk memilih node.

Belum ada riwayat proses.

Pengaturan

Pilih node untuk mengedit pengaturannya.

Nama proyek Disimpan otomatis di localStorage perangkat ini

HOW TO USE

Buat, jalankan, dan amati perubahan nilai

Tambahkan node dari kiri dan hubungkan setiap port keluaran ke node berikutnya. Edit ekspresi operasi, kondisi, dan tampilan di Pengaturan sebelah kanan.

Mengapa diperlukan? Diagram saja tidak menunjukkan cabang yang dipilih, perubahan variabel, atau apakah loop berakhir. Jalankan alur untuk memastikan urutannya sesuai rencana.

Gunakan untuk Gunakan untuk merancang proses sebelum coding, menjelaskan alur di kelas, memeriksa percabangan dan loop, atau menemukan kesalahan sebelum implementasi.

Buka Variabel di kanan, lalu tambahkan variabel angka, teks, atau boolean
Hubungkan node dari Mulai hingga Selesai, lalu tambahkan cabang Yes / No pada setiap keputusan
Pilih “Langkah” untuk memeriksa node saat ini dan perubahan variabel
Simpan alur selesai sebagai JSON dan kelola beberapa versi melalui Buka

Ekspresi dievaluasi dengan bahasa ekspresi terbatas yang aman. JavaScript sembarang tidak dijalankan dan diagram alir atau variabel tidak dikirim ke luar browser.

GUIDE

Dasar diagram alir dan cara penggunaan

Diagram alir menggambarkan urutan operasi dan percabangan kondisi dengan bentuk dan koneksi. Alat ini dapat menjalankan alur yang Anda buat.

Apa itu diagram alir?

Diagram tugas atau program yang memakai bentuk dan koneksi dari atas ke bawah. Diagram ini membantu mengatur dan menjelaskan operasi dengan memperlihatkan urutan, cabang, dan loop.

Fungsi setiap bentuk

Terminal (mulai/selesai): Menandai awal dan akhir alur.
Pengaturan:Tambahkan terminal Mulai atau Selesai dari daftar di kiri. Jenisnya juga dapat diubah melalui Pengaturan di kanan.
Contoh:Mulai → Proses → Selesai
Proses: Mewakili operasi yang dijalankan, seperti menetapkan variabel atau melakukan perhitungan.
Pengaturan:Masukkan nama tampilan dan ekspresi operasi di Pengaturan sebelah kanan. Tulis satu penetapan pada setiap baris.
Contoh:Nama tampilan “Hitung naik”, ekspresi count = count + 1
Keputusan: Mengevaluasi kondisi dan bercabang ke dua arah: Yes dan No.
Pengaturan:Masukkan kondisi di Pengaturan sebelah kanan, lalu hubungkan keluaran Yes dan No.
Contoh:Kondisi score >= 70. Jika benar, ikuti Yes; jika salah, ikuti No.
Tampilan: Menambahkan hasil perhitungan atau pesan ke Keluaran di kanan.
Pengaturan:Masukkan nama tampilan dan ekspresi keluaran di Pengaturan sebelah kanan.
Contoh:Ekspresi keluaran "count=" + count
Awal loop: Selama kondisinya benar, alur masuk ke badan loop. Jika salah, alur berlanjut setelah loop.
Pengaturan:Masukkan kondisi di Pengaturan sebelah kanan dan pasangkan dengan akhir loop.
Contoh:Kondisi count < 5. Jika benar, masuk ke badan loop; jika salah, lanjut setelah loop.
Akhir loop: Di akhir badan loop, alur kembali ke awal loop yang sesuai. Jika kondisinya salah, alur berlanjut setelah loop.
Pengaturan:Pilih awal loop yang sesuai di Pengaturan sebelah kanan.
Contoh:Letakkan setelah operasi penambahan count; loop berulang selama count kurang dari 5.

Cara menggambar alur

Langkah umum

Seret bentuk dari daftar node di kiri ke kanvas tengah.
Atur bentuk sesuai urutan operasi dari Mulai hingga Selesai. Seret node untuk mengatur posisinya.
Klik node untuk membuka menu, lalu pilih Edit operasi untuk mengatur nama atau ekspresi.

Penempatan dan pengaturan setiap bentuk

Terminal (mulai/selesai)

Penempatan:Tempatkan satu Mulai di awal alur dan Selesai di bagian akhir.

Koneksi:Hubungkan satu OUT dari Mulai ke node berikutnya, dan hanya IN ke Selesai. Selesai tidak memiliki OUT.

Proses

Pengaturan:Pilih Edit operasi untuk memasukkan nama dan ekspresi. Gunakan satu penetapan per baris.

Koneksi:Hubungkan node sebelumnya ke IN dan satu OUT ke node berikutnya. Contoh:count = count + 1

Keputusan

Pengaturan:Masukkan kondisi yang hasilnya berupa true atau false .

Koneksi:Hubungkan keluaran Yes dan No di bagian bawah ke masing-masing satu node. Contoh:score >= 70

Tampilan

Pengaturan:Masukkan nama tampilan dan ekspresi keluaran. Saat dijalankan, hasil ditambahkan ke Keluaran.

Koneksi:Hubungkan node sebelumnya ke IN dan satu OUT ke node berikutnya. Contoh:"count=" + count

Awal loop

Pengaturan:Masukkan kondisi dan pasangkan dengan akhir loop yang memiliki warna dan nomor sama.

Koneksi:Hubungkan satu OUT ke awal badan loop. Jika kondisinya false, alur otomatis melewati loop.

Akhir loop

Pengaturan:Pilih awal loop yang sesuai di Pengaturan sebelah kanan, lalu tempatkan node ini di akhir badan loop.

Koneksi:Hubungkan satu OUT ke operasi setelah loop. Jangan buat garis langsung ke awal loop; alur akan kembali otomatis saat dijalankan.

Koneksi dan aturan

Pilih mode Hubungkan atau Mulai koneksi dari menu node.
Klik OUT di bawah node sumber, atau Yes / No pada node keputusan.
Klik IN di atas node tujuan untuk menyelesaikan koneksi.
OUT biasa hanya dapat memiliki satu koneksi. IN dapat menerima koneksi dari beberapa node.
Menghubungkan OUT yang sama ke node lain akan otomatis menggantikan koneksi sebelumnya.
Untuk menghapus konektor, pilih garisnya lalu tekan Delete.
Seret node agar konektor tidak saling menyilang.

Satu OUT saja

Proses A

Proses B

Satu koneksi saja yang dapat keluar dari OUT. Koneksi ke node lain akan menggantikan garis sebelumnya.

IN menerima beberapa koneksi

Proses A

Proses B

Proses C

Beberapa OUT dapat dihubungkan ke IN node yang sama untuk menggabungkan alur setelah percabangan.

Hubungkan Yes dan No secara terpisah hanya pada keputusan. Pasangkan awal dan akhir loop di Pengaturan; jangan hubungkan keduanya secara langsung.

Tentang panel di kanan

Keluaran: Menampilkan hasil node Tampilan yang dijalankan secara berurutan. Hasil node yang dilewati cabang tidak ditambahkan.
Catatan:Sebelum dijalankan, “Belum ada keluaran” ditampilkan. Panel Keluaran terbuka otomatis selama proses.
Variabel: Daftarkan nama, jenis, dan nilai awal variabel. Nilai saat ini terlihat selama proses.
Riwayat: Tinjau node yang dilewati, pemeriksaan kondisi, dan perubahan variabel langkah demi langkah.
Pengaturan: Edit nama tampilan, operasi, kondisi, atau ekspresi keluaran pada node yang dipilih.

Cara memeriksa keluaran

Masukkan ekspresi keluaran di pengaturan node Tampilan. Contoh:"count=" + count
Gunakan Langkah atau Jalankan untuk maju ke node Tampilan.
Saat node Tampilan dijalankan, hasil evaluasinya ditambahkan ke Keluaran.
Jika node Tampilan dijalankan beberapa kali dalam loop, setiap hasil ditambahkan secara berurutan.
Untuk memeriksa keluaran dari awal, pilih Hapus dalam mode edit sebelum menjalankan.

Contoh:Variabel count bernilai 1 , ekspresi keluarannya "count=" + count menghasilkan count=1 .

Penyuntingan dinonaktifkan saat proses berjalan; panel kanan menampilkan nilai variabel dan keluaran. Pilih Akhiri proses untuk kembali mengedit.

Cara menjalankan

LangkahMenjalankan satu node saat ini.

JalankanMenjalankan otomatis dengan kecepatan yang dipilih.

JedaMenjeda proses berkelanjutan.

Akhiri prosesMengakhiri mode proses dan kembali mengedit.

Kecepatan: NormalPilih kecepatan proses berkelanjutan.

Seret bentuk dari daftar node di kiri ke kanvas tengah.
Seret node pada kanvas untuk mengatur posisinya.
Klik node untuk membuka menu, lalu pilih Edit operasi untuk mengubah isinya.
Klik konektor untuk memilihnya, lalu tekan Delete untuk menghapus.
Langkah menjalankan satu node setiap kali; Jalankan memproses otomatis. Pilih Akhiri proses untuk menghentikan.
Proyek disimpan di perangkat ini dan dapat dicadangkan sebagai JSON.

Operator aritmetika dan contoh

Jenis	Simbol	Contoh	Arti
Penjumlahan	`+`	`score + 10`	Tambahkan 10 ke score
Pengurangan	`-`	`count - 1`	Kurangi 1 dari count
Perkalian	`*`	`price * quantity`	Kalikan price dengan quantity
Pembagian	`/`	`total / 2`	Bagi total dengan 2
Sisa	`%`	`count % 2 == 0`	Periksa apakah genap

Operator perbandingan dan logika

Jenis	Simbol	Contoh	Arti
Sama dengan	`==`	`score == 70`	score sama dengan 70
Tidak sama	`!=`	`score != 0`	score bukan 0
Lebih besar dari	`>`	`score > 70`	score lebih besar dari 70
Lebih besar atau sama dengan	`>=`	`score >= 70`	score minimal 70
Kurang dari	`<`	`count < 5`	count kurang dari 5
Kurang dari atau sama dengan	`<=`	`count <= 5`	count maksimal 5
DAN	`&&`	`score >= 70 && count < 5`	Kedua kondisi benar
atau	`\|\|`	`score < 0 \|\| score > 100`	Salah satu kondisi benar
NOT	`!`	`!isFinished`	Membalik nilai boolean

= menetapkan nilai dalam operasi, sedangkan== membandingkan nilai dalam kondisi.!isFinished Saat menggunakan isFinished daftarkan sebagai variabel boolean. Kelompokkan kondisi kompleks dengan tanda kurung, seperti (score + bonus) >= 70 .

Mengatasi kesalahan proses

Pesan kesalahan Alasan alur tidak dapat dijalankan muncul di bawah kontrol. Node bermasalah juga ditandai di kanvas; perbaiki setiap masalah yang ditampilkan.

Untuk kesalahan struktur, periksa nama node dan koneksinya pada pesan.
Klik node, pilih Edit operasi, lalu perbaiki ekspresi operasi, kondisi, atau keluaran.
Jika koneksi kurang, hubungkan port keluaran ke port masukan tujuan.
Jika terjadi kesalahan, pilih Akhiri proses, perbaiki, lalu periksa kembali dengan Langkah.

Periksa koneksi dan struktur

Gunakan satu node Mulai dan hubungkan alur hingga Selesai.
Setiap node selain keputusan dan Selesai harus memiliki satu koneksi berikutnya.
Hubungkan satu cabang Yes dan satu No ke setiap keputusan.
Pasangkan awal dan akhir loop dengan nomor yang sama.

Periksa ekspresi dan nilai

Gunakan satu penetapan per baris dan daftarkan variabel sebelum digunakan.
Jangan mencampur jenis angka, teks, dan boolean.
Hasil kondisi keputusan dan loop harus berupa true atau false .
Periksa pembagian dengan nol serta tanda kurung atau teks yang belum ditutup.