State Machine Diagram: Pengertian, Simbol dan Contohnya

Pernah memesan barang di toko online? Coba perhatikan status pesanannya. Pertama tertulis dibuat, lalu berubah menjadi dikemas, kemudian dikirim, dan akhirnya diterima. Kalau kamu berubah pikiran di tengah jalan, statusnya bisa menjadi dibatalkan. Satu objek pesanan yang sama bisa berada dalam banyak keadaan berbeda sepanjang hidupnya, dan perpindahan dari satu keadaan ke keadaan lain selalu mengikuti aturan tertentu.

Dalam rekayasa perangkat lunak, alur perubahan keadaan seperti ini digambarkan dengan state machine diagram. Diagram ini termasuk dalam keluarga UML (Unified Modeling Language) dan dipakai untuk memodelkan behavior atau perilaku sebuah kelas, tepatnya runtutan kejadian yang dilewati sebuah objek saat berpindah dari satu state ke state lain.

Pengertian State Machine Diagram

State machine diagram adalah diagram yang menggambarkan perubahan atau transisi keadaan dari satu status ke status lain pada sebuah objek. Fokusnya bukan pada alur kerja langkah demi langkah, melainkan pada keadaan yang mungkin dialami objek dan kejadian yang memicu perpindahan antar keadaan tersebut.

Contoh sederhananya adalah pintu. Sebuah pintu hanya punya tiga keadaan yang masuk akal: terbuka (opened), tertutup (closed), dan terkunci (locked). Pintu yang terkunci tidak bisa langsung menjadi terbuka; ia harus melewati keadaan tertutup dulu. Aturan main seperti inilah yang ditangkap oleh state machine diagram.

Konsep Dasar: State, Event, Guard, dan Action

Sebelum membaca diagramnya, kenali dulu empat istilah kuncinya:

• State: keadaan atau kondisi stabil sebuah objek pada satu waktu, misalnya Dibuat atau Dikirim.
• Event (trigger): kejadian yang memicu perpindahan state, misalnya bayar() atau batalkan().
• Guard: syarat yang harus bernilai benar agar transisi boleh terjadi, ditulis dalam kurung siku, misalnya [total > 0].
• Action: aksi yang dijalankan tepat saat transisi terjadi, ditulis setelah garis miring, misalnya / kirimStruk().

Selain itu ada aktivitas yang terjadi di dalam sebuah state. Pada kotak state, bagian bawah bisa memuat tiga jenis aktivitas: entry yang dijalankan setiap kali objek masuk ke state tersebut, do yang berjalan selama objek berada di state itu, dan exit yang dijalankan setiap kali objek keluar dari state tersebut.

Simbol-Simbol State Machine Diagram

Berikut simbol yang paling sering dipakai, lengkap dengan artinya:

• State: persegi panjang bersudut bulat (rounded rectangle). Nama state ditulis di bagian atas, dan di bawah garis pemisah boleh ditulis aktivitas entry, do, dan exit.
• Initial state: lingkaran hitam penuh. Menandai titik awal, yaitu state pertama yang dimasuki objek.
• Final state: lingkaran dengan titik hitam di tengahnya (seperti mata banteng). Menandai titik akhir; setelah mencapai state ini tidak ada lagi transisi yang mungkin terjadi.
• History state: lingkaran berisi huruf H. Dipakai di dalam composite state untuk mengingat sub-state terakhir yang aktif sebelum keluar, sehingga saat masuk kembali objek melanjutkan dari posisi terakhir.
• Choice: belah ketupat. Titik percabangan tempat satu transisi masuk bercabang menjadi beberapa transisi keluar, masing-masing dijaga oleh guard yang berbeda.
• Self transition: panah melengkung yang berangkat dan kembali ke state yang sama. Artinya ada event yang ditangani tanpa berpindah state.

Membaca Label Transisi

Transisi digambarkan sebagai panah dari state asal ke state tujuan. Label pada panah mengikuti format baku:

trigger [guard] / action

Contohnya label bayar [total > 0] / kirimStruk() dibaca: transisi terjadi ketika event bayar dipicu, hanya jika syarat total > 0 terpenuhi, dan saat transisi berlangsung sistem menjalankan aksi kirimStruk(). Guard dan action sifatnya opsional; kalau tidak ada syarat khusus, cukup tulis triggernya saja seperti batalkan().

Contoh: State Diagram Pesanan

Mari terapkan semuanya pada contoh yang konkret, yaitu siklus hidup sebuah pesanan di toko online:

1. Pesanan mulai dari initial state lalu masuk ke state Dibuat.
2. Dari Dibuat, event pesan() memindahkannya ke Dikemas. Tapi kalau pelanggan berubah pikiran, event batalkan() memindahkannya ke Dibatalkan.
3. Dari Dikemas, event kemas() memindahkannya ke Dikirim.
4. Dari Dikirim, event kirim() memindahkannya ke Diterima, lalu event terima() membawanya ke final state.
5. Dari Dibatalkan, event tutup() juga membawanya ke final state.

Perhatikan bahwa tidak ada panah dari Dikirim kembali ke Dibuat. Diagram ini dengan tegas menyatakan aturan bisnisnya: pesanan yang sudah dikirim tidak bisa kembali menjadi pesanan baru. Aturan yang implisit di kepala programmer menjadi eksplisit di atas kertas, dan inilah nilai utama state machine diagram.

Menggambar State Diagram dengan Mermaid

Zaman dulu diagram UML digambar dengan aplikasi desktop yang berat. Sekarang ada cara yang jauh lebih ringan: Mermaid. Kamu cukup menulis teks, dan Mermaid mengubahnya menjadi diagram. Sintaksnya untuk state diagram diawali stateDiagram-v2, dengan [*] untuk initial dan final state:

stateDiagram-v2
    [*] --> Dibuat
    Dibuat --> Dikemas : pesan()
    Dibuat --> Dibatalkan : batalkan()
    Dikemas --> Dikirim : kemas()
    Dikirim --> Diterima : kirim()
    Diterima --> [*] : terima()
    Dibatalkan --> [*] : tutup()

Tempel kode di atas ke mermaid.live dan diagramnya langsung jadi. Alternatif lain yang sejenis adalah PlantUML, yang juga memakai pendekatan teks ke diagram dan populer di dokumentasi teknis. Keduanya gratis dan hasilnya bisa diekspor sebagai gambar untuk ditempel di dokumentasi proyekmu.

Penutup

State machine diagram adalah alat untuk memodelkan perilaku objek lewat state dan transisi antar-state. Kuncinya ada empat: kenali state-nya, pahami event pemicunya, perhatikan guard sebagai syarat, dan catat action yang menyertai transisi. Kalau kamu sedang membangun fitur dengan status yang berubah-ubah seperti pesanan, tiket, atau pengajuan cuti, luangkan waktu menggambar diagram ini dulu sebelum ngoding. Percayalah, ia akan menyelamatkanmu dari banyak bug status yang nyasar di kemudian hari.