Question

可以通过 sequenceDiagram 命令创建时序图，如：

	~~~mermaid
	sequenceDiagram
		Alice->>John: Hello John, how are you?
		John-->>Alice: Great!
	~~~

的图形为：

~~~mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
~~~

下面是时序图的语法

6.7.1 定义参与者

参与者可以采取类似上述例子中的隐式定义的方法定义，所有的参与者的展示顺序与 message 中参与者的出现顺序一致；你也可以显式的定义参与者，此时其展示顺序与定义顺序一致。如：

	~~~mermaid
	sequenceDiagram
		participant John
		participant Alice
		Alice->>John: Hello John, how are you?
		John-->>Alice: Great!
	~~~

的图形为：

~~~mermaid
sequenceDiagram
participant John
participant Alice
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
~~~

6.7.2 message

定义 message 的语法为：

	[Actor1][Arrow][Actor2]:message text

其中 [Actor1] 是消息的发送者， [Actor2] 是消息的接收者， [Arrow] 是线条类型。目前 mermaid 支持下列六种线条：

• -> 为无箭头实线
• --> 为无箭头点线
• ->> 为带箭头实线
• -->> 为带箭头点线
• -x 为实线,端点为 x
• --> 为点线,端点为 x

如：

	~~~mermaid
	sequenceDiagram
		Alice->John: solid line without arrow
		Alice-->John: dotted line without arrow
		Alice->>John: solid line with arrow
		Alice-->>John: dotted line with arrow
		Alice-xJohn: solid line with x
		Alice--xJohn: dotted line with x
	~~~

的图形为：

~~~mermaid
sequenceDiagram
Alice->John: solid line without arrow
Alice-->John: dotted line without arrow
Alice->>John: solid line with arrow
Alice-->>John: dotted line with arrow
Alice-x John: solid line with x
Alice--x John: dotted line with x
~~~

6.7.3 注释

定义注释的语法为：

	Note [right of | left of ] [Actor]: note text

其中 [Actor] 是被注释的参与者， [right of | left of] 是该注释相对于参与者的位置。

如：

	~~~mermaid
	sequenceDiagram
		participant Jone
		Note right of Jone: right of Actor
		Note left of Jone: left of Actor
	~~~

的图形为：

~~~mermaid
sequenceDiagram
participant Jone
Note right of Jone: right of Actor
Note left of Jone: left of Actor
~~~

6.7.4 Loop

可以通过 loop 命令创建 Loop，其格式为：

	loop Loop_text
	... statements ...
	end

如：

	~~~mermaid
	sequenceDiagram
		Alice->John: Hello John
			loop Reply every minute
		John-->Alice: Great!
		end
	~~~

的图形为：

~~~mermaid
sequenceDiagram
Alice->>John: Hello John
loop Reply every minute
John-->Alice: Great!
end
~~~

6.7.5 可选路径

可以通过 alt 命令创建可选路径，其格式为：

	alt Describing_text
	... statements ...
	else
	... statements ...
	end

若使用 opt 命令则也可以不需要 else ，：

	opt Describing_text
	... statements ...
	end

如：

	~~~mermaid
	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
	~~~

的图形为：

~~~mermaid
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is bad
Bob->>Alice: Not so good :(
else is good
Bob->>Alice: feel well
end
opt Extra response
Bob->>Alice: Thanks for asking
end
~~~

6.7.6 样式

时序图的样式由.css 文件的 class 定义，用到的类型有：

Class 	Description
actor 	Style for the actor box at the top of the diagram.
text.actor 	Styles for text in the actor box at the top of the diagram.
actor-line 	The vertical line for an actor.
messageLine0 	Styles for the solid message line.
messageLine1 	Styles for the dotted message line.
messageText 	Defines styles for the text on the message arrows.
labelBox 	Defines styles label to left in a loop.
labelText 	Styles for the text in label for loops.
loopText 	Styles for the text in the loop box.
loopLine 	Defines styles for the lines in the loop box.
note 	Styles for the note box.
noteText 	Styles for the text on in the note boxes.