{"id":2092,"date":"2026-07-02T08:12:16","date_gmt":"2026-07-02T08:12:16","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/mermaid-js-user-journey-syntax-guide\/"},"modified":"2026-07-02T08:12:16","modified_gmt":"2026-07-02T08:12:16","slug":"mermaid-js-user-journey-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/","title":{"rendered":"Panduan Sintaks Jalur Pengguna Mermaid.js"},"content":{"rendered":"<p>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.<\/p>\n<h2>Struktur Sintaks Dasar<\/h2>\n<p>Setiap jalur pengguna dimulai dengan <code>jalur<\/code> deklarasi, diikuti oleh judul dan bagian-bagian berurutan yang memecah pengalaman pengguna.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNrLyi8tykut5OUqySzJSVUITswtAFKhxalFCl4wqeLU5JLM\/DyF4JLE9FQFv8TcVF4uBYWQxOJsMMdKITg5vwhIOSaX5BcZ6kBoIwCMHh4w\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNrLSswpLeLlKsksyUlV8AJxFAJS89LTS\/MSFZzz80ryM3i5khLTMxPzFPwScxMVQhIzEgt4uRSgvNL0xGIrheDs\/CIrBcfskvwiQx0IbQQATHgddg==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">jalur\r\ntitle Jalur Pengguna Contoh\r\nbagian Nama Tahap\r\n  Nama Tugas: Skor: Aktor1, Aktor2<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNrLSswpLeLlKsksyUlV8AJxFAJS89LTS\/MSFZzz80ryM3i5khLTMxPzFPwScxMVQhIzEgt4uRSgvNL0xGIrheDs\/CIrBcfskvwiQx0IbQQATHgddg==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNrLyi8tykut5OUqySzJSVUITswtAFKhxalFCl4wqeLU5JLM\/DyF4JLE9FQFv8TcVF4uBYWQxOJsMMdKITg5vwhIOSaX5BcZ6kBoIwCMHh4w\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"UrcGTAj\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-896\" decoding=\"async\" fetchpriority=\"high\" height=\"540\" sizes=\"(max-width: 500px) 100vw, 500px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620b91114c.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620b91114c.png 500w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620b91114c-278x300.png 278w\" width=\"500\"\/><\/p>\n<h2>Referensi Sintaks<\/h2>\n<p>Tabel di bawah ini memecah elemen-elemen utama yang digunakan untuk membuat peta jalur pengguna dalam Mermaid.js.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Komponen<\/th>\n<th>Deskripsi<\/th>\n<th>Contoh Sintaks<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Deklarasi<\/strong><\/td>\n<td>Menginisialisasi renderer diagram jalur pengguna.<\/td>\n<td><code>jalur<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Judul<\/strong><\/td>\n<td>Menentukan judul utama atau tujuan pengguna di bagian atas peta.<\/td>\n<td><code>judul Alur Kerja Masuk<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Bagian<\/strong><\/td>\n<td>Mewakili tahap atau fase tingkat tinggi dari jalur pengguna.<\/td>\n<td><code>bagian Fase Penemuan<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Tugas<\/strong><\/td>\n<td>Tindakan spesifik yang diambil pengguna dalam suatu bagian.<\/td>\n<td><code>Telusuri dokumentasi<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Skor Kepuasan<\/strong><\/td>\n<td>Bilangan bulat dari 1 hingga 5 yang memetakan kegembiraan atau hambatan pengguna.<\/td>\n<td><code>: 4 :<\/code> <em>(4 dari 5)<\/em><\/td>\n<\/tr>\n<tr>\n<td><strong>Pemain<\/strong><\/td>\n<td>Daftar peran yang dipisahkan dengan koma yang terlibat dalam menyelesaikan tugas.<\/td>\n<td><code>Pengguna, Sistem<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Rancangan Dunia Nyata: Pengalaman Checkout E-Commerce<\/h2>\n<p>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).<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpVkMtOw0AMRfdI\/MP9gLLgtckOlYeEkKgosLccNzFNZiKP0yp\/z0yrULrx5ti+j584WpDp8sLVO8F76DQIVqNxS0nwOuMk7BoDVhbrkR2PmjjuxDIC1kJ5H5toUJe+wl2FryRW2DL2A5lgMGUNTYXbE\/tW2Wdw\/Kg9NZIq3M98lly2wts4Op7HEKQrhw91fVCCRzCZnyuakAsogJjjGDK9OdIF1lPKZ2XrKbgYUqvDkG2hFift0pm9nJUlJbBJrV6E6grX86sVTb0Ex0sW29P\/imLyq7nB8udDWHQnkD5LgGPYqPVUdg9pT54+jXiLIY9cRbbUaWn4L9wCb7HR5MrpF0AWka0=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptUMtqwzAQvBv8D\/sBufR18bGB9uLQQvoD43grbyStjSxR8veV3BI7tKDDoJ2dx04cznBQaF1FiY7p\/fqToe\/YSUZv6kS5rjoYWQbKPhUQxj7ZuiLaIwh1CFDT0GNTKMYkRZk9Q3tRY\/PCgGDQ0MMtoZUBkQx8FqBp0Wzoacv5NX5JquxoP\/DJjimW3Y+yNRTtH3eynF9G53+jpGwEm7Sh+3Wyo6PMkX1hHDAnW+R6jhBHU+ZIEA\/9Ezu3n3kmixAT2cC9xIbutrKviPyFy3JJXEq+a5UjR3YY1iMvZbg4kR31U4LHLMQ+h1iOsUZscYLdBKMJluNN1x21o8kLYr8BIrWhfQ==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">perjalanan\r\ntitle Perjalanan Pembelian Online\r\nbagian Penemuan Produk\r\n  Cari barang: 4: Pengguna\r\n  Bandingkan harga: 3: Pengguna\r\n  Lihat gambar produk: 5: Pengguna\r\nbagian Funnel Checkout\r\n  Tambahkan barang ke keranjang: 4: Pengguna\r\n  Buat akun: 2: Pengguna, Sistem\r\n  Masukkan detail pengiriman: 3: Pengguna\r\n  Proses kartu kredit: 1: Pengguna, Gateway Pembayaran\r\nbagian Setelah Pembelian\r\n  Terima konfirmasi email: 5: Sistem\r\n  Lacak pengiriman paket: 4: Pengguna, Logistik<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptUMtqwzAQvBv8D\/sBufR18bGB9uLQQvoD43grbyStjSxR8veV3BI7tKDDoJ2dx04cznBQaF1FiY7p\/fqToe\/YSUZv6kS5rjoYWQbKPhUQxj7ZuiLaIwh1CFDT0GNTKMYkRZk9Q3tRY\/PCgGDQ0MMtoZUBkQx8FqBp0Wzoacv5NX5JquxoP\/DJjimW3Y+yNRTtH3eynF9G53+jpGwEm7Sh+3Wyo6PMkX1hHDAnW+R6jhBHU+ZIEA\/9Ezu3n3kmixAT2cC9xIbutrKviPyFy3JJXEq+a5UjR3YY1iMvZbg4kR31U4LHLMQ+h1iOsUZscYLdBKMJluNN1x21o8kLYr8BIrWhfQ==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpVkMtOw0AMRfdI\/MP9gLLgtckOlYeEkKgosLccNzFNZiKP0yp\/z0yrULrx5ti+j584WpDp8sLVO8F76DQIVqNxS0nwOuMk7BoDVhbrkR2PmjjuxDIC1kJ5H5toUJe+wl2FryRW2DL2A5lgMGUNTYXbE\/tW2Wdw\/Kg9NZIq3M98lly2wts4Op7HEKQrhw91fVCCRzCZnyuakAsogJjjGDK9OdIF1lPKZ2XrKbgYUqvDkG2hFift0pm9nJUlJbBJrV6E6grX86sVTb0Ex0sW29P\/imLyq7nB8udDWHQnkD5LgGPYqPVUdg9pT54+jXiLIY9cRbbUaWn4L9wCb7HR5MrpF0AWka0=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"VasGPtu\"><a href=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620d4d8a08.png\"><img alt=\"\" class=\"alignnone wp-image-897 size-full\" decoding=\"async\" height=\"540\" sizes=\"(max-width: 2357px) 100vw, 2357px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620d4d8a08.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620d4d8a08.png 2357w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620d4d8a08-300x69.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620d4d8a08-1024x235.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620d4d8a08-768x176.png 768w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620d4d8a08-1536x352.png 1536w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620d4d8a08-2048x469.png 2048w\" width=\"2357\"\/><\/a><\/p>\n<hr\/>\n<p><em><strong>Kiat Sintaks:<\/strong>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).<\/em><\/p>\n<hr\/>\n<h2>Konsep Lanjutan: Perjalanan Multi-Pemain<\/h2>\n<p>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.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpVjbFOAzEQRPtI+Yf5gNAAadydAgUFBSQ\/4HOWY8HePXnXJ+7vcQQKohzNmzcf2qrQut04eyY8t+x8MyTXimObZ62Ox69Y5kzbjVFyVsGhmWuhP+IQrdfoeSzs8Kpt7DLn9EkecBeukws1mPEkvy1cESeSjt0HHFdzKrureDgXlsvmSRYy5yl611J6F04xY2xTwG3AAy2Udaa6w8uAUyd\/nl7JNC8ENmuEKGeIOr+tAfvw\/+MbOHxabA==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpdjk0KwjAQRveCd\/gOoBt\/NtmJ7kSo1AtM6ZCOaaaSTO5viqLoLgzvvS8PTncaSUmXCxMbGcdJbRpwKqGoJ8WljCbrhiNJZTryUo9nyiV\/mYZrwvs5ApwlSYRJYEOkXOuDw9b9QrfiKYeqvrjAIM\/qsHNoJRvHFQ59FP1szFLLo\/QSBF3xMA4q2WEzl9Vz7Gp9hRtXO+F6eAucSead90\/Q13fHSWA0FIe9+9t5Av76XE0=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">perjalanan\r\ntitle Contoh Dukungan Multi-Pemain\r\nbagian Kasus Dukungan Pelanggan\r\n  Kirim tiket masalah: 3: Pelanggan\r\n  Tugaskan tiket ke agen: 4: Sistem, Admin Dukungan\r\n  Selidiki bug teknis: 2: Pengembang, Tester QA\r\n  Selesaikan masalah dan beri tahu: 5: Admin Dukungan<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpdjk0KwjAQRveCd\/gOoBt\/NtmJ7kSo1AtM6ZCOaaaSTO5viqLoLgzvvS8PTncaSUmXCxMbGcdJbRpwKqGoJ8WljCbrhiNJZTryUo9nyiV\/mYZrwvs5ApwlSYRJYEOkXOuDw9b9QrfiKYeqvrjAIM\/qsHNoJRvHFQ59FP1szFLLo\/QSBF3xMA4q2WEzl9Vz7Gp9hRtXO+F6eAucSead90\/Q13fHSWA0FIe9+9t5Av76XE0=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpVjbFOAzEQRPtI+Yf5gNAAadydAgUFBSQ\/4HOWY8HePXnXJ+7vcQQKohzNmzcf2qrQut04eyY8t+x8MyTXimObZ62Ox69Y5kzbjVFyVsGhmWuhP+IQrdfoeSzs8Kpt7DLn9EkecBeukws1mPEkvy1cESeSjt0HHFdzKrureDgXlsvmSRYy5yl611J6F04xY2xTwG3AAy2Udaa6w8uAUyd\/nl7JNC8ENmuEKGeIOr+tAfvw\/+MbOHxabA==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"oTBwXgi\"><img alt=\"\" class=\"alignnone size-full wp-image-898\" decoding=\"async\" height=\"540\" sizes=\"(max-width: 1308px) 100vw, 1308px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620ebf38f5.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620ebf38f5.png 1308w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620ebf38f5-300x124.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620ebf38f5-1024x423.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620ebf38f5-768x317.png 768w\" width=\"1308\"\/><\/p>\n<h2>Kesalahan Umum Sintaks<\/h2>\n<p>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:<\/p>\n<ul>\n<li><strong>Aturan Dua Titik Ganda:<\/strong>Setiap baris tugas harus mengikuti struktur tepat dari<code>Deskripsi Tugas: Skor: Pemain<\/code>. Lupa menuliskan titik dua kedua sebelum daftar pemain adalah alasan paling umum mengapa diagram perjalanan gagal dimuat.<\/li>\n<li><strong>Keterbatasan Rentang Skor:<\/strong>Skor kepuasan harus berupa bilangan bulat antara 1 dan 5. Mengirim skor 0 atau angka lebih dari 5 akan merusak parameter tata letak.<\/li>\n<li><strong>Indentasi:<\/strong> 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.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":10,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2092","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mermaid User Journey Map | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Map user experience steps and satisfaction scores using Mermaid user journey charts in VPasCode, a diagram-as-code tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid User Journey Map | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Map user experience steps and satisfaction scores using Mermaid user journey charts in VPasCode, a diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620b91114c.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/\",\"name\":\"Mermaid User Journey Map | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4620b91114c.png\",\"datePublished\":\"2026-07-02T08:12:16+00:00\",\"description\":\"Map user experience steps and satisfaction scores using Mermaid user journey charts in VPasCode, a diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4620b91114c.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4620b91114c.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Panduan Sintaks Jalur Pengguna Mermaid.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mermaid User Journey Map | VPasCode Text to Diagram Guide","description":"Map user experience steps and satisfaction scores using Mermaid user journey charts in VPasCode, a diagram-as-code tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/","og_locale":"id_ID","og_type":"article","og_title":"Mermaid User Journey Map | VPasCode Text to Diagram Guide","og_description":"Map user experience steps and satisfaction scores using Mermaid user journey charts in VPasCode, a diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620b91114c.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Estimasi waktu membaca":"3 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/","name":"Mermaid User Journey Map | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620b91114c.png","datePublished":"2026-07-02T08:12:16+00:00","description":"Map user experience steps and satisfaction scores using Mermaid user journey charts in VPasCode, a diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620b91114c.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620b91114c.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/id\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/id\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Panduan Sintaks Jalur Pengguna Mermaid.js"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/id\/#website","url":"https:\/\/www.vpascode.com\/id\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/id\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs\/2092","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/media?parent=2092"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}