Sintaksi dan Panduan Swimlane Modeling Acara Mermaid.js

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 modelingacara otomatis mengkategorikan definisi tata letak Anda ke dalam tiga jalur visual terpisah: Antarmuka Pengguna/Automasi, Perintah/Model Baca, dan Acara.

Memahami Jalur Sistem

Ketika Anda menentukan elemen pada timeline Anda, Mermaid menugaskannya ke jalur horizontal tertentu yang sepenuhnya didasarkan pada jenis entitas yang mendasarinya:

• Jalur Antarmuka Pengguna/Automasi: Menyimpan antarmuka pengguna (ui) dan prosesor latar belakang backend (pcr / prosesor). Melambangkan bagaimana tindakan dipicu atau divisualisasikan.
• Jalur Perintah/Model Baca: Menyimpan perintah (cmd / perintah) yang bertujuan mengubah status sistem, atau model baca (rmo / modelbaca) yang menyimpan data kueri terstruktur.
• Lajur Acara: Menyimpan acara domain historis (evt / acara). Jalur ini menangkap sumber kebenaran mutlak mengenai apa yang telah terjadi di masa lalu.

Struktur Sintaks Dasar (Ringkas vs. Longgar)

Setiap diagram dimulai dengan eventmodeling deklarasi. Anda dapat membuat peta timeline Anda menggunakan either sintaks ringkas (menggunakan token struktural pendek seperti tf, ui, cmd, evt) atau sintaks deskriptif sintaks longgar (menggunakan waktu, perintah, baca model). Kedua gaya ini dapat digabungkan secara saling bertukar.

1. Rancangan Sintaks Ringkas

pemodelan peristiwa
tf 01 ui LoginScreen
tf 02 cmd SubmitCredentials
tf 03 evt UserAuthenticated

2. Rancangan Sintaks Longgar

pemodelan peristiwa
timeframe 01 ui LoginScreen
timeframe 02 command SubmitCredentials
timeframe 03 event UserAuthenticated

Referensi Sintaks

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.

Mendokumentasikan Proyeksi Data Konteks

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.

1. Definisi Data Inline

Untuk definisi parameter singkat, tambahkan peta data eksplisit yang dikelilingi tanda kurung kurawal ({ }) langsung pada pernyataan baris waktu aktif:

pemodelan acara
tf 01 cmd TambahKeKeranjang { itemSku: string, jumlah: int }
tf 02 evt ItemDitambahkan { itemSku: string }

2. Blok Data Terpisah (Tanda Kurung Siku Ganda)

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 ([[ID Blok]]) pada baris waktu, dan jelaskan komponen objek secara terpisah di bagian bawah skrip melalui kata kunci data kata kunci:

eventmodeling
tf 01 cmd Checkout [[OrderData01]]
tf 02 evt OrderPlaced [[OrderData01]]

data OrderData01 {
  orderId: 'ORD-992'
  totalAmount: 145.50
  currency: 'USD'
}

Rancangan Dunia Nyata: Otomasi Persediaan E-Commerce

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 melaluiresetframe (rf), dan menyediakan model blok data yang terisolasi.

eventmodeling
%% Fase 1: Interaksi Keranjang Pengguna
tf 01 ui ProductCatalogView
tf 02 cmd AddItemToCart [[CartCommand]]
tf 03 evt Cart.ItemAdded [[CartEvent]]
tf 04 rmo ActiveMiniCartView [[CartPayload]]

%% Fase 2: Validasi Persediaan Latar Belakang Otomatis
rf 05 evt Cart.ItemAdded
tf 06 pcr ReservationProcessor
tf 07 cmd AllocateWarehouseStock { sku: string, qty: int }
tf 08 evt Inventory.StockReserved { reservationId: uuid }

%% Spesifikasi Skema Data Eksternal
data CartCommand {
  productId: 'PROD-402'
  quantity: 1
}
data CartEvent {
  productId: 'PROD-402'
  quantity: 1
  timestamp: 1718544000
}
data CartPayload {
  totalItems: 1
  cartSubtotal: 24.99
}

Kiat Sintaks: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: evt Cart.ItemAdded vs. evt Inventory.StockReserved). Mesin akan secara otomatis menghasilkan garis subkelompok yang berbeda untuk entitas tersebut.

Kesalahan Sintaks Umum & Kendala Sistem

Saat merancang blok perilaku deret waktu yang sangat padat, pertimbangkan aturan validasi format berikut untuk mencegah kesalahan kompilasi:

• Nomor Urutan Pelacakan Waktu:Setiap tf atau timeframepenugasan memerlukan slot token pengenal numerik eksplisit yang langsung mengikutinya. Menulis definisi token seperti tf ui ProductViewtanpa indeks nomor di tengah akan menghentikan pemrosesan sistem.
• Spasi dan Format Objek: Di dalam peta data gaya JSON atau secara mandiri data deklarasi, pertahankan penugasan yang bersih. Lupa membuka kurung kurawal atau kurung penutup dapat menyebabkan tata letak grid yang tidak terpecahkan.
• Membedakan Rentang Waktu vs. Resetframe: Gunakan tf untuk operasi yang bergerak maju dan digerakkan manusia. Gunakan rf / resetframe secara sengaja ketika Anda perlu menggambarkan pemicu di luar jalur, seperti pekerjaan cron latar belakang yang memproses peristiwa yang terjadi sebelumnya.
• Penggunaan Ulang Data yang Tidak Dapat Diubah: 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.