Blame · sequenceDiagram.md

collab/mermaid/docs/syntax/sequenceDiagram.mdblame

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