{"id":2109,"date":"2026-05-26T08:05:43","date_gmt":"2026-05-26T08:05:43","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/mermaid-js-sequence-diagram-syntax-guide\/"},"modified":"2026-05-26T08:05:43","modified_gmt":"2026-05-26T08:05:43","slug":"mermaid-js-sequence-diagram-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-sequence-diagram-syntax-guide\/","title":{"rendered":"Panduan Sintaks Diagram Urutan Mermaid.js"},"content":{"rendered":"

Apa itu Diagram Urutan?<\/h2>\n

Sebuah Diagram Urutan<\/strong> adalah diagram perilaku yang penting diagram UML<\/strong> dirancang untuk memvisualisasikan alur kronologis pesan, pemanggilan fungsi, dan muatan data antara entitas sistem yang berbeda sepanjang timeline linier. Diakui sebagai jenis diagram UML intijenis diagram UML<\/strong>, memetakan interaksi runtime dengan menumpuk komponen sistem sepanjang sumbu X sebagai garis hidup vertikal dan melacak pertukaran pesan sepanjang sumbu Y. Rancangan ini sangat berharga bagi pengembang yang mendiagnosis masalah pada pertukaran tangan API terdistribusi, jalur orkestrasi mikroservis, atau alur otentikasi pengguna secara real-time.<\/p>\n

Dengan Mermaid.js<\/strong>, Anda dapat membuat skrip proses temporal yang kompleks menggunakan struktur teks yang intuitif. Mesin secara otomatis menangani jarak vertikal, mengelola penataan panah pesan, dan menggambar blok aktivasi runtime dengan rapi di seluruh kanvas Anda.<\/p>\n

Panduan Sintaks Inti: Elemen dan Konstruksi<\/h2>\n

Untuk merancang diagram urutan UML yang akurat dan mudah dibaca di Mermaid, Anda harus menguasai deklarasi peserta, variasi panah pesan, garis hidup eksplisit, dan struktur blok kondisional.<\/p>\n

1. Deklarasi Peserta dan Aktor<\/h3>\n

Anda mendeklarasikan entitas sistem standar menggunakan kata kunci participant<\/code> kata kunci. Jika entitas tersebut mewakili pengguna akhir manusia atau operator eksternal, gunakan kata kunci actor<\/code> kata kunci untuk menampilkan ikon gambar batang standar di kanvas:<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit Mermaid di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
sequenceDiagram\r\n    actor Client\r\n    participant API sebagai Gateway Router<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit Mermaid di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Kiat Pro:<\/em> Gunakan kata kunci as<\/code> kata kunci untuk memetakan nama komponen panjang ke alias internal yang ringkas, menjaga skrip pesan Anda tetap ringkas dan mudah dibaca.<\/p>\n
2. Format Panah Pesan<\/h3>\n
Jenis garis dan kepala panah yang Anda gunakan menentukan gaya komunikasi antara peserta sistem Anda:<\/p>\n