

Mermaid-序列图

• Mermaid-序列图
  • 语法
    • 参与者
    • 别名
  • 消息
  • 活动
  • 注释
  • 循环(Loops)
  • 多选一(Alt)
  • 样式
    • 使用的类
    • stylesheet实例
  • 参考链接

序列图展示了两个程序的交互顺序

Mermaid 可以渲染序列图

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

语法

参与者

参与者可以被隐式的定义，不需要额外声明，例如上面的例子；参与者或者动作是按照定义的顺序进行渲染的，如果需要自定义顺序，可以如下面所示定义：

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

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

别名

参与者可以定义别名

sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    J->>A: Great!

sequenceDiagram participant A as Alice participant J as John A->>J: Hello John, how are you? J->>A: Great!

消息

消息可以被显示为实线或者点划线

[Actor][Arrow][Actor]:Message text

支持下面6中箭头形式：

类型	描述
->	无箭头实线
→	无箭头点划线
->>	实线带箭头
→>	点划线带箭头
-x	实线带 x
--x	点划线带x

sequenceDiagram participant A as Alice participant J as John A->J: 无箭头实线 A->>J: 带箭头实线 A-->J: 无箭头点划线 A-->>J: 带箭头点划线 A-xJ: 实线带 x A--xJ: 点划线带x

活动

可以激活或者停止一个对象，可以专门声明

sequenceDiagram Alice->>John: Hello John, how are you? activate John John-->>Alice: Great! deactivate John

可以通过添加 +/-到箭头右侧来简短的进行激活/停止

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

同一个对象的激活动作可以重叠

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!

注释

可以为序列图添加注释

语法如下：

Note [ right of | left of | over ] [Actor]: Text in note content

例如：

sequenceDiagram participant John Note right of John: Text in note

注释可以跨越两个参与者：

sequenceDiagram Alice->John: Hello John, how are you? Note over Alice,John: A typical interaction

循环(Loops)

使用下面的符号表示循环

loop Loop text
... statements ...
end

See the example below:

sequenceDiagram Alice->John: Hello John, how are you? loop Every minute John-->Alice: Great! end

多选一(Alt)

可以在序列图中表达多选一(alternative paths)，使用下面的符号：

alt Describing text
... statements ...
else
... statements ...
end

可选路径(无else)：

opt Describing text
... statements ...
end

例如：

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

样式

序列图的样式通过定义一系列的css类来定义

使用的类

类	描述
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.

stylesheet实例

body {
    background: white;
}

.actor {
    stroke: #CCCCFF;
    fill: #ECECFF;
}
text.actor {
    fill:black;
    stroke:none;
    font-family: Helvetica;
}

.actor-line {
    stroke:grey;
}

.messageLine0 {
    stroke-width:1.5;
    stroke-dasharray: "2 2";
    marker-end:"url(#arrowhead)";
    stroke:black;
}

.messageLine1 {
    stroke-width:1.5;
    stroke-dasharray: "2 2";
    stroke:black;
}

#arrowhead {
    fill:black;

}

.messageText {
    fill:black;
    stroke:none;
    font-family: 'trebuchet ms', verdana, arial;
    font-size:14px;
}

.labelBox {
    stroke: #CCCCFF;
    fill: #ECECFF;
}

.labelText {
    fill:black;
    stroke:none;
    font-family: 'trebuchet ms', verdana, arial;
}

.loopText {
    fill:black;
    stroke:none;
    font-family: 'trebuchet ms', verdana, arial;
}

.loopLine {
    stroke-width:2;
    stroke-dasharray: "2 2";
    marker-end:"url(#arrowhead)";
    stroke: #CCCCFF;
}

.note {
    stroke: #decc93;
    stroke: #CCCCFF;
    fill: #fff5ad;
}

.noteText {
    fill:black;
    stroke:none;
    font-family: 'trebuchet ms', verdana, arial;
    font-size:14px;
}

参考链接

官方文档： https://mermaidjs.github.io/#/

github库： https://github.com/knsv/mermaid