{"id":2083,"date":"2026-07-08T05:45:59","date_gmt":"2026-07-08T05:45:59","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/mermaid-js-event-modeling-syntax-swimlane-guide\/"},"modified":"2026-07-08T05:45:59","modified_gmt":"2026-07-08T05:45:59","slug":"mermaid-js-event-modeling-syntax-swimlane-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/","title":{"rendered":"Sintaksi dan Panduan Swimlane Modeling Acara Mermaid.js"},"content":{"rendered":"<p>Modeling Acara (EM) adalah metodologi strategis yang digunakan untuk merancang dan menggambarkan sistem informasi dengan memetakan bagaimana data berpindah, diterjemahkan, dan berubah sepanjang timeline linier. Dengan sengaja menghilangkan mekanisme sistem sementara, diagram Modeling Acara berfokus secara ketat pada aliran informasi yang tepat dan apa yang secara eksplisit dilihat pengguna pada setiap momen tertentu. Mesin <code>modelingacara<\/code> otomatis mengkategorikan definisi tata letak Anda ke dalam tiga jalur visual terpisah: <strong>Antarmuka Pengguna\/Automasi<\/strong>, <strong>Perintah\/Model Baca<\/strong>, dan <strong>Acara<\/strong>.<\/p>\n<h2>Memahami Jalur Sistem<\/h2>\n<p>Ketika Anda menentukan elemen pada timeline Anda, Mermaid menugaskannya ke jalur horizontal tertentu yang sepenuhnya didasarkan pada jenis entitas yang mendasarinya:<\/p>\n<ul>\n<li><strong>Jalur Antarmuka Pengguna\/Automasi:<\/strong> Menyimpan antarmuka pengguna (<code>ui<\/code>) dan prosesor latar belakang backend (<code>pcr<\/code> \/ <code>prosesor<\/code>). Melambangkan bagaimana tindakan dipicu atau divisualisasikan.<\/li>\n<li><strong>Jalur Perintah\/Model Baca:<\/strong> Menyimpan perintah (<code>cmd<\/code> \/ <code>perintah<\/code>) yang bertujuan mengubah status sistem, atau model baca (<code>rmo<\/code> \/ <code>modelbaca<\/code>) yang menyimpan data kueri terstruktur.<\/li>\n<li><strong>Lajur Acara:<\/strong> Menyimpan acara domain historis (<code>evt<\/code> \/ <code>acara<\/code>). Jalur ini menangkap sumber kebenaran mutlak mengenai apa yang telah terjadi di masa lalu.<\/li>\n<\/ul>\n<h2>Struktur Sintaks Dasar (Ringkas vs. Longgar)<\/h2>\n<p>Setiap diagram dimulai dengan <code>eventmodeling<\/code> deklarasi. Anda dapat membuat peta timeline Anda menggunakan either <strong>sintaks ringkas<\/strong> (menggunakan token struktural pendek seperti <code>tf<\/code>, <code>ui<\/code>, <code>cmd<\/code>, <code>evt<\/code>) atau sintaks deskriptif <strong>sintaks longgar<\/strong> (menggunakan <code>waktu<\/code>, <code>perintah<\/code>, <code>baca model<\/code>). Kedua gaya ini dapat digabungkan secara saling bertukar.<\/p>\n<h3>1. Rancangan Sintaks Ringkas<\/h3>\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:eNpLLUvNK8nNT0nNycxL5+UqSVMwMFQozVTwyU\/PzAtOLkpNzYOIGikk56YoBJcm5WaWOBelpgC1ZSbmFEMkjRVSy0oUQotTixxLSzJAUsmJJakpAMvQIAk=\" 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>Sunting 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:eNolycsJgDAQBcC7YA9bgp8KxKu3YAExeepCfiQbbV8k15kEHy2cDpSQuQi\/uu\/kpGGkyrTFi4MyGQhNJzLekqqHZ1kzLIKwdqXlTHiE9oK8VLn\/MlpgP6SVIkU=\" \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\">pemodelan peristiwa\r\ntf 01 ui LoginScreen\r\ntf 02 cmd SubmitCredentials\r\ntf 03 evt UserAuthenticated<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNolycsJgDAQBcC7YA9bgp8KxKu3YAExeepCfiQbbV8k15kEHy2cDpSQuQi\/uu\/kpGGkyrTFi4MyGQhNJzLekqqHZ1kzLIKwdqXlTHiE9oK8VLn\/MlpgP6SVIkU=\" \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:eNpLLUvNK8nNT0nNycxL5+UqSVMwMFQozVTwyU\/PzAtOLkpNzYOIGikk56YoBJcm5WaWOBelpgC1ZSbmFEMkjRVSy0oUQotTixxLSzJAUsmJJakpAMvQIAk=\" 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>Sunting Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"QtcNbEM\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-944\" decoding=\"async\" fetchpriority=\"high\" height=\"470\" sizes=\"(max-width: 871px) 100vw, 871px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892.png 871w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892-300x162.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892-768x414.png 768w\" width=\"871\"\/><\/p>\n<h3>2. Rancangan Sintaks Longgar<\/h3>\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:eNpVjbsNgDAMBXskdvAIfCZAtHQRA4TkAZZiRwoO8wMl9Z3ucENNckRiPdrGWLAXL6Cup8q05IPVhQLoDw4UsojXSK5uwjYXxDfEPl0\/byR8A1ovlKna+TnBG+IDHMkrJw==\" 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>Sunting 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:eNpVyjEOwjAMRuG9EnfwEaA9AWJlqziAm\/yApdipHKdcv2Xs+t63QmtGYaMVLi3kx5chRPF2VtD1Rl3oWT9ic3LATnOkVFXZMs19UYmHI8NCuLSTmwjb0enV4Pce379JHMg7MeItYw==\" \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\">pemodelan peristiwa\r\ntimeframe 01 ui LoginScreen\r\ntimeframe 02 command SubmitCredentials\r\ntimeframe 03 event UserAuthenticated<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpVyjEOwjAMRuG9EnfwEaA9AWJlqziAm\/yApdipHKdcv2Xs+t63QmtGYaMVLi3kx5chRPF2VtD1Rl3oWT9ic3LATnOkVFXZMs19UYmHI8NCuLSTmwjb0enV4Pce379JHMg7MeItYw==\" \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:eNpVjbsNgDAMBXskdvAIfCZAtHQRA4TkAZZiRwoO8wMl9Z3ucENNckRiPdrGWLAXL6Cup8q05IPVhQLoDw4UsojXSK5uwjYXxDfEPl0\/byR8A1ovlKna+TnBG+IDHMkrJw==\" 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>Sunting Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"MtnYXzX\"><img alt=\"\" class=\"alignnone size-full wp-image-945\" decoding=\"async\" height=\"470\" sizes=\"(max-width: 871px) 100vw, 871px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de45a5138f.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de45a5138f.png 871w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de45a5138f-300x162.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de45a5138f-768x414.png 768w\" width=\"871\"\/><\/p>\n<hr\/>\n<h2>Referensi Sintaks<\/h2>\n<p>Tabel di bawah ini menjelaskan komponen data utama, kata kunci format, dan token pintasan yang digunakan untuk membuat kerangka Pemodelan Peristiwa di dalam interpreter runtime Mermaid.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Token Ringkas<\/th>\n<th>Kata Kunci Longgar<\/th>\n<th>Penugasan Swimlane<\/th>\n<th>Deskripsi &amp; Aturan<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>tf<\/code><\/td>\n<td><code>timeframe<\/code><\/td>\n<td>T\/S (Header Grid)<\/td>\n<td>Mendeklarasikan slot kerangka kolom urutan waktu. Harus diikuti oleh nomor urutan unik (contoh, <code>01<\/code>).<\/td>\n<\/tr>\n<tr>\n<td><code>rf<\/code><\/td>\n<td><code>resetframe<\/code><\/td>\n<td>T\/S (Header Grid)<\/td>\n<td>Mengembalikan indeks posisi kolom atau membuat garis aliran otomatis di luar jalur.<\/td>\n<\/tr>\n<tr>\n<td><code>ui<\/code><\/td>\n<td><code>ui<\/code><\/td>\n<td>UI\/Otomasi<\/td>\n<td>Memetakan panel atau halaman antarmuka grafis yang dilihat atau diinteraksi oleh manusia.<\/td>\n<\/tr>\n<tr>\n<td><code>pcr<\/code><\/td>\n<td><code>processor<\/code><\/td>\n<td>Antarmuka Pengguna\/Otomasi<\/td>\n<td>Mendefinisikan prosesor latar belakang otomatis, mekanisme cron, atau saga.<\/td>\n<\/tr>\n<tr>\n<td><code>cmd<\/code><\/td>\n<td><code>perintah<\/code><\/td>\n<td>Perintah\/Model Baca<\/td>\n<td>Mewakili niat tindakan eksplisit atau permintaan untuk mengubah variabel status.<\/td>\n<\/tr>\n<tr>\n<td><code>rmo<\/code><\/td>\n<td><code>model baca<\/code><\/td>\n<td>Perintah\/Model Baca<\/td>\n<td>Mendefinisikan tampilan cache terstruktur, hanya bisa dibaca, atau tabel proyeksi pencarian.<\/td>\n<\/tr>\n<tr>\n<td><code>evt<\/code><\/td>\n<td><code>acara<\/code><\/td>\n<td>Lacak Acara<\/td>\n<td>Catatan historis yang tidak dapat diubah yang mencatat aktivitas yang berhasil dieksekusi.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Mendokumentasikan Proyeksi Data Konteks<\/h2>\n<p>Untuk menyediakan tata letak informasi dengan kepadatan tinggi, Mermaid mengizinkan penyisipan skema data eksplisit atau mockup status langsung ke dalam bingkai timeline Anda. Anda dapat menerapkan ini menggunakan bidang inline atau blok data struktural eksternal.<\/p>\n<h3>1. Definisi Data Inline<\/h3>\n<p>Untuk definisi parameter singkat, tambahkan peta data eksplisit yang dikelilingi tanda kurung kurawal (<code>{ }<\/code>) langsung pada pernyataan baris waktu aktif:<\/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:eNpLLUvNK8nNT0nNycxL5+UqSVMwMFRIzk1RcExJCcl3TiwqUahWyCxJzQ3OLrVSKC4pAirTUUjOL80rsVLIzCtRqIVoMlJILStR8AQqBGpMTcHUpFALALSaJIE=\" 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:eNorSM3NT0nNScxTSExOLErk5SpJUzAwVEjOTVEIScxNSszwTvVOLUrMy0rMS1eoVsgsSc0Nzi61UiguKcrMS9dRyCrNzUnMsFLIzCtRqIXoNlJILStR8ASqdMksAZuRDTQeQ69CLQBmaSrv\" \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\">pemodelan acara\r\ntf 01 cmd TambahKeKeranjang { itemSku: string, jumlah: int }\r\ntf 02 evt ItemDitambahkan { itemSku: string }<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorSM3NT0nNScxTSExOLErk5SpJUzAwVEjOTVEIScxNSszwTvVOLUrMy0rMS1eoVsgsSc0Nzi61UiguKcrMS9dRyCrNzUnMsFLIzCtRqIXoNlJILStR8ASqdMksAZuRDTQeQ69CLQBmaSrv\" \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:eNpLLUvNK8nNT0nNycxL5+UqSVMwMFRIzk1RcExJCcl3TiwqUahWyCxJzQ3OLrVSKC4pAirTUUjOL80rsVLIzCtRqIVoMlJILStR8AQqBGpMTcHUpFALALSaJIE=\" 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=\"leNAhTk\"><img alt=\"\" class=\"alignnone size-full wp-image-946\" decoding=\"async\" height=\"330\" sizes=\"(max-width: 869px) 100vw, 869px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de467805f7.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de467805f7.png 869w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de467805f7-300x114.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de467805f7-768x292.png 768w\" width=\"869\"\/><\/p>\n<h3>2. Blok Data Terpisah (Tanda Kurung Siku Ganda)<\/h3>\n<p>Ketika menangani matriks objek kompleks atau mereuse properti yang cocok di berbagai bingkai, buat deskriptor eksternal. Tempatkan referensi penunjuk yang dikelilingi tanda kurung siku ganda (<code>[[ID Blok]]<\/code>) pada baris waktu, dan jelaskan komponen objek secara terpisah di bagian bawah skrip melalui kata kunci <code>data<\/code> kata kunci:<\/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:eNplyrEKwjAUheE9kHe4WyclKXZoNzGLU0VxKh1CctVik0C4KYj47ia6CG6H7\/y4oCcXLM6Tv3JGFxASjLOwu6G5h0QwDH20GJUmLeQ4fpsacCH4HIdZG7T\/GWc2b\/hReHIGEArsbQdVf1Srtq2rohRIz1sXkqcO5KZZN6KwSTGiN49cn08ql683wtI12w==\" 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:eNplyrEKwjAUheE9kHe4WyclKXZoNzGLU0VxKh1CctVik0C4KYj47ia6CG6H7\/y4oCcXLM6Tv3JGFxASjLOwu6G5h0QwDH20GJUmLeQ4fpsacCH4HIdZG7T\/GWc2b\/hReHIGEArsbQdVf1Srtq2rohRIz1sXkqcO5KZZN6KwSTGiN49cn08ql683wtI12w==\" \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\">eventmodeling\r\ntf 01 cmd Checkout [[OrderData01]]\r\ntf 02 evt OrderPlaced [[OrderData01]]\r\n\r\ndata OrderData01 {\r\n  orderId: 'ORD-992'\r\n  totalAmount: 145.50\r\n  currency: 'USD'\r\n}<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNplyrEKwjAUheE9kHe4WyclKXZoNzGLU0VxKh1CctVik0C4KYj47ia6CG6H7\/y4oCcXLM6Tv3JGFxASjLOwu6G5h0QwDH20GJUmLeQ4fpsacCH4HIdZG7T\/GWc2b\/hReHIGEArsbQdVf1Srtq2rohRIz1sXkqcO5KZZN6KwSTGiN49cn08ql683wtI12w==\" \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:eNplyrEKwjAUheE9kHe4WyclKXZoNzGLU0VxKh1CctVik0C4KYj47ia6CG6H7\/y4oCcXLM6Tv3JGFxASjLOwu6G5h0QwDH20GJUmLeQ4fpsacCH4HIdZG7T\/GWc2b\/hReHIGEArsbQdVf1Srtq2rohRIz1sXkqcO5KZZN6KwSTGiN49cn08ql683wtI12w==\" 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=\"Qjeasgy\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-947\" decoding=\"async\" height=\"362\" loading=\"lazy\" sizes=\"auto, (max-width: 1105px) 100vw, 1105px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de47409aa2.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de47409aa2.png 1105w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de47409aa2-300x98.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de47409aa2-1024x335.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de47409aa2-768x252.png 768w\" width=\"1105\"\/><\/p>\n<hr\/>\n<h2>Rancangan Dunia Nyata: Otomasi Persediaan E-Commerce<\/h2>\n<p>Rancangan komprehensif dengan banyak jalur ini menunjukkan alur kerja arsitektur e-commerce tingkat lanjut. Ini memetakan tindakan pengguna front-end secara berurutan, transisi melalui perintah pemrosesan, melacak jejak acara historis, menerapkan prosesor mikroservis latar belakang otomatis melalui<code>resetframe<\/code> (<code>rf<\/code>), dan menyediakan model blok data yang terisolasi.<\/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:eNqVUjtPwzAQ3iPlP9yCukCVlkAhWykMHRAV5TEgBmNfW6uxXexzoar47\/hRoEgsTFFy3\/MuuEZNyghspZ6XxcEBTBbMIfQauHdoYcQswVgTWsZJGl0WNIOqB17CxBrhOY0YsdbMHyS+5WEfuBIwFGJMqO5MUnh6io+RUYpp8fycgceAa0oO3QgNDBQ75FWM9YWrwSoDw+C\/xmupZQREux12wjatYUl1r0C\/gaEnoxgF0QvGl3NrvBahS5Q2dgMPrJWC5VI22Jz8EScHOIUVt3CLYSHrRAjVOTpnbJ4PcuO2NTzYPTKLC+MdTsnwJWzBLX0DjmzY8CG80qYBqQk+MvcsuX6n6iZStgrBt2B\/XMeiAe+liNTU9Oo93EWzFi7DDWDKF6gQpivkciZ5oriyEHG2t33YlgXAKh8vSnYmtzeXR3XV78TBq2eaZAzZK4uPPXo6yX\/IACQVOmJqFd4HvbOTuq6q6rfq7nhZl0z4leLu3U6AB8TUv6TvDfTr7vl5oH8CPDHgfQ==\" 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:eNqVUsFO3DAQvUfKP7wL4tKusttQIDdYqLRqKyK2ogfEYRoPwU1sL\/Zkq9WKf6+dbAWVeunJsue9ee\/NmLdsxTjFvbZtnh0d4RMFxrzCygp76oLG53jan2Rb1GzbdrCUZ\/KIYo5Bo\/ZODY0sSah37Z3mX1NxgcYoXCi1Ejbf3JK84P4+HUtnDFn18DABP4C3glSYJWhksDogr5O5P7gS3jhcNKK3\/FVbnQBJ7oCtadc7Gru+xlhUuKNeK4opavaBlSay+BLNelxyT11KdSPOkOiQZz7qnPzDz+TgIzaNxy0H9tuIdzZmbzgE56f66RS5711Dwt\/J85MbAq\/FNR32CN1QIYiPg36HZ9lV0FbwMnHPRtWVTYmd381G0iQVx7GHf1VdqQrDoFWijlHXGw76UXcp5bpjQ7iKAXHdhbhBS32eqXR\/M3vs8wzYTKtL\/Y7r25ur92WxOE6F54Gs6ORwnmcvb+jjQv6HDIg2HITMJt5P52cnZVkUxd9dD6ub+oqLHykNPhwaNBGxHn6M7xUW5ez8PNJ\/A2S94U4=\" \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\">eventmodeling\r\n%% Fase 1: Interaksi Keranjang Pengguna\r\ntf 01 ui ProductCatalogView\r\ntf 02 cmd AddItemToCart [[CartCommand]]\r\ntf 03 evt Cart.ItemAdded [[CartEvent]]\r\ntf 04 rmo ActiveMiniCartView [[CartPayload]]\r\n\r\n%% Fase 2: Validasi Persediaan Latar Belakang Otomatis\r\nrf 05 evt Cart.ItemAdded\r\ntf 06 pcr ReservationProcessor\r\ntf 07 cmd AllocateWarehouseStock { sku: string, qty: int }\r\ntf 08 evt Inventory.StockReserved { reservationId: uuid }\r\n\r\n%% Spesifikasi Skema Data Eksternal\r\ndata CartCommand {\r\n  productId: 'PROD-402'\r\n  quantity: 1\r\n}\r\ndata CartEvent {\r\n  productId: 'PROD-402'\r\n  quantity: 1\r\n  timestamp: 1718544000\r\n}\r\ndata CartPayload {\r\n  totalItems: 1\r\n  cartSubtotal: 24.99\r\n}<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqVUsFO3DAQvUfKP7wL4tKusttQIDdYqLRqKyK2ogfEYRoPwU1sL\/Zkq9WKf6+dbAWVeunJsue9ee\/NmLdsxTjFvbZtnh0d4RMFxrzCygp76oLG53jan2Rb1GzbdrCUZ\/KIYo5Bo\/ZODY0sSah37Z3mX1NxgcYoXCi1Ejbf3JK84P4+HUtnDFn18DABP4C3glSYJWhksDogr5O5P7gS3jhcNKK3\/FVbnQBJ7oCtadc7Gru+xlhUuKNeK4opavaBlSay+BLNelxyT11KdSPOkOiQZz7qnPzDz+TgIzaNxy0H9tuIdzZmbzgE56f66RS5711Dwt\/J85MbAq\/FNR32CN1QIYiPg36HZ9lV0FbwMnHPRtWVTYmd381G0iQVx7GHf1VdqQrDoFWijlHXGw76UXcp5bpjQ7iKAXHdhbhBS32eqXR\/M3vs8wzYTKtL\/Y7r25ur92WxOE6F54Gs6ORwnmcvb+jjQv6HDIg2HITMJt5P52cnZVkUxd9dD6ub+oqLHykNPhwaNBGxHn6M7xUW5ez8PNJ\/A2S94U4=\" \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:eNqVUjtPwzAQ3iPlP9yCukCVlkAhWykMHRAV5TEgBmNfW6uxXexzoar47\/hRoEgsTFFy3\/MuuEZNyghspZ6XxcEBTBbMIfQauHdoYcQswVgTWsZJGl0WNIOqB17CxBrhOY0YsdbMHyS+5WEfuBIwFGJMqO5MUnh6io+RUYpp8fycgceAa0oO3QgNDBQ75FWM9YWrwSoDw+C\/xmupZQREux12wjatYUl1r0C\/gaEnoxgF0QvGl3NrvBahS5Q2dgMPrJWC5VI22Jz8EScHOIUVt3CLYSHrRAjVOTpnbJ4PcuO2NTzYPTKLC+MdTsnwJWzBLX0DjmzY8CG80qYBqQk+MvcsuX6n6iZStgrBt2B\/XMeiAe+liNTU9Oo93EWzFi7DDWDKF6gQpivkciZ5oriyEHG2t33YlgXAKh8vSnYmtzeXR3XV78TBq2eaZAzZK4uPPXo6yX\/IACQVOmJqFd4HvbOTuq6q6rfq7nhZl0z4leLu3U6AB8TUv6TvDfTr7vl5oH8CPDHgfQ==\" 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=\"vQXOTmY\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-948\" decoding=\"async\" height=\"801\" loading=\"lazy\" sizes=\"auto, (max-width: 2180px) 100vw, 2180px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174.png 2180w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174-300x110.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174-1024x376.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174-768x282.png 768w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174-1536x564.png 1536w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174-2048x752.png 2048w\" width=\"2180\"\/><\/p>\n<hr\/>\n<p><em><strong>Kiat Sintaks:<\/strong>Untuk membuat jalur renang sekunder yang terorganisasi dengan rapi di bawah jalur utama atau untuk mengisolasi beberapa sistem bawah, Anda dapat menambahkan string kualifikasi namespace yang dipisahkan titik pada label entitas Anda (misalnya: <code>evt Cart.ItemAdded<\/code> vs. <code>evt Inventory.StockReserved<\/code>). Mesin akan secara otomatis menghasilkan garis subkelompok yang berbeda untuk entitas tersebut.<\/em><\/p>\n<hr\/>\n<h2>Kesalahan Sintaks Umum &amp; Kendala Sistem<\/h2>\n<p>Saat merancang blok perilaku deret waktu yang sangat padat, pertimbangkan aturan validasi format berikut untuk mencegah kesalahan kompilasi:<\/p>\n<ul>\n<li><strong>Nomor Urutan Pelacakan Waktu:<\/strong>Setiap <code>tf<\/code> atau <code>timeframe<\/code>penugasan memerlukan slot token pengenal numerik eksplisit yang langsung mengikutinya. Menulis definisi token seperti <code>tf ui ProductView<\/code>tanpa indeks nomor di tengah akan menghentikan pemrosesan sistem.<\/li>\n<li><strong>Spasi dan Format Objek:<\/strong> Di dalam peta data gaya JSON atau secara mandiri <code>data<\/code> deklarasi, pertahankan penugasan yang bersih. Lupa membuka kurung kurawal atau kurung penutup dapat menyebabkan tata letak grid yang tidak terpecahkan.<\/li>\n<li><strong>Membedakan Rentang Waktu vs. Resetframe:<\/strong> Gunakan <code>tf<\/code> untuk operasi yang bergerak maju dan digerakkan manusia. Gunakan <code>rf<\/code> \/ <code>resetframe<\/code> secara sengaja ketika Anda perlu menggambarkan pemicu di luar jalur, seperti pekerjaan cron latar belakang yang memproses peristiwa yang terjadi sebelumnya.<\/li>\n<li><strong>Penggunaan Ulang Data yang Tidak Dapat Diubah:<\/strong> Saat merujuk pada tata letak muatan data yang persis sama di berbagai langkah timeline, pertahankan kesamaan pencocokan nama di seluruh kait penunjuk data Anda untuk mencegah pembuatan node ganda.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Modeling Acara (EM) adalah metodologi strategis yang digunakan untuk merancang dan menggambarkan sistem informasi dengan memetakan bagaimana data berpindah, diterjemahkan, dan berubah sepanjang timeline linier. Dengan sengaja menghilangkan mekanisme sistem sementara, diagram Modeling Acara berfokus secara ketat pada aliran informasi&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":19,"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-2083","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 Event Modeling | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Map event-driven architecture systems using Mermaid event modeling syntax in VPasCode, a free 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-event-modeling-syntax-swimlane-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Event Modeling | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Map event-driven architecture systems using Mermaid event modeling syntax in VPasCode, a free diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-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_6a4de44e3a892.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=\"4 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-event-modeling-syntax-swimlane-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-guide\\\/\",\"name\":\"Mermaid Event Modeling | 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-event-modeling-syntax-swimlane-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4de44e3a892.png\",\"datePublished\":\"2026-07-08T05:45:59+00:00\",\"description\":\"Map event-driven architecture systems using Mermaid event modeling syntax in VPasCode, a free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4de44e3a892.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4de44e3a892.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-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\":\"Sintaksi dan Panduan Swimlane Modeling Acara 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 Event Modeling | VPasCode Text to Diagram Guide","description":"Map event-driven architecture systems using Mermaid event modeling syntax in VPasCode, a free 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-event-modeling-syntax-swimlane-guide\/","og_locale":"id_ID","og_type":"article","og_title":"Mermaid Event Modeling | VPasCode Text to Diagram Guide","og_description":"Map event-driven architecture systems using Mermaid event modeling syntax in VPasCode, a free diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Estimasi waktu membaca":"4 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/","name":"Mermaid Event Modeling | 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-event-modeling-syntax-swimlane-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892.png","datePublished":"2026-07-08T05:45:59+00:00","description":"Map event-driven architecture systems using Mermaid event modeling syntax in VPasCode, a free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-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":"Sintaksi dan Panduan Swimlane Modeling Acara 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\/2083","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=2083"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}