Markdown系列mermaid美人鱼之UML序列图

最新推荐文章于 2024-08-09 07:59:56 发布

淺笑自己賤

最新推荐文章于 2024-08-09 07:59:56 发布

阅读量3.6k

点赞数 1

本文档介绍了如何使用Mermaid语言在Markdown中创建UML序列图，包括参与者、别名、消息、激活状态、笔记、循环和选择路径等元素的语法和示例，帮助读者掌握序列图的绘制技巧。

摘要由CSDN通过智能技术生成

序列图

序列图是一个交互图，显示了流程如何以及以何种顺序相互操作。
Mermaid可以渲染序列图。

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

语法

Participant 参与者

可以像在此页面的第一个示例中一样隐式定义参与者。参与者或角色按照图源文本中的外观顺序呈现。有时您可能希望以与第一条消息中出现的顺序不同的顺序显示参与者。可以通过执行以下操作来指定作用物的外观顺序：

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

As 别名

角色可以有一个方便的标识符和一个描述性标签。

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

消息

消息可以是两个显示为实线或虚线。

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

目前支持六种类型的箭头：

类型	描述
->	没有箭头的实线
- ->	没有箭头的虚线
->>	带箭头的实线
- ->>	带箭头的虚线
-X	实线与末端的十字架（异步）
- -X	最后用十字线的虚线（异步）

activate 激活

可以激活和停用某个角色,activation用于声明：

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!

可以为同一个角色堆叠激活：

sequenceDiagramDiagram
    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笔记

可以在序列图中添加注释。这是通过符号 Note right of或 Note left of 注释内容中的文字

请参阅以下示例：

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

循环

通过loop可以在序列图中表示循环。

loop Loop text
... statements ...
end

请参阅以下示例：

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

选择(Alt和Opt)

通过alt可以在序列图中表示备选路径。

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

或者如果有序列是可选的（如果没有其他）

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	图表顶部的actor框的样式
text.actor	图表顶部的actor框中的文本样式
actor-line	演员的垂直线
messageLine0	固体消息行的样式
messageLine1	虚线消息行的样式
messageText	消息箭头上的文本定义样式
labelBox	将样式标签定义为循环中的左侧
labelText	循环标签中文本的样式
loopText	循环框中文本的样式
loopLine	循环框中的行定义样式
note	便条盒的样式
noteText	注释框中文本的样式

样本表样本

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;
}

组态

是否可以调整渲染序列图的边距。

这是通过定义mermaid.sequenceConfig或通过CLI使用带有配置的json文件来完成的。如何使用CLI在mermaidCLI页面中描述。 mermaid.sequenceConfig可以使用配置参数或相应的对象设置为JSON字符串。

mermaid.sequenceConfig = {
    diagramMarginX:50,
    diagramMarginY:10,
    boxTextMargin:5,
    noteMargin:10,
    messageMargin:35,
    mirrorActors:true
};

可配置参数：

参数	描述	默认值
mirrorActor	打开/关闭图表下方及其上方的actor的渲染	false
bottomMarginAdj	调整图表结束的距离。使用css的宽边框样式可以生成unwantewd剪切，这就是存在此配置参数的原因	1