![A 16:10 hero banner styled graphic featuring a clean, modern illustration. The background is subtle and uses glowing accents, circuit board traces, and digital symbols with blues, greens, and white colors. Vertical columns define main participants like \"Card Reader\", \"ATM Interface\", \"Bank Server\", and \"Cash Dispenser\" across the top. Arrows with numbered steps (1, 2, 3...) indicate the sequential flow of communication, beginning with a \"Customer\" actor on the left. Key sections highlight the main decision structures using \"alt [PIN Invalid] \/ [PIN Valid]\" and \"alt [Insufficient Funds] \/ [Account Approved]\", clearly detailing both successful and alternative paths of interaction. No product logos are included. At the very top center, the main title in clean fonts reads \"BUILDING A ROBUST ATM SEQUENCE DIAGRAM\" with a subtitle \"STEP-BY-STEP PLANTUML GUIDE\".](\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/08\/atm-sequence-diagram-plantuml-guide.jpg\")
<\/p>\n<\/p>\n
Merancang transaksi keuangan sistemik membutuhkan kejelasan mutlak. Baik Anda merancang mesin perbankan, mendokumentasikan alur kerja warisan, atau melatih tim teknik, sebuah diagram urutan PlantUML<\/strong> adalah salah satu cara paling efektif untuk memvisualisasikan interaksi yang diurutkan menurut waktu antar komponen sistem.<\/p>\n Dalam tutorial ini, saya akan membimbing Anda melalui proses berpikir saya secara tepat untuk membangun sebuah Diagram Urutan Penarikan Tunai ATM<\/strong> dari awal menggunakan PlantUML. Kami akan membahas pengaturan peserta, alur pesan, dan percabangan bersarang kondisional untuk penanganan kesalahan\u2014semuanya menggunakan VPasCode<\/a>, alat gratis kami alat diagram sebagai kode<\/strong> dan editor online editor PlantUML<\/strong>.<\/p>\n \u00a0<\/p>\n Saya selalu memulai diagram PlantUML saya dengan menetapkan konfigurasi global yang jelas. Saat memodelkan operasi keuangan seperti penarikan tunai ATM, melacak urutan eksekusi sangat penting bagi pengembang maupun auditor.<\/p>\n Untuk mencapai hal ini, saya mulai dengan Mengapa menggunakan Berikutnya, saya mengidentifikasi entitas-entitas yang berbeda yang berpartisipasi dalam transaksi ini. Saya ingin memisahkan aktor manusia dari komponen backend dan subsistem perangkat keras.<\/p>\n Alih-alih membiarkan PlantUML mendeklarasikan peserta secara implisit saat pesan digambar, saya mendefinisikannya secara eksplisit di bagian atas. Ini menjamin mereka muncul dalam urutan logis, kiri ke kanan, yang mencerminkan batas arsitektural mereka:<\/p>\n Alasan Desain:<\/strong><\/p>\n Dengan peserta yang telah dideklarasikan, saya mulai memetakan inisialisasi jalur utama: memasukkan kartu, membaca data, meminta PIN, dan menghubungi server bank pusat.<\/p>\n Perhatikan bagaimana pesan sinkron menggunakan panah padat ( Sistem dunia nyata bisa gagal, dan diagram urutan harus secara eksplisit menyampaikan kondisi kesalahan. Setelah ATM meminta verifikasi dari bank, dua hasil dapat terjadi: otorisasi gagal atau berhasil.<\/p>\n Untuk mewakili logika kondisional dalam PlantUML, saya menggunakan Teknik Utama yang Digunakan:<\/strong><\/p>\n Setelah otentikasi diverifikasi, pengguna meminta penarikan. Namun, bank harus memverifikasi saldo akun dan batas harian. Untuk mewakili validasi sekunder ini, saya menyisipkan blok kedua Jika dana tidak mencukupi, transaksi berakhir dengan aman. Jika disetujui, bank mengurangi saldo akun, memicu pemberi uang tunai, menampilkan uang tunai, mengeluarkan kartu, dan menawarkan struk cetak opsional.<\/p>\n Kiat Pro:<\/strong>Perhatikan pemanggilan internal PlantUML favorit Anda untuk mengedit atau merender grafik vektor:editor PlantUML gratis<\/strong> untuk mengedit atau merender grafik vektor:<\/p>\n![\"An](\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/08\/img_6a7497c0b9fd4.png\")
<\/p>\nLangkah 1: Menyiapkan Judul dan Penomoran Langkah Otomatis<\/h2>\n
@startuml<\/code> tag, menentukan judul yang deskriptif, dan mengaktifkan autonumber<\/code>fitur.<\/p>\n@startuml\r\ntitle Diagram Urutan Penarikan Tunai ATM\r\n\r\nautonumber<\/code><\/pre>\nautonumber<\/code>?<\/strong>Tanpa penomoran otomatis, para peninjau harus melacak secara manual garis urutan untuk memahami urutannya. Memaksa penomoran berurutan secara otomatis mengindeks setiap permintaan dan respons, membuat referensi silang selama tinjauan arsitektur menjadi benar-benar mudah.<\/p>\n<\/section>\nLangkah 2: Menentukan Aktor dan Peserta Sistem<\/h2>\n
aktor Pelanggan\r\npeserta \"Antarmuka ATM\" sebagai ATM\r\npeserta \"Pembaca Kartu\" sebagai Pembaca\r\npeserta \"Server Bank\" sebagai Bank\r\npeserta \"Pengeluar Uang Tunai\" sebagai Pengeluar<\/code><\/pre>\n\n
aktor Pelanggan<\/code>: Mewakili pengguna manusia yang memulai tindakan.<\/li>\npeserta ... sebagai Alias<\/code>: Memberikan alias pendek sepertiATM<\/code>, Pembaca<\/code>, dan Bank<\/code> membuat bagian lain dari skrip tetap bersih dan mudah dibaca tanpa mengulang string tampilan yang panjang.<\/li>\nPembaca<\/code> di antara Pelanggan<\/code> dan Antarmuka ATM<\/code>, saya secara akurat mencerminkan urutan fisik masuknya kartu sebelum interaksi antarmuka perangkat lunak.<\/li>\n<\/ul>\n<\/section>\nLangkah 3: Memodelkan Alur Otorisasi Awal<\/h2>\n
Pelanggan -> Pembaca: Masukkan Kartu ATM\r\nPembaca -> ATM: Baca Detail Kartu\r\nATM -> Pelanggan: Permintaan PIN\r\nPelanggan -> ATM: Masukkan PIN\r\nATM -> Bank: Verifikasi Kartu & PIN<\/code><\/pre>\n-><\/code>). Perangkat keras kartu memicu perangkat lunak ATM, yang meminta pengguna, menangkap input, dan meneruskan kredensial otentikasi secara aman ke Bank<\/code> server.<\/p>\n<\/section>\nLangkah 4: Menata Percabangan Otorisasi dengan blok
alt<\/code>Blok<\/h2>\nalt \/ else \/ end<\/code> blok:<\/p>\nalt PIN Salah\r\n Bank --> ATM: Otentikasi Gagal\r\n ATM -> Pelanggan: Tampilkan Pesan \"PIN Salah\"\r\n ATM -> Pembaca: Keluarkan Kartu\r\n Pembaca --> Pelanggan: Kembalikan Kartu\r\nelse PIN Benar\r\n Bank --> ATM: Otentikasi Berhasil\r\n ATM -> Pelanggan: Permintaan Pemilihan Transaksi & Jumlah\r\n Pelanggan -> ATM: Pilih \"Penarikan\" & Masukkan Jumlah\r\n ATM -> Bank: Permintaan Izin Penarikan (Jumlah)\r\n ...\r\nend<\/code><\/pre>\n\n
--><\/code>) menandakan pesan respons asinkron kembali ke komponen pemanggil.<\/li>\n[PIN Salah]<\/code> dan [PIN Benar]<\/code> langsung memberi tahu pengembang perangkat lunak bagaimana aliran pengecualian berakhir (misalnya, menampilkan pesan kesalahan, mengeluarkan kartu, dan mengembalikan perangkat keras).<\/li>\n<\/ul>\n<\/section>\nLangkah 5: Menyisipkan Logika untuk Otorisasi Akun dan Pemberian Uang Tunai<\/h2>\n
alt<\/code> blok di dalam PIN Benar<\/code> cabang.<\/p>\n alt Dana Tidak Cukup \/ Batas Harian Melebihi\r\n Bank --> ATM: Transaksi Ditolak\r\n ATM -> Pelanggan: Tampilkan Pesan Kesalahan\r\n ATM -> Pembaca: Keluarkan Kartu\r\n Pembaca --> Pelanggan: Kembalikan Kartu\r\n else Akun Disetujui\r\n Bank -> Bank: Kurangi Saldo Akun\r\n Bank --> ATM: Transaksi Disetujui\r\n\r\n ATM -> Pemberi Uang Tunai: Berikan Uang Tunai\r\n Pemberi Uang Tunai --> ATM: Uang Tunai Siap\r\n ATM -> Pelanggan: Tampilkan Uang Tunai\r\n Pelanggan -> ATM: Ambil Uang Tunai\r\n\r\n ATM -> Pembaca: Keluarkan Kartu\r\n Pembaca --> Pelanggan: Kembalikan Kartu\r\n ATM -> Pelanggan: Cetak Struk (Opsional)\r\n end<\/code><\/pre>\nBank -> Bank: Kurangi Saldo Akun<\/code>. Panah yang mengarah kembali pada dirinya sendiri di PlantUML sangat ideal untuk menyoroti pembaruan status backend internal yang tidak melibatkan pesan jaringan eksternal.<\/p>\n<\/section>\nSkrip PlantUML Lengkap<\/h2>\n
\n\nPlantuml<\/span>
\n
\n