Diagram Jalur Pengguna menggambarkan langkah-langkah yang diambil pengguna untuk mencapai tujuan tertentu dalam aplikasi Anda. Berbeda dengan bagan alir berfokus sistem atau diagram urutan, jalur pengguna berfokus pada tindakan manusia, tahapan alur kerja, dan pelacakan kepuasan pengguna dari waktu ke waktu.
Struktur Sintaks Dasar
Setiap jalur pengguna dimulai dengan jalur deklarasi, diikuti oleh judul dan bagian-bagian berurutan yang memecah pengalaman pengguna.
jalur
title Jalur Pengguna Contoh
bagian Nama Tahap
Nama Tugas: Skor: Aktor1, Aktor2
Referensi Sintaks
Tabel di bawah ini memecah elemen-elemen utama yang digunakan untuk membuat peta jalur pengguna dalam Mermaid.js.
| Komponen | Deskripsi | Contoh Sintaks |
|---|---|---|
| Deklarasi | Menginisialisasi renderer diagram jalur pengguna. | jalur |
| Judul | Menentukan judul utama atau tujuan pengguna di bagian atas peta. | judul Alur Kerja Masuk |
| Bagian | Mewakili tahap atau fase tingkat tinggi dari jalur pengguna. | bagian Fase Penemuan |
| Tugas | Tindakan spesifik yang diambil pengguna dalam suatu bagian. | Telusuri dokumentasi |
| Skor Kepuasan | Bilangan bulat dari 1 hingga 5 yang memetakan kegembiraan atau hambatan pengguna. | : 4 : (4 dari 5) |
| Pemain | Daftar peran yang dipisahkan dengan koma yang terlibat dalam menyelesaikan tugas. | Pengguna, Sistem |
Rancangan Dunia Nyata: Pengalaman Checkout E-Commerce
Rancangan ini menampilkan perjalanan pengguna secara lengkap yang melacak pengalaman pelanggan dalam membeli barang secara online, melacak titik-titik ketidaknyamanan emosional (skor rendah) dan momen kepuasan (skor tinggi).
perjalanan
title Perjalanan Pembelian Online
bagian Penemuan Produk
Cari barang: 4: Pengguna
Bandingkan harga: 3: Pengguna
Lihat gambar produk: 5: Pengguna
bagian Funnel Checkout
Tambahkan barang ke keranjang: 4: Pengguna
Buat akun: 2: Pengguna, Sistem
Masukkan detail pengiriman: 3: Pengguna
Proses kartu kredit: 1: Pengguna, Gateway Pembayaran
bagian Setelah Pembelian
Terima konfirmasi email: 5: Sistem
Lacak pengiriman paket: 4: Pengguna, Logistik
Kiat Sintaks:Skor kepuasan secara otomatis diberi warna oleh renderer. Skor 1 atau 2 menandai hambatan operasional (merah/oranye), skor 3 bersifat netral (kuning), dan skor 4 atau 5 mewakili interaksi yang lancar dan sukses (hijau).
Konsep Lanjutan: Perjalanan Multi-Pemain
Dalam alur kerja yang kompleks, tugas jarang diselesaikan oleh satu orang saja. Mermaid memungkinkan Anda menetapkan beberapa pemain untuk satu tugas dengan memisahkan nama mereka menggunakan koma. Ini membantu menunjukkan di mana interaksi pelanggan memerlukan dukungan backend atau otomatisasi dari sistem.
perjalanan
title Contoh Dukungan Multi-Pemain
bagian Kasus Dukungan Pelanggan
Kirim tiket masalah: 3: Pelanggan
Tugaskan tiket ke agen: 4: Sistem, Admin Dukungan
Selidiki bug teknis: 2: Pengembang, Tester QA
Selesaikan masalah dan beri tahu: 5: Admin Dukungan
Kesalahan Umum Sintaks
Saat menulis peta perjalanan pengguna, kesalahan format kecil dapat menyebabkan mesin rendering menghasilkan kesalahan. Ingat tiga aturan format ini untuk memastikan diagram Anda terbentuk dengan benar:
- Aturan Dua Titik Ganda:Setiap baris tugas harus mengikuti struktur tepat dari
Deskripsi Tugas: Skor: Pemain. Lupa menuliskan titik dua kedua sebelum daftar pemain adalah alasan paling umum mengapa diagram perjalanan gagal dimuat. - Keterbatasan Rentang Skor:Skor kepuasan harus berupa bilangan bulat antara 1 dan 5. Mengirim skor 0 atau angka lebih dari 5 akan merusak parameter tata letak.
- Indentasi: Meskipun Mermaid fleksibel terhadap spasi, menjaga tugas-tugas Anda diindentasi di bawah bagian-bagian yang sesuai membuat file teks mentah Anda jauh lebih mudah dibaca dan dipertahankan saat fitur produk Anda berkembang.