Diagram Urutan
Mermaid dapat merender diagram urutan. Diagram urutan adalah sejenis diagram interaksi, yang menunjukkan bagaimana berbagai proses saling beroperasi beserta urutan operasinya.
Salin
Sematkan
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
Catatan tentang simpul: karena cara penulisan bahasa Mermaid, kata "end" akan merusak keseluruhan graf. Jika harus menggunakan "end", Anda perlu membungkus kata "end" dengan tanda kurung biasa (), tanda kutip ganda "", kurung kurawal {}, atau tanda kurung siku [], yaitu: (end), [end], {end}.
Sintaks
Partisipan
Partisipan akan ditampilkan sesuai urutan kemunculannya dalam teks sumber diagram. Terkadang, Anda mungkin ingin menampilkan partisipan dalam urutan yang berbeda dari kemunculannya pada pesan pertama; Anda dapat menentukan urutan kemunculan partisipan melalui metode berikut:
Salin
Sematkan
sequenceDiagram
participant Alice
participant Bob
Bob->>Alice: Hi Alice
Alice->>Bob: Hi Bob
角色
Jika Anda ingin menggunakan simbol peran, bukan persegi panjang dengan teks, Anda dapat melakukannya menggunakan pernyataan peran, seperti yang ditunjukkan di bawah ini.
Salin
Sematkan
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
Alias
Anda dapat menggunakan as setelah deklarasi partisipan untuk mendefinisikan alias
Salin
Sematkan
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
Pembuatan dan penghancuran partisipan
Partisipan dapat dibuat dan dihancurkan melalui pesan. Oleh karena itu, tambahkan perintah buat atau hancurkan sebelum pesan.
Salin
Sematkan
participant B
A --> B: Hello
Saat membuat perintah, pembedaan antara partisipan dan alias didukung. Pengirim atau penerima pesan dapat dihancurkan, tetapi penerima hanya dapat dibuat.
Salin
Sematkan
sequenceDiagram
Alice->>Bob: Hello Bob, how are you ?
Bob->>Alice: Fine, thank you. And you?
create participant Carl
Alice->>Carl: Hi Carl!
create actor D as Donald
Carl->>D: Hi!
destroy Carl
Alice-xCarl: We are too many
destroy Bob
Bob->>Alice: I agree
Pengelompokan/kotak
Partisipan dapat dikelompokkan dalam kotak vertikal. Anda dapat menggunakan simbol untuk mendefinisikan warna (jika tidak didefinisikan, warnanya akan transparan).
Salin
Sematkan
box Aqua Group Description
... actors ...
end
box Group without description
... actors ...
end
box rgb(33,66,99)
... actors ...
end
box rgba(33,66,99,0.5)
... actors ...
end
Jika nama grup Anda berwarna, Anda dapat memaksa warna tersebut menjadi transparan:
Salin
Sematkan
box transparent Aqua
... actors ...
end
Salin
Sematkan
sequenceDiagram
box Orange Alice & John
participant A
participant J
end
box Another Group
participant B
participant C
end
A->>J: Hello John, how are you?
J->>A: Great!
A->>B: Hello Bob, how is Charley?
B->>C: Hello Charley, how are you?
Pesan
Pesan dapat ditampilkan sebagai garis padat maupun garis putus-putus.
Garis dapat berupa garis padat atau garis putus-putus, dan mendukung pengakhiran dengan berbagai jenis panah, silang, atau panah terbuka.
Salin
Sematkan
[Actor][Arrow][Actor]:Message text
Sepuluh jenis panah standar
| Jenis | Deskripsi |
|---|---|
| -> | Garis padat tanpa panah |
| --> | Garis putus-putus tanpa panah |
| ->> | Garis padat dengan panah |
| -->> | Garis putus-putus dengan panah |
| <<->> | Garis padat dengan panah dua arah |
| <<-->> | Garis putus-putus dengan panah dua arah |
| -x | Garis padat dengan silang di ujungnya |
| --x | Garis putus-putus dengan silang di ujungnya |
| -) | Garis padat dengan panah berongga di ujungnya (asinkron) |
| --) | Garis putus-putus dengan panah berongga di ujungnya (asinkron) |
Aktivasi
Sebuah peran dapat diaktifkan dan dinonaktifkan; penonaktifan atau pengaktifan dapat berupa deklarasi khusus:
Salin
Sematkan
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
activate Alice
Bob->>Alice: Hi Alice!
deactivate Alice
Ada juga notasi singkat, yaitu menambahkan + atau - setelah panah pesan.
Salin
Sematkan
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
Aktivasi peran yang sama dapat ditumpuk:
Salin
Sematkan
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
Komentar
Anda dapat menambahkan komentar pada diagram urutan. Hal ini dapat dilakukan melalui simbol berikut: Note[right of] atau [left of] atau [over][partisipan]: konten komentar
Salin
Sematkan
sequenceDiagram
participant John
Note right of John: Text in note
Anda juga dapat membuat komentar yang mencakup dua partisipan:
Salin
Sematkan
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
Karakter baris baru
Anda dapat menambahkan karakter baris baru pada komentar dan pesan:
Salin
Sematkan
sequenceDiagram
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
Karakter baris baru dalam nama peran memerlukan definisi alias:
Salin
Sematkan
sequenceDiagram
participant Alice as Alice<br/>Johnson
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<n/>But now in two lines
Loop
Dalam diagram urutan, loop dapat diekspresikan melalui simbol berikut.
Salin
Sematkan
loop Loop text
... statements ...
end
Silakan lihat contoh di bawah ini:
Salin
Sematkan
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
Alternatif
Dalam diagram urutan, jalur alternatif dapat diekspresikan melalui simbol.
Salin
Sematkan
alt Describing text...
statements
else
statements
end
或者如果存在可选序列：
Salin
Sematkan
opt Describing text...
statements
end
Silakan lihat contoh di bawah ini:
Salin
Sematkan
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
Paralel
Tindakan yang terjadi secara paralel dapat direpresentasikan melalui simbol berikut.
Salin
Sematkan
par Action 1
statements
and Action 2
statements
and Action N
statements
end
Silakan lihat contoh di bawah ini:
Salin
Sematkan
sequenceDiagram
par Alice to Bob
Alice->>Bob: Hello guys!
and Alice to John
Alice->>John: Hello guys!
end
Bob-->>Alice: Hi Alice!
John-->>Alice: Hi Alice!
Blok paralel juga dapat disarangkan.
Salin
Sematkan
sequenceDiagram
par Alice to Bob
Alice->>Bob: Go help John
and Alice to John
Alice->>John: I want this done today
par John to Charlie
John->>Charlie: Can we do this today?
and John to Diana
John->>Diana: Can you help us today?
end
end
Bagian kritis
Anda dapat menampilkan tindakan yang harus dijalankan secara otomatis dengan membuat kondisi untuk berbagai situasi.
Hal ini dilakukan melalui simbol berikut:
Salin
Sematkan
critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end
Silakan lihat contoh di bawah ini:
Salin
Sematkan
sequenceDiagram
critical Establish a connection to the DB
Service-->DB: connect
option Network timeout
Service-->Service: Log error
option Credentials rejected
Service-->Service: Log different error
end
Ada juga kemungkinan sama sekali tidak ada opsi.
Salin
Sematkan
critical Establish a connection to the DB
Service-->DB: connect
end
Blok kritis ini juga dapat disarangkan, setara dengan pernyataan par yang terlihat di atas.
Interupsi
Anda dapat menunjukkan penghentian urutan dalam alur, biasanya digunakan untuk memodelkan situasi pengecualian.
Hal ini dilakukan melalui simbol berikut:
Salin
Sematkan
break [something happened]
... statements ...
end
Silakan lihat contoh di bawah ini:
Salin
Sematkan
sequenceDiagram
Consumer-->API: Book something
API-->BookingService: Start booking process
break when the booking process fails
API-->Consumer: show failure
end
API-->BillingService: Start billing process
Sorotan latar belakang
Anda dapat mengatur persegi panjang latar belakang berwarna untuk menyorot alur, dilakukan melalui simbol berikut:
Salin
Sematkan
rect COLOR
... content ...
end
Warna didefinisikan menggunakan sintaks rgb dan rgba.
Salin
Sematkan
rect rgb(0, 255, 0)
... content ...
end
Salin
Sematkan
rect rgba(0, 0, 255, .1)
... content ...
end
Silakan lihat contoh di bawah ini:
Salin
Sematkan
sequenceDiagram
participant Alice
participant John
rect rgb(191, 178, 255)
note right of Alice: Alice calls John.
Alice->>+John: Hello John, how are you?
rect rgb(142, 182, 89)
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
end
John-->>-Alice: I feel great!
end
Alice ->>+ John: Did you want to go to the game tonight?
John -->>- Alice: Yeah! See you there.
Komentar
Anda dapat memasukkan komentar dalam diagram urutan, dan editor akan mengabaikannya. Komentar harus menempati satu baris tersendiri dan harus diawali dengan dua tanda persen %%. Semua teks dari awal komentar hingga karakter baris baru berikutnya akan dianggap sebagai komentar, termasuk sintaks diagram apa pun.
Salin
Sematkan
sequenceDiagram
Alice->>John: Hello John, how are you?
%% this is a comment
John-->>Alice: Great!
Pengkodean entitas untuk pelolosan karakter
Anda dapat meloloskan karakter menggunakan sintaks berikut.
Salin
Sematkan
sequenceDiagram
A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more!
Angka yang diberikan adalah desimal, sehingga (#) dapat dikodekan sebagai (#35;), penggunaan nama karakter HTML juga didukung.
Karena titik koma dapat menggantikan karakter baris baru untuk mendefinisikan penanda, saat menyertakan titik koma dalam teks pesan, Anda perlu menggunakan (#59;).
Penomoran
Anda dapat melampirkan nomor urut pada setiap panah dalam diagram urutan. Seperti yang ditunjukkan di bawah ini:
Salin
Sematkan
sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
loop HealthCheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
Menu partisipan
Partisipan dapat menyertakan menu pop-up yang berisi tautan yang dipersonalisasi menuju halaman eksternal. Misalnya, jika sebuah peran mewakili layanan jaringan, tautan yang berguna dapat mencakup tautan ke dasbor kesehatan layanan, repositori yang berisi kode layanan tersebut, atau tautan ke halaman wiki yang mendeskripsikan layanan tersebut.
Dapat dikonfigurasi dengan menambahkan satu atau lebih baris tautan, dengan format sebagai berikut:
Salin
Sematkan
link <actor>: <link-label> @ <link-url>
Salin
Sematkan
sequenceDiagram
participant Alice
participant John
link Alice: Dashboard @ https://dashboard.contoso.com/alice
link Alice: Wiki @ https://wiki.contoso.com/alice
link John: Dashboard @ https://dashboard.contoso.com/john
link John: Wiki @ https://wiki.contoso.com/john
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
Sintaks menu lanjutan
Terdapat sintaks lanjutan yang bergantung pada format JSON. Jika Anda mahir dengan format JSON, maka sintaks ini juga dapat digunakan.
Dapat dikonfigurasi dengan menambahkan baris tautan dengan format berikut:
Salin
Sematkan
links <actor>: <json-formatted link-name link-url pairs>
示例如下:
Salin
Sematkan
sequenceDiagram
participant Alice
participant John
links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
