sequenceDiagram.md

32.0 KB1186 lines

1	> Warning
2	>
3	> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
4	>
5	> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/sequenceDiagram.md](../../packages/mermaid/src/docs/syntax/sequenceDiagram.md).
6
7	# Sequence diagrams
8
9	> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
10
11	Mermaid can render sequence diagrams.
12
13	```mermaid-example
14	sequenceDiagram
15	Alice->>John: Hello John, how are you?
16	John-->>Alice: Great!
17	Alice-)John: See you later!
18	```
19
20	```mermaid
21	sequenceDiagram
22	Alice->>John: Hello John, how are you?
23	John-->>Alice: Great!
24	Alice-)John: See you later!
25	```
26
27	> Note
28	> A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.
29	>
30	> If unavoidable, one must use parentheses(), quotation marks "", or brackets {},\[], to enclose the word "end". i.e : (end), \[end], {end}.
31
32	## Syntax
33
34	### Participants
35
36	The participants can be defined implicitly as in the first example on this page. The participants or actors are
37	rendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a
38	different order than how they appear in the first message. It is possible to specify the actor's order of
39	appearance by doing the following:
40
41	```mermaid-example
42	sequenceDiagram
43	participant Alice
44	participant Bob
45	Bob->>Alice: Hi Alice
46	Alice->>Bob: Hi Bob
47	```
48
49	```mermaid
50	sequenceDiagram
51	participant Alice
52	participant Bob
53	Bob->>Alice: Hi Alice
54	Alice->>Bob: Hi Bob
55	```
56
57	### Actors
58
59	If you specifically want to use the actor symbol instead of a rectangle with text you can do so by using actor statements as per below.
60
61	```mermaid-example
62	sequenceDiagram
63	actor Alice
64	actor Bob
65	Alice->>Bob: Hi Bob
66	Bob->>Alice: Hi Alice
67	```
68
69	```mermaid
70	sequenceDiagram
71	actor Alice
72	actor Bob
73	Alice->>Bob: Hi Bob
74	Bob->>Alice: Hi Alice
75	```
76
77	### Boundary
78
79	If you want to use the boundary symbol for a participant, use the JSON configuration syntax as shown below.
80
81	```mermaid-example
82	sequenceDiagram
83	participant Alice@{ "type" : "boundary" }
84	participant Bob
85	Alice->>Bob: Request from boundary
86	Bob->>Alice: Response to boundary
87	```
88
89	```mermaid
90	sequenceDiagram
91	participant Alice@{ "type" : "boundary" }
92	participant Bob
93	Alice->>Bob: Request from boundary
94	Bob->>Alice: Response to boundary
95	```
96
97	### Control
98
99	If you want to use the control symbol for a participant, use the JSON configuration syntax as shown below.
100
101	```mermaid-example
102	sequenceDiagram
103	participant Alice@{ "type" : "control" }
104	participant Bob
105	Alice->>Bob: Control request
106	Bob->>Alice: Control response
107	```
108
109	```mermaid
110	sequenceDiagram
111	participant Alice@{ "type" : "control" }
112	participant Bob
113	Alice->>Bob: Control request
114	Bob->>Alice: Control response
115	```
116
117	### Entity
118
119	If you want to use the entity symbol for a participant, use the JSON configuration syntax as shown below.
120
121	```mermaid-example
122	sequenceDiagram
123	participant Alice@{ "type" : "entity" }
124	participant Bob
125	Alice->>Bob: Entity request
126	Bob->>Alice: Entity response
127	```
128
129	```mermaid
130	sequenceDiagram
131	participant Alice@{ "type" : "entity" }
132	participant Bob
133	Alice->>Bob: Entity request
134	Bob->>Alice: Entity response
135	```
136
137	### Database
138
139	If you want to use the database symbol for a participant, use the JSON configuration syntax as shown below.
140
141	```mermaid-example
142	sequenceDiagram
143	participant Alice@{ "type" : "database" }
144	participant Bob
145	Alice->>Bob: DB query
146	Bob->>Alice: DB result
147	```
148
149	```mermaid
150	sequenceDiagram
151	participant Alice@{ "type" : "database" }
152	participant Bob
153	Alice->>Bob: DB query
154	Bob->>Alice: DB result
155	```
156
157	### Collections
158
159	If you want to use the collections symbol for a participant, use the JSON configuration syntax as shown below.
160
161	```mermaid-example
162	sequenceDiagram
163	participant Alice@{ "type" : "collections" }
164	participant Bob
165	Alice->>Bob: Collections request
166	Bob->>Alice: Collections response
167	```
168
169	```mermaid
170	sequenceDiagram
171	participant Alice@{ "type" : "collections" }
172	participant Bob
173	Alice->>Bob: Collections request
174	Bob->>Alice: Collections response
175	```
176
177	### Queue
178
179	If you want to use the queue symbol for a participant, use the JSON configuration syntax as shown below.
180
181	```mermaid-example
182	sequenceDiagram
183	participant Alice@{ "type" : "queue" }
184	participant Bob
185	Alice->>Bob: Queue message
186	Bob->>Alice: Queue response
187	```
188
189	```mermaid
190	sequenceDiagram
191	participant Alice@{ "type" : "queue" }
192	participant Bob
193	Alice->>Bob: Queue message
194	Bob->>Alice: Queue response
195	```
196
197	### Aliases
198
199	The actor can have a convenient identifier and a descriptive label. Aliases can be defined in two ways: using external syntax with the `as` keyword, or inline within the configuration object.
200
201	#### External Alias Syntax
202
203	You can define an alias using the `as` keyword after the participant declaration:
204
205	```mermaid-example
206	sequenceDiagram
207	participant A as Alice
208	participant J as John
209	A->>J: Hello John, how are you?
210	J->>A: Great!
211	```
212
213	```mermaid
214	sequenceDiagram
215	participant A as Alice
216	participant J as John
217	A->>J: Hello John, how are you?
218	J->>A: Great!
219	```
220
221	The external alias syntax also works with participant stereotype configurations, allowing you to combine type specification with aliases:
222
223	```mermaid-example
224	sequenceDiagram
225	participant API@{ "type": "boundary" } as Public API
226	actor DB@{ "type": "database" } as User Database
227	participant Svc@{ "type": "control" } as Auth Service
228	API->>Svc: Authenticate
229	Svc->>DB: Query user
230	DB-->>Svc: User data
231	Svc-->>API: Token
232	```
233
234	```mermaid
235	sequenceDiagram
236	participant API@{ "type": "boundary" } as Public API
237	actor DB@{ "type": "database" } as User Database
238	participant Svc@{ "type": "control" } as Auth Service
239	API->>Svc: Authenticate
240	Svc->>DB: Query user
241	DB-->>Svc: User data
242	Svc-->>API: Token
243	```
244
245	#### Inline Alias Syntax
246
247	Alternatively, you can define an alias directly inside the configuration object using the `"alias"` field. This works with both `participant` and `actor` keywords:
248
249	```mermaid-example
250	sequenceDiagram
251	participant API@{ "type": "boundary", "alias": "Public API" }
252	participant Auth@{ "type": "control", "alias": "Auth Service" }
253	participant DB@{ "type": "database", "alias": "User Database" }
254	API->>Auth: Login request
255	Auth->>DB: Query user
256	DB-->>Auth: User data
257	Auth-->>API: Access token
258	```
259
260	```mermaid
261	sequenceDiagram
262	participant API@{ "type": "boundary", "alias": "Public API" }
263	participant Auth@{ "type": "control", "alias": "Auth Service" }
264	participant DB@{ "type": "database", "alias": "User Database" }
265	API->>Auth: Login request
266	Auth->>DB: Query user
267	DB-->>Auth: User data
268	Auth-->>API: Access token
269	```
270
271	#### Alias Precedence
272
273	When both inline alias (in the configuration object) and external alias (using `as` keyword) are provided, the external alias takes precedence:
274
275	```mermaid-example
276	sequenceDiagram
277	participant API@{ "type": "boundary", "alias": "Internal Name" } as External Name
278	participant DB@{ "type": "database", "alias": "Internal DB" } as External DB
279	API->>DB: Query
280	DB-->>API: Result
281	```
282
283	```mermaid
284	sequenceDiagram
285	participant API@{ "type": "boundary", "alias": "Internal Name" } as External Name
286	participant DB@{ "type": "database", "alias": "Internal DB" } as External DB
287	API->>DB: Query
288	DB-->>API: Result
289	```
290
291	In the example above, "External Name" and "External DB" will be displayed, not "Internal Name" and "Internal DB".
292
293	### Actor Creation and Destruction (v10.3.0+)
294
295	It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.
296
297	```
298	create participant B
299	A --> B: Hello
300	```
301
302	Create directives support actor/participant distinction and aliases. The sender or the recipient of a message can be destroyed but only the recipient can be created.
303
304	```mermaid-example
305	sequenceDiagram
306	Alice->>Bob: Hello Bob, how are you ?
307	Bob->>Alice: Fine, thank you. And you?
308	create participant Carl
309	Alice->>Carl: Hi Carl!
310	create actor D as Donald
311	Carl->>D: Hi!
312	destroy Carl
313	Alice-xCarl: We are too many
314	destroy Bob
315	Bob->>Alice: I agree
316	```
317
318	```mermaid
319	sequenceDiagram
320	Alice->>Bob: Hello Bob, how are you ?
321	Bob->>Alice: Fine, thank you. And you?
322	create participant Carl
323	Alice->>Carl: Hi Carl!
324	create actor D as Donald
325	Carl->>D: Hi!
326	destroy Carl
327	Alice-xCarl: We are too many
328	destroy Bob
329	Bob->>Alice: I agree
330	```
331
332	#### Unfixable actor/participant creation/deletion error
333
334	If an error of the following type occurs when creating or deleting an actor/participant:
335
336	> The destroyed participant participant-name does not have an associated destroying message after its declaration. Please check the sequence diagram.
337
338	And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v10.7.0+).
339
340	### Grouping / Box
341
342	The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation:
343
344	```
345	box Aqua Group Description
346	... actors ...
347	end
348	box Group without description
349	... actors ...
350	end
351	box rgb(33,66,99)
352	... actors ...
353	end
354	box rgba(33,66,99,0.5)
355	... actors ...
356	end
357	```
358
359	> Note
360	> If your group name is a color you can force the color to be transparent:
361
362	```
363	box transparent Aqua
364	... actors ...
365	end
366	```
367
368	```mermaid-example
369	sequenceDiagram
370	box Purple Alice & John
371	participant A
372	participant J
373	end
374	box Another Group
375	participant B
376	participant C
377	end
378	A->>J: Hello John, how are you?
379	J->>A: Great!
380	A->>B: Hello Bob, how is Charley?
381	B->>C: Hello Charley, how are you?
382	```
383
384	```mermaid
385	sequenceDiagram
386	box Purple Alice & John
387	participant A
388	participant J
389	end
390	box Another Group
391	participant B
392	participant C
393	end
394	A->>J: Hello John, how are you?
395	J->>A: Great!
396	A->>B: Hello Bob, how is Charley?
397	B->>C: Hello Charley, how are you?
398	```
399
400	## Messages
401
402	Messages can be of two displayed either solid or with a dotted line.
403
404	```
405	[Actor][Arrow][Actor]:Message text
406	```
407
408	Lines can be solid or dotted, and can end with various types of arrowheads, crosses, or open arrows.
409
410	#### Supported Arrow Types
411
412	Standard Arrow Types
413
414	\| Type \| Description \|
415	\| -------- \| ---------------------------------------------------- \|
416	\| `->` \| Solid line without arrow \|
417	\| `-->` \| Dotted line without arrow \|
418	\| `->>` \| Solid line with arrowhead \|
419	\| `-->>` \| Dotted line with arrowhead \|
420	\| `<<->>` \| Solid line with bidirectional arrowheads (v11.0.0+) \|
421	\| `<<-->>` \| Dotted line with bidirectional arrowheads (v11.0.0+) \|
422	\| `-x` \| Solid line with a cross at the end \|
423	\| `--x` \| Dotted line with a cross at the end \|
424	\| `-)` \| Solid line with an open arrow at the end (async) \|
425	\| `--)` \| Dotted line with a open arrow at the end (async) \|
426
427	Half-Arrows (v\<MERMAID_RELEASE_VERSION>+)
428
429	The following half-arrow types are supported for more expressive sequence diagrams. Both solid and dotted variants are available by increasing the number of dashes (`-` → `--`).
430
431	---
432
433	\| Type \| Description \|
434	\| ------- \| ---------------------------------------------------- \|
435	\| `-\\|\` \| Solid line with top half arrowhead \|
436	\| `--\\|\` \| Dotted line with top half arrowhead \|
437	\| `-\\|/` \| Solid line with bottom half arrowhead \|
438	\| `--\\|/` \| Dotted line with bottom half arrowhead \|
439	\| `/\\|-` \| Solid line with reverse top half arrowhead \|
440	\| `/\\|--` \| Dotted line with reverse top half arrowhead \|
441	\| `\\-` \| Solid line with reverse bottom half arrowhead \|
442	\| `\\--` \| Dotted line with reverse bottom half arrowhead \|
443	\| `-\\` \| Solid line with top stick half arrowhead \|
444	\| `--\\` \| Dotted line with top stick half arrowhead \|
445	\| `-//` \| Solid line with bottom stick half arrowhead \|
446	\| `--//` \| Dotted line with bottom stick half arrowhead \|
447	\| `//-` \| Solid line with reverse top stick half arrowhead \|
448	\| `//--` \| Dotted line with reverse top stick half arrowhead \|
449	\| `\\-` \| Solid line with reverse bottom stick half arrowhead \|
450	\| `\\--` \| Dotted line with reverse bottom stick half arrowhead \|
451
452	## Central Connections (v\<MERMAID_RELEASE_VERSION>+)
453
454	Mermaid sequence diagrams support central lifeline connections using a `()`.
455	This is useful to represent messages or signals that connect to a central point, rather than from one actor directly to another.
456
457	To indicate a central connection, append `()` to the arrow syntax.
458
459	#### Basic Syntax
460
461	```mermaid-example
462	sequenceDiagram
463	participant Alice
464	participant John
465	Alice->>()John: Hello John
466	Alice()->>John: How are you?
467	John()->>()Alice: Great!
468	```
469
470	```mermaid
471	sequenceDiagram
472	participant Alice
473	participant John
474	Alice->>()John: Hello John
475	Alice()->>John: How are you?
476	John()->>()Alice: Great!
477	```
478
479	## Activations
480
481	It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:
482
483	```mermaid-example
484	sequenceDiagram
485	Alice->>John: Hello John, how are you?
486	activate John
487	John-->>Alice: Great!
488	deactivate John
489	```
490
491	```mermaid
492	sequenceDiagram
493	Alice->>John: Hello John, how are you?
494	activate John
495	John-->>Alice: Great!
496	deactivate John
497	```
498
499	There is also a shortcut notation by appending `+`/`-` suffix to the message arrow:
500
501	```mermaid-example
502	sequenceDiagram
503	Alice->>+John: Hello John, how are you?
504	John-->>-Alice: Great!
505	```
506
507	```mermaid
508	sequenceDiagram
509	Alice->>+John: Hello John, how are you?
510	John-->>-Alice: Great!
511	```
512
513	Activations can be stacked for same actor:
514
515	```mermaid-example
516	sequenceDiagram
517	Alice->>+John: Hello John, how are you?
518	Alice->>+John: John, can you hear me?
519	John-->>-Alice: Hi Alice, I can hear you!
520	John-->>-Alice: I feel great!
521	```
522
523	```mermaid
524	sequenceDiagram
525	Alice->>+John: Hello John, how are you?
526	Alice->>+John: John, can you hear me?
527	John-->>-Alice: Hi Alice, I can hear you!
528	John-->>-Alice: I feel great!
529	```
530
531	## Notes
532
533	It is possible to add notes to a sequence diagram. This is done by the notation
534	Note \[ right of \| left of \| over ] \[Actor]: Text in note content
535
536	See the example below:
537
538	```mermaid-example
539	sequenceDiagram
540	participant John
541	Note right of John: Text in note
542	```
543
544	```mermaid
545	sequenceDiagram
546	participant John
547	Note right of John: Text in note
548	```
549
550	It is also possible to create notes spanning two participants:
551
552	```mermaid-example
553	sequenceDiagram
554	Alice->John: Hello John, how are you?
555	Note over Alice,John: A typical interaction
556	```
557
558	```mermaid
559	sequenceDiagram
560	Alice->John: Hello John, how are you?
561	Note over Alice,John: A typical interaction
562	```
563
564	## Line breaks
565
566	Line break can be added to Note and Message:
567
568	```mermaid-example
569	sequenceDiagram
570	Alice->John: Hello John,<br/>how are you?
571	Note over Alice,John: A typical interaction<br/>But now in two lines
572	```
573
574	```mermaid
575	sequenceDiagram
576	Alice->John: Hello John,<br/>how are you?
577	Note over Alice,John: A typical interaction<br/>But now in two lines
578	```
579
580	Line breaks in Actor names requires aliases:
581
582	```mermaid-example
583	sequenceDiagram
584	participant Alice as Alice<br/>Johnson
585	Alice->John: Hello John,<br/>how are you?
586	Note over Alice,John: A typical interaction<br/>But now in two lines
587	```
588
589	```mermaid
590	sequenceDiagram
591	participant Alice as Alice<br/>Johnson
592	Alice->John: Hello John,<br/>how are you?
593	Note over Alice,John: A typical interaction<br/>But now in two lines
594	```
595
596	## Loops
597
598	It is possible to express loops in a sequence diagram. This is done by the notation
599
600	```
601	loop Loop text
602	... statements ...
603	end
604	```
605
606	See the example below:
607
608	```mermaid-example
609	sequenceDiagram
610	Alice->John: Hello John, how are you?
611	loop Every minute
612	John-->Alice: Great!
613	end
614	```
615
616	```mermaid
617	sequenceDiagram
618	Alice->John: Hello John, how are you?
619	loop Every minute
620	John-->Alice: Great!
621	end
622	```
623
624	## Alt
625
626	It is possible to express alternative paths in a sequence diagram. This is done by the notation
627
628	```
629	alt Describing text
630	... statements ...
631	else
632	... statements ...
633	end
634	```
635
636	or if there is sequence that is optional (if without else).
637
638	```
639	opt Describing text
640	... statements ...
641	end
642	```
643
644	See the example below:
645
646	```mermaid-example
647	sequenceDiagram
648	Alice->>Bob: Hello Bob, how are you?
649	alt is sick
650	Bob->>Alice: Not so good :(
651	else is well
652	Bob->>Alice: Feeling fresh like a daisy
653	end
654	opt Extra response
655	Bob->>Alice: Thanks for asking
656	end
657	```
658
659	```mermaid
660	sequenceDiagram
661	Alice->>Bob: Hello Bob, how are you?
662	alt is sick
663	Bob->>Alice: Not so good :(
664	else is well
665	Bob->>Alice: Feeling fresh like a daisy
666	end
667	opt Extra response
668	Bob->>Alice: Thanks for asking
669	end
670	```
671
672	## Parallel
673
674	It is possible to show actions that are happening in parallel.
675
676	This is done by the notation
677
678	```
679	par [Action 1]
680	... statements ...
681	and [Action 2]
682	... statements ...
683	and [Action N]
684	... statements ...
685	end
686	```
687
688	See the example below:
689
690	```mermaid-example
691	sequenceDiagram
692	par Alice to Bob
693	Alice->>Bob: Hello guys!
694	and Alice to John
695	Alice->>John: Hello guys!
696	end
697	Bob-->>Alice: Hi Alice!
698	John-->>Alice: Hi Alice!
699	```
700
701	```mermaid
702	sequenceDiagram
703	par Alice to Bob
704	Alice->>Bob: Hello guys!
705	and Alice to John
706	Alice->>John: Hello guys!
707	end
708	Bob-->>Alice: Hi Alice!
709	John-->>Alice: Hi Alice!
710	```
711
712	It is also possible to nest parallel blocks.
713
714	```mermaid-example
715	sequenceDiagram
716	par Alice to Bob
717	Alice->>Bob: Go help John
718	and Alice to John
719	Alice->>John: I want this done today
720	par John to Charlie
721	John->>Charlie: Can we do this today?
722	and John to Diana
723	John->>Diana: Can you help us today?
724	end
725	end
726	```
727
728	```mermaid
729	sequenceDiagram
730	par Alice to Bob
731	Alice->>Bob: Go help John
732	and Alice to John
733	Alice->>John: I want this done today
734	par John to Charlie
735	John->>Charlie: Can we do this today?
736	and John to Diana
737	John->>Diana: Can you help us today?
738	end
739	end
740	```
741
742	## Critical Region
743
744	It is possible to show actions that must happen automatically with conditional handling of circumstances.
745
746	This is done by the notation
747
748	```
749	critical [Action that must be performed]
750	... statements ...
751	option [Circumstance A]
752	... statements ...
753	option [Circumstance B]
754	... statements ...
755	end
756	```
757
758	See the example below:
759
760	```mermaid-example
761	sequenceDiagram
762	critical Establish a connection to the DB
763	Service-->DB: connect
764	option Network timeout
765	Service-->Service: Log error
766	option Credentials rejected
767	Service-->Service: Log different error
768	end
769	```
770
771	```mermaid
772	sequenceDiagram
773	critical Establish a connection to the DB
774	Service-->DB: connect
775	option Network timeout
776	Service-->Service: Log error
777	option Credentials rejected
778	Service-->Service: Log different error
779	end
780	```
781
782	It is also possible to have no options at all
783
784	```mermaid-example
785	sequenceDiagram
786	critical Establish a connection to the DB
787	Service-->DB: connect
788	end
789	```
790
791	```mermaid
792	sequenceDiagram
793	critical Establish a connection to the DB
794	Service-->DB: connect
795	end
796	```
797
798	This critical block can also be nested, equivalently to the `par` statement as seen above.
799
800	## Break
801
802	It is possible to indicate a stop of the sequence within the flow (usually used to model exceptions).
803
804	This is done by the notation
805
806	```
807	break [something happened]
808	... statements ...
809	end
810	```
811
812	See the example below:
813
814	```mermaid-example
815	sequenceDiagram
816	Consumer-->API: Book something
817	API-->BookingService: Start booking process
818	break when the booking process fails
819	API-->Consumer: show failure
820	end
821	API-->BillingService: Start billing process
822	```
823
824	```mermaid
825	sequenceDiagram
826	Consumer-->API: Book something
827	API-->BookingService: Start booking process
828	break when the booking process fails
829	API-->Consumer: show failure
830	end
831	API-->BillingService: Start billing process
832	```
833
834	## Background Highlighting
835
836	It is possible to highlight flows by providing colored background rects. This is done by the notation
837
838	```
839	rect COLOR
840	... content ...
841	end
842	```
843
844	The colors are defined using rgb and rgba syntax.
845
846	```
847	rect rgb(0, 255, 0)
848	... content ...
849	end
850	```
851
852	```
853	rect rgba(0, 0, 255, .1)
854	... content ...
855	end
856	```
857
858	See the examples below:
859
860	```mermaid-example
861	sequenceDiagram
862	participant Alice
863	participant John
864
865	rect rgb(191, 223, 255)
866	note right of Alice: Alice calls John.
867	Alice->>+John: Hello John, how are you?
868	rect rgb(200, 150, 255)
869	Alice->>+John: John, can you hear me?
870	John-->>-Alice: Hi Alice, I can hear you!
871	end
872	John-->>-Alice: I feel great!
873	end
874	Alice ->>+ John: Did you want to go to the game tonight?
875	John -->>- Alice: Yeah! See you there.
876
877	```
878
879	```mermaid
880	sequenceDiagram
881	participant Alice
882	participant John
883
884	rect rgb(191, 223, 255)
885	note right of Alice: Alice calls John.
886	Alice->>+John: Hello John, how are you?
887	rect rgb(200, 150, 255)
888	Alice->>+John: John, can you hear me?
889	John-->>-Alice: Hi Alice, I can hear you!
890	end
891	John-->>-Alice: I feel great!
892	end
893	Alice ->>+ John: Did you want to go to the game tonight?
894	John -->>- Alice: Yeah! See you there.
895
896	```
897
898	## Comments
899
900	Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
901
902	```mermaid-example
903	sequenceDiagram
904	Alice->>John: Hello John, how are you?
905	%% this is a comment
906	John-->>Alice: Great!
907	```
908
909	```mermaid
910	sequenceDiagram
911	Alice->>John: Hello John, how are you?
912	%% this is a comment
913	John-->>Alice: Great!
914	```
915
916	## Entity codes to escape characters
917
918	It is possible to escape characters using the syntax exemplified here.
919
920	```mermaid-example
921	sequenceDiagram
922	A->>B: I #9829; you!
923	B->>A: I #9829; you #infin; times more!
924	```
925
926	```mermaid
927	sequenceDiagram
928	A->>B: I #9829; you!
929	B->>A: I #9829; you #infin; times more!
930	```
931
932	Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.
933
934	Because semicolons can be used instead of line breaks to define the markup, you need to use `#59;` to include a semicolon in message text.
935
936	## sequenceNumbers
937
938	It is possible to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below:
939
940	```html
941	<script>
942	mermaid.initialize({ sequence: { showSequenceNumbers: true } });
943	</script>
944	```
945
946	It can also be turned on via the diagram code as in the diagram:
947
948	```mermaid-example
949	sequenceDiagram
950	autonumber
951	Alice->>John: Hello John, how are you?
952	loop HealthCheck
953	John->>John: Fight against hypochondria
954	end
955	Note right of John: Rational thoughts!
956	John-->>Alice: Great!
957	John->>Bob: How about you?
958	Bob-->>John: Jolly good!
959	```
960
961	```mermaid
962	sequenceDiagram
963	autonumber
964	Alice->>John: Hello John, how are you?
965	loop HealthCheck
966	John->>John: Fight against hypochondria
967	end
968	Note right of John: Rational thoughts!
969	John-->>Alice: Great!
970	John->>Bob: How about you?
971	Bob-->>John: Jolly good!
972	```
973
974	## Actor Menus
975
976	Actors can have popup-menus containing individualized links to external pages. For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.
977
978	This can be configured by adding one or more link lines with the format:
979
980	```
981	link <actor>: <link-label> @ <link-url>
982	```
983
984	```mermaid-example
985	sequenceDiagram
986	participant Alice
987	participant John
988	link Alice: Dashboard @ https://dashboard.contoso.com/alice
989	link Alice: Wiki @ https://wiki.contoso.com/alice
990	link John: Dashboard @ https://dashboard.contoso.com/john
991	link John: Wiki @ https://wiki.contoso.com/john
992	Alice->>John: Hello John, how are you?
993	John-->>Alice: Great!
994	Alice-)John: See you later!
995	```
996
997	```mermaid
998	sequenceDiagram
999	participant Alice
1000	participant John
1001	link Alice: Dashboard @ https://dashboard.contoso.com/alice
1002	link Alice: Wiki @ https://wiki.contoso.com/alice
1003	link John: Dashboard @ https://dashboard.contoso.com/john
1004	link John: Wiki @ https://wiki.contoso.com/john
1005	Alice->>John: Hello John, how are you?
1006	John-->>Alice: Great!
1007	Alice-)John: See you later!
1008	```
1009
1010	#### Advanced Menu Syntax
1011
1012	There is an advanced syntax that relies on JSON formatting. If you are comfortable with JSON format, then this exists as well.
1013
1014	This can be configured by adding the links lines with the format:
1015
1016	```
1017	links <actor>: <json-formatted link-name link-url pairs>
1018	```
1019
1020	An example is below:
1021
1022	```mermaid-example
1023	sequenceDiagram
1024	participant Alice
1025	participant John
1026	links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
1027	links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
1028	Alice->>John: Hello John, how are you?
1029	John-->>Alice: Great!
1030	Alice-)John: See you later!
1031	```
1032
1033	```mermaid
1034	sequenceDiagram
1035	participant Alice
1036	participant John
1037	links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
1038	links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
1039	Alice->>John: Hello John, how are you?
1040	John-->>Alice: Great!
1041	Alice-)John: See you later!
1042	```
1043
1044	## Styling
1045
1046	Styling of a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss
1047
1048	### Classes used
1049
1050	\| Class \| Description \|
1051	\| -------------- \| -------------------------------------------------------------- \|
1052	\| actor \| Styles for the actor box. \|
1053	\| actor-top \| Styles for the actor figure/ box at the top of the diagram. \|
1054	\| actor-bottom \| Styles for the actor figure/ box at the bottom of the diagram. \|
1055	\| text.actor \| Styles for text of all of the actors. \|
1056	\| text.actor-box \| Styles for text of the actor box. \|
1057	\| text.actor-man \| Styles for text of the actor figure. \|
1058	\| actor-line \| The vertical line for an actor. \|
1059	\| messageLine0 \| Styles for the solid message line. \|
1060	\| messageLine1 \| Styles for the dotted message line. \|
1061	\| messageText \| Defines styles for the text on the message arrows. \|
1062	\| labelBox \| Defines styles label to left in a loop. \|
1063	\| labelText \| Styles for the text in label for loops. \|
1064	\| loopText \| Styles for the text in the loop box. \|
1065	\| loopLine \| Defines styles for the lines in the loop box. \|
1066	\| note \| Styles for the note box. \|
1067	\| noteText \| Styles for the text on in the note boxes. \|
1068
1069	### Sample stylesheet
1070
1071	```css
1072	body {
1073	background: white;
1074	}
1075
1076	.actor {
1077	stroke: #ccccff;
1078	fill: #ececff;
1079	}
1080	text.actor {
1081	fill: black;
1082	stroke: none;
1083	font-family: Helvetica;
1084	}
1085
1086	.actor-line {
1087	stroke: grey;
1088	}
1089
1090	.messageLine0 {
1091	stroke-width: 1.5;
1092	stroke-dasharray: '2 2';
1093	marker-end: 'url(#arrowhead)';
1094	stroke: black;
1095	}
1096
1097	.messageLine1 {
1098	stroke-width: 1.5;
1099	stroke-dasharray: '2 2';
1100	stroke: black;
1101	}
1102
1103	#arrowhead {
1104	fill: black;
1105	}
1106
1107	.messageText {
1108	fill: black;
1109	stroke: none;
1110	font-family: 'trebuchet ms', verdana, arial;
1111	font-size: 14px;
1112	}
1113
1114	.labelBox {
1115	stroke: #ccccff;
1116	fill: #ececff;
1117	}
1118
1119	.labelText {
1120	fill: black;
1121	stroke: none;
1122	font-family: 'trebuchet ms', verdana, arial;
1123	}
1124
1125	.loopText {
1126	fill: black;
1127	stroke: none;
1128	font-family: 'trebuchet ms', verdana, arial;
1129	}
1130
1131	.loopLine {
1132	stroke-width: 2;
1133	stroke-dasharray: '2 2';
1134	marker-end: 'url(#arrowhead)';
1135	stroke: #ccccff;
1136	}
1137
1138	.note {
1139	stroke: #decc93;
1140	fill: #fff5ad;
1141	}
1142
1143	.noteText {
1144	fill: black;
1145	stroke: none;
1146	font-family: 'trebuchet ms', verdana, arial;
1147	font-size: 14px;
1148	}
1149	```
1150
1151	## Configuration
1152
1153	It is possible to adjust the margins for rendering the sequence diagram.
1154
1155	This is done by defining `mermaid.sequenceConfig` or by the CLI to use a json file with the configuration.
1156	How to use the CLI is described in the [mermaidCLI](../config/mermaidCLI.md) page.
1157	`mermaid.sequenceConfig` can be set to a JSON string with config parameters or the corresponding object.
1158
1159	```javascript
1160	mermaid.sequenceConfig = {
1161	diagramMarginX: 50,
1162	diagramMarginY: 10,
1163	boxTextMargin: 5,
1164	noteMargin: 10,
1165	messageMargin: 35,
1166	mirrorActors: true,
1167	};
1168	```
1169
1170	### Possible configuration parameters:
1171
1172	\| Parameter \| Description \| Default value \|
1173	\| ----------------- \| ------------------------------------------------------------------------------------------------------------------------------------------ \| ------------------------------ \|
1174	\| mirrorActors \| Turns on/off the rendering of actors below the diagram as well as above it \| false \|
1175	\| bottomMarginAdj \| Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. \| 1 \|
1176	\| actorFontSize \| Sets the font size for the actor's description \| 14 \|
1177	\| actorFontFamily \| Sets the font family for the actor's description \| "Open Sans", sans-serif \|
1178	\| actorFontWeight \| Sets the font weight for the actor's description \| "Open Sans", sans-serif \|
1179	\| noteFontSize \| Sets the font size for actor-attached notes \| 14 \|
1180	\| noteFontFamily \| Sets the font family for actor-attached notes \| "trebuchet ms", verdana, arial \|
1181	\| noteFontWeight \| Sets the font weight for actor-attached notes \| "trebuchet ms", verdana, arial \|
1182	\| noteAlign \| Sets the text alignment for text in actor-attached notes \| center \|
1183	\| messageFontSize \| Sets the font size for actor<->actor messages \| 16 \|
1184	\| messageFontFamily \| Sets the font family for actor<->actor messages \| "trebuchet ms", verdana, arial \|
1185	\| messageFontWeight \| Sets the font weight for actor<->actor messages \| "trebuchet ms", verdana, arial \|
1186