阅读 86

Markdown时序图--基础语法

时序图

? 序列图是一种交互图,它显示了流程以何种顺序相互操作。

Mermaid可以渲染序列图,如下定义。

sequenceDiagram
    Alice->>John:Message  Hello John, how are you?
    John-->>Alice:Message Great!
    Alice-xJohn:Message See you later!
sequenceDiagram Alice ->> John: Hello John, how are you? John -->> Alice: Great! Alice-x John: See you later!
1.1 :定义序列图的参与者

? 参与者可以隐式定义,如上图例子----即参与者在图表源文本中按照出现的顺序呈现。但有时,您可能希望以不同于在第一条消息中显示的顺序显示参与者。可以通过以下步骤指定行动者的出现顺序:

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!
1.2:为参与者设置别名

? 参与者可以有一个便于识别的ID和一个描述性的标签

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!
一:语法----时序图

[][][][] [参与者A] [线(箭头)] [参与者B] :Message(关键字可忽略) 文本描述

语法可解读:即 参与者A与参与者B通过线连接 :连接的线上可以描述A与B的关系

? 现在有6种类型的线(箭头)

Type Description
-> Solid line without arrow
--> Dotted line without arrow
->> Solid line with arrowhead
-->> Dotted line with arrowhead
-x Solid line with a cross at the end
--x Dotted line with a cross at the end.
1.2:我们可以定义参与的的主动(activate)和被动(activate)的关系。
sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John
sequenceDiagram Alice->>John: Hello John, how are you? activate John John-->>Alice: Great! deactivate John

即通过“activate John”关键字activate 定义对象“John”为主动发起开始,“deactivate John”关键字deactivate定义John结束。如上。

备注:简写activate和deactivate通过在":"后追加+/-

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Great!
1.2.1 : activate可以连续标示同一个参与者
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!
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]: 笔记内容

? 语法解读:关键字 Note [ 右边 | 左边 | 上面 ] [参与者]: 笔记内容

sequenceDiagram
    participant John
    Note right of John: Text in note
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
sequenceDiagram Alice->John: Hello John, how are you? Note over Alice,John: A typical interaction
三:循环

? 我们可以在时序图中表达一个循环,语法如下。

loop Loop text
... statements ...
end

举例:

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

? 我们还可以在时序图中表达选择,即二选一的表示,语法如下

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

OR

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
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
五:并行

? 在时序图中表达并行,语法如下

par [Action 1]
... statements ...
and [Action 2]
... statements ...
and [Action N]
... statements ...
end

举例1:简单并行

sequenceDiagram
		par Alice to Bob
    Alice->>Bob: Hello Bob, I am Alice.
    and Alice to John
    Alice->>John: Hello Bob, I am Alice.
    end
    Bob->>Alice: Hello Alice.
    John->>Alice: Hello Alice.
sequenceDiagram par Alice to Bob Alice->>Bob: Hello Bob, I am Alice. and Alice to John Alice->>John: Hello Bob, I am Alice. end Bob->>Alice: Hello Alice. John->>Alice: Hello Alice.

举例2: 嵌套并行,即par内嵌套子par语句

六:设置背景

? 我们可以为时序图的部分语句进行涂色,语法如下

rect rgb(0, 255, 0)
... content ...
end

例如

sequenceDiagram par Alice to Bob rect rgb(0, 255, 0) Alice->>Bob: Hello Bob, I am Alice. end and Alice to John Alice->>John: Hello Bob, I am Alice. end rect rgb(255, 0, 0) Bob->>Alice: Hello Alice. John->>Alice: Hello Alice. end
七:设置备注
即为程序可读性提高,可以为时序图设置备注,语法如下
sequenceDiagram
    Alice->>John: Hello John, how are you?
    %% this is a comment
    John-->>Alice: Great!
sequenceDiagram Alice->>John: Hello John, how are you? %% this is a comment John-->>Alice: Great!

原文:https://www.cnblogs.com/jinliang374003909/p/15270243.html

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐