您当前的位置: 首页 >  ar

Kevin-Dev

暂无认证

  • 0浏览

    0关注

    544博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

【Android -- 写作工具】Markdown 时序图

Kevin-Dev 发布时间:2020-05-31 23:10:00 ,浏览量:0

1. 前言

Markdown 的原生语法不支持绘制图形,但通过扩展模块,我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、”饼图” 等。

本节将重点介绍如何通过 Mermaid 绘制「时序图」。

时序图 (Sequence Diagram) ,用来体现对象之间的时间顺序关系,可以表达出对象的交互过程,也就是 “从哪到哪” 的图形化描述。

环境说明: 考虑到 Markdown 工具之间的不兼容,有的内容直接从页面复制粘贴到本地不会正常显示,大家学习时自己动手写是肯定没问题的。本节所有实例代码及演示效果均使用 Typora 工具完成。

2. 语法详解

2.1 基本的时序图 时序图由以矩形代表参与者,参与者下方代表生存期间的长实线,连接线之间代表消息的箭头和控制焦点组成。

时序图的内容也需要书写在「mermaid」类型代码块之间,如下:

​```mermaid
​```

绘制时序图,必须包含时序图类型声明、对象及消息三个部分。

实例 1:

基本的时序图。

#mermaid-svg-UJ8s9FPbolhmufqS {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-UJ8s9FPbolhmufqS .error-icon{fill:#552222;}#mermaid-svg-UJ8s9FPbolhmufqS .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-UJ8s9FPbolhmufqS .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-UJ8s9FPbolhmufqS .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-UJ8s9FPbolhmufqS .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-UJ8s9FPbolhmufqS .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-UJ8s9FPbolhmufqS .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-UJ8s9FPbolhmufqS .marker{fill:#333333;stroke:#333333;}#mermaid-svg-UJ8s9FPbolhmufqS .marker.cross{stroke:#333333;}#mermaid-svg-UJ8s9FPbolhmufqS svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-UJ8s9FPbolhmufqS .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-UJ8s9FPbolhmufqS text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-UJ8s9FPbolhmufqS .actor-line{stroke:grey;}#mermaid-svg-UJ8s9FPbolhmufqS .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-UJ8s9FPbolhmufqS .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-UJ8s9FPbolhmufqS #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-UJ8s9FPbolhmufqS .sequenceNumber{fill:white;}#mermaid-svg-UJ8s9FPbolhmufqS #sequencenumber{fill:#333;}#mermaid-svg-UJ8s9FPbolhmufqS #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-UJ8s9FPbolhmufqS .messageText{fill:#333;stroke:#333;}#mermaid-svg-UJ8s9FPbolhmufqS .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-UJ8s9FPbolhmufqS .labelText,#mermaid-svg-UJ8s9FPbolhmufqS .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-UJ8s9FPbolhmufqS .loopText,#mermaid-svg-UJ8s9FPbolhmufqS .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-UJ8s9FPbolhmufqS .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-UJ8s9FPbolhmufqS .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-UJ8s9FPbolhmufqS .noteText,#mermaid-svg-UJ8s9FPbolhmufqS .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-UJ8s9FPbolhmufqS .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-UJ8s9FPbolhmufqS .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-UJ8s9FPbolhmufqS .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-UJ8s9FPbolhmufqS .actorPopupMenu{position:absolute;}#mermaid-svg-UJ8s9FPbolhmufqS .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-UJ8s9FPbolhmufqS .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-UJ8s9FPbolhmufqS .actor-man circle,#mermaid-svg-UJ8s9FPbolhmufqS line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-UJ8s9FPbolhmufqS :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 李雷 韩梅梅 Hi LiLei, How do you do? How do you do! 李雷 韩梅梅

实例 2:

以别名形式定义对象。

#mermaid-svg-JcBrUHRzQqT6NdoU {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-JcBrUHRzQqT6NdoU .error-icon{fill:#552222;}#mermaid-svg-JcBrUHRzQqT6NdoU .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-JcBrUHRzQqT6NdoU .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-JcBrUHRzQqT6NdoU .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-JcBrUHRzQqT6NdoU .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-JcBrUHRzQqT6NdoU .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-JcBrUHRzQqT6NdoU .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-JcBrUHRzQqT6NdoU .marker{fill:#333333;stroke:#333333;}#mermaid-svg-JcBrUHRzQqT6NdoU .marker.cross{stroke:#333333;}#mermaid-svg-JcBrUHRzQqT6NdoU svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-JcBrUHRzQqT6NdoU .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-JcBrUHRzQqT6NdoU text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-JcBrUHRzQqT6NdoU .actor-line{stroke:grey;}#mermaid-svg-JcBrUHRzQqT6NdoU .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-JcBrUHRzQqT6NdoU .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-JcBrUHRzQqT6NdoU #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-JcBrUHRzQqT6NdoU .sequenceNumber{fill:white;}#mermaid-svg-JcBrUHRzQqT6NdoU #sequencenumber{fill:#333;}#mermaid-svg-JcBrUHRzQqT6NdoU #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-JcBrUHRzQqT6NdoU .messageText{fill:#333;stroke:#333;}#mermaid-svg-JcBrUHRzQqT6NdoU .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-JcBrUHRzQqT6NdoU .labelText,#mermaid-svg-JcBrUHRzQqT6NdoU .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-JcBrUHRzQqT6NdoU .loopText,#mermaid-svg-JcBrUHRzQqT6NdoU .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-JcBrUHRzQqT6NdoU .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-JcBrUHRzQqT6NdoU .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-JcBrUHRzQqT6NdoU .noteText,#mermaid-svg-JcBrUHRzQqT6NdoU .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-JcBrUHRzQqT6NdoU .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-JcBrUHRzQqT6NdoU .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-JcBrUHRzQqT6NdoU .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-JcBrUHRzQqT6NdoU .actorPopupMenu{position:absolute;}#mermaid-svg-JcBrUHRzQqT6NdoU .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-JcBrUHRzQqT6NdoU .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-JcBrUHRzQqT6NdoU .actor-man circle,#mermaid-svg-JcBrUHRzQqT6NdoU line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-JcBrUHRzQqT6NdoU :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 李雷 韩梅梅 Hello Hanmeimei, how are you? Hello Lilei, I am fine, thank you, and you? I am fine, thank you. 李雷 韩梅梅

时序图中的消息是对参与者之间通信的时机与内容的描述,其声明方式如:[发起者][连线类型][接收者]:消息内容

实例 3:

在时序图中增加聚焦。

#mermaid-svg-dCdAuPv6ZmL843UB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-dCdAuPv6ZmL843UB .error-icon{fill:#552222;}#mermaid-svg-dCdAuPv6ZmL843UB .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-dCdAuPv6ZmL843UB .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-dCdAuPv6ZmL843UB .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-dCdAuPv6ZmL843UB .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-dCdAuPv6ZmL843UB .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-dCdAuPv6ZmL843UB .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-dCdAuPv6ZmL843UB .marker{fill:#333333;stroke:#333333;}#mermaid-svg-dCdAuPv6ZmL843UB .marker.cross{stroke:#333333;}#mermaid-svg-dCdAuPv6ZmL843UB svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-dCdAuPv6ZmL843UB .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-dCdAuPv6ZmL843UB text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-dCdAuPv6ZmL843UB .actor-line{stroke:grey;}#mermaid-svg-dCdAuPv6ZmL843UB .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-dCdAuPv6ZmL843UB .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-dCdAuPv6ZmL843UB #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-dCdAuPv6ZmL843UB .sequenceNumber{fill:white;}#mermaid-svg-dCdAuPv6ZmL843UB #sequencenumber{fill:#333;}#mermaid-svg-dCdAuPv6ZmL843UB #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-dCdAuPv6ZmL843UB .messageText{fill:#333;stroke:#333;}#mermaid-svg-dCdAuPv6ZmL843UB .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-dCdAuPv6ZmL843UB .labelText,#mermaid-svg-dCdAuPv6ZmL843UB .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-dCdAuPv6ZmL843UB .loopText,#mermaid-svg-dCdAuPv6ZmL843UB .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-dCdAuPv6ZmL843UB .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-dCdAuPv6ZmL843UB .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-dCdAuPv6ZmL843UB .noteText,#mermaid-svg-dCdAuPv6ZmL843UB .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-dCdAuPv6ZmL843UB .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-dCdAuPv6ZmL843UB .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-dCdAuPv6ZmL843UB .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-dCdAuPv6ZmL843UB .actorPopupMenu{position:absolute;}#mermaid-svg-dCdAuPv6ZmL843UB .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-dCdAuPv6ZmL843UB .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-dCdAuPv6ZmL843UB .actor-man circle,#mermaid-svg-dCdAuPv6ZmL843UB line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-dCdAuPv6ZmL843UB :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 李雷 韩梅梅 Hello, what's your name? Hello, my name is Hanmeimei! 李雷 韩梅梅

实例 4:

聚焦的简写。

#mermaid-svg-TznsG9PdHe23W80u {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-TznsG9PdHe23W80u .error-icon{fill:#552222;}#mermaid-svg-TznsG9PdHe23W80u .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-TznsG9PdHe23W80u .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-TznsG9PdHe23W80u .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-TznsG9PdHe23W80u .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-TznsG9PdHe23W80u .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-TznsG9PdHe23W80u .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-TznsG9PdHe23W80u .marker{fill:#333333;stroke:#333333;}#mermaid-svg-TznsG9PdHe23W80u .marker.cross{stroke:#333333;}#mermaid-svg-TznsG9PdHe23W80u svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-TznsG9PdHe23W80u .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-TznsG9PdHe23W80u text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-TznsG9PdHe23W80u .actor-line{stroke:grey;}#mermaid-svg-TznsG9PdHe23W80u .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-TznsG9PdHe23W80u .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-TznsG9PdHe23W80u #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-TznsG9PdHe23W80u .sequenceNumber{fill:white;}#mermaid-svg-TznsG9PdHe23W80u #sequencenumber{fill:#333;}#mermaid-svg-TznsG9PdHe23W80u #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-TznsG9PdHe23W80u .messageText{fill:#333;stroke:#333;}#mermaid-svg-TznsG9PdHe23W80u .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-TznsG9PdHe23W80u .labelText,#mermaid-svg-TznsG9PdHe23W80u .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-TznsG9PdHe23W80u .loopText,#mermaid-svg-TznsG9PdHe23W80u .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-TznsG9PdHe23W80u .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-TznsG9PdHe23W80u .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-TznsG9PdHe23W80u .noteText,#mermaid-svg-TznsG9PdHe23W80u .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-TznsG9PdHe23W80u .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-TznsG9PdHe23W80u .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-TznsG9PdHe23W80u .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-TznsG9PdHe23W80u .actorPopupMenu{position:absolute;}#mermaid-svg-TznsG9PdHe23W80u .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-TznsG9PdHe23W80u .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-TznsG9PdHe23W80u .actor-man circle,#mermaid-svg-TznsG9PdHe23W80u line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-TznsG9PdHe23W80u :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 李雷 韩梅梅 Hello, what's your name? Hello, my name is Hanmeimei! 李雷 韩梅梅

实例 5:

在参与者的生命线右侧增加备注。

#mermaid-svg-580TAfKqshPYB5Ru {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-580TAfKqshPYB5Ru .error-icon{fill:#552222;}#mermaid-svg-580TAfKqshPYB5Ru .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-580TAfKqshPYB5Ru .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-580TAfKqshPYB5Ru .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-580TAfKqshPYB5Ru .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-580TAfKqshPYB5Ru .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-580TAfKqshPYB5Ru .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-580TAfKqshPYB5Ru .marker{fill:#333333;stroke:#333333;}#mermaid-svg-580TAfKqshPYB5Ru .marker.cross{stroke:#333333;}#mermaid-svg-580TAfKqshPYB5Ru svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-580TAfKqshPYB5Ru .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-580TAfKqshPYB5Ru text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-580TAfKqshPYB5Ru .actor-line{stroke:grey;}#mermaid-svg-580TAfKqshPYB5Ru .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-580TAfKqshPYB5Ru .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-580TAfKqshPYB5Ru #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-580TAfKqshPYB5Ru .sequenceNumber{fill:white;}#mermaid-svg-580TAfKqshPYB5Ru #sequencenumber{fill:#333;}#mermaid-svg-580TAfKqshPYB5Ru #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-580TAfKqshPYB5Ru .messageText{fill:#333;stroke:#333;}#mermaid-svg-580TAfKqshPYB5Ru .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-580TAfKqshPYB5Ru .labelText,#mermaid-svg-580TAfKqshPYB5Ru .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-580TAfKqshPYB5Ru .loopText,#mermaid-svg-580TAfKqshPYB5Ru .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-580TAfKqshPYB5Ru .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-580TAfKqshPYB5Ru .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-580TAfKqshPYB5Ru .noteText,#mermaid-svg-580TAfKqshPYB5Ru .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-580TAfKqshPYB5Ru .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-580TAfKqshPYB5Ru .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-580TAfKqshPYB5Ru .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-580TAfKqshPYB5Ru .actorPopupMenu{position:absolute;}#mermaid-svg-580TAfKqshPYB5Ru .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-580TAfKqshPYB5Ru .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-580TAfKqshPYB5Ru .actor-man circle,#mermaid-svg-580TAfKqshPYB5Ru line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-580TAfKqshPYB5Ru :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 李雷 韩梅梅 Hi Hanmeimei, How do you do? Lesson 1 How do you do! 李雷 韩梅梅

实例 6:

在参与者的生命线之上增加备注。

#mermaid-svg-ojTWy93aX213uyIx {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ojTWy93aX213uyIx .error-icon{fill:#552222;}#mermaid-svg-ojTWy93aX213uyIx .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ojTWy93aX213uyIx .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ojTWy93aX213uyIx .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ojTWy93aX213uyIx .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ojTWy93aX213uyIx .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ojTWy93aX213uyIx .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ojTWy93aX213uyIx .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ojTWy93aX213uyIx .marker.cross{stroke:#333333;}#mermaid-svg-ojTWy93aX213uyIx svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ojTWy93aX213uyIx .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ojTWy93aX213uyIx text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-ojTWy93aX213uyIx .actor-line{stroke:grey;}#mermaid-svg-ojTWy93aX213uyIx .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-ojTWy93aX213uyIx .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-ojTWy93aX213uyIx #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-ojTWy93aX213uyIx .sequenceNumber{fill:white;}#mermaid-svg-ojTWy93aX213uyIx #sequencenumber{fill:#333;}#mermaid-svg-ojTWy93aX213uyIx #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-ojTWy93aX213uyIx .messageText{fill:#333;stroke:#333;}#mermaid-svg-ojTWy93aX213uyIx .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ojTWy93aX213uyIx .labelText,#mermaid-svg-ojTWy93aX213uyIx .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-ojTWy93aX213uyIx .loopText,#mermaid-svg-ojTWy93aX213uyIx .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-ojTWy93aX213uyIx .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-ojTWy93aX213uyIx .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-ojTWy93aX213uyIx .noteText,#mermaid-svg-ojTWy93aX213uyIx .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-ojTWy93aX213uyIx .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ojTWy93aX213uyIx .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ojTWy93aX213uyIx .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ojTWy93aX213uyIx .actorPopupMenu{position:absolute;}#mermaid-svg-ojTWy93aX213uyIx .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-ojTWy93aX213uyIx .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ojTWy93aX213uyIx .actor-man circle,#mermaid-svg-ojTWy93aX213uyIx line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-ojTWy93aX213uyIx :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 李雷 韩梅梅 Hi Hanmeimei, How do you do? Lesson 1 How do you do! 李雷 韩梅梅

2.2 时序图的逻辑

  • 循环 循环代表时序图中的一项活动,有可能执行一次,有可能重复执行多次,每次在临界点判断循环的条件是否满足。

实例 7:

#mermaid-svg-fe21IBW0M7RWmUM3 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-fe21IBW0M7RWmUM3 .error-icon{fill:#552222;}#mermaid-svg-fe21IBW0M7RWmUM3 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-fe21IBW0M7RWmUM3 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-fe21IBW0M7RWmUM3 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-fe21IBW0M7RWmUM3 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-fe21IBW0M7RWmUM3 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-fe21IBW0M7RWmUM3 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-fe21IBW0M7RWmUM3 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-fe21IBW0M7RWmUM3 .marker.cross{stroke:#333333;}#mermaid-svg-fe21IBW0M7RWmUM3 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-fe21IBW0M7RWmUM3 .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-fe21IBW0M7RWmUM3 text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-fe21IBW0M7RWmUM3 .actor-line{stroke:grey;}#mermaid-svg-fe21IBW0M7RWmUM3 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-fe21IBW0M7RWmUM3 .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-fe21IBW0M7RWmUM3 #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-fe21IBW0M7RWmUM3 .sequenceNumber{fill:white;}#mermaid-svg-fe21IBW0M7RWmUM3 #sequencenumber{fill:#333;}#mermaid-svg-fe21IBW0M7RWmUM3 #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-fe21IBW0M7RWmUM3 .messageText{fill:#333;stroke:#333;}#mermaid-svg-fe21IBW0M7RWmUM3 .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-fe21IBW0M7RWmUM3 .labelText,#mermaid-svg-fe21IBW0M7RWmUM3 .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-fe21IBW0M7RWmUM3 .loopText,#mermaid-svg-fe21IBW0M7RWmUM3 .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-fe21IBW0M7RWmUM3 .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-fe21IBW0M7RWmUM3 .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-fe21IBW0M7RWmUM3 .noteText,#mermaid-svg-fe21IBW0M7RWmUM3 .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-fe21IBW0M7RWmUM3 .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-fe21IBW0M7RWmUM3 .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-fe21IBW0M7RWmUM3 .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-fe21IBW0M7RWmUM3 .actorPopupMenu{position:absolute;}#mermaid-svg-fe21IBW0M7RWmUM3 .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-fe21IBW0M7RWmUM3 .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-fe21IBW0M7RWmUM3 .actor-man circle,#mermaid-svg-fe21IBW0M7RWmUM3 line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-fe21IBW0M7RWmUM3 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 李雷 韩梅梅 Hello Hanmeimei, how are you? Great! loop [不停地说] 李雷 韩梅梅
3. 使用场景及应用实例

时序图作为展示对象交互顺序的工具,可以更直观的描述顺序及并发过程。

实例 9:

学生使用教务系统时序图展示。

#mermaid-svg-8fcF9R1a0fHvgSep {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8fcF9R1a0fHvgSep .error-icon{fill:#552222;}#mermaid-svg-8fcF9R1a0fHvgSep .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-8fcF9R1a0fHvgSep .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-8fcF9R1a0fHvgSep .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-8fcF9R1a0fHvgSep .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-8fcF9R1a0fHvgSep .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-8fcF9R1a0fHvgSep .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-8fcF9R1a0fHvgSep .marker{fill:#333333;stroke:#333333;}#mermaid-svg-8fcF9R1a0fHvgSep .marker.cross{stroke:#333333;}#mermaid-svg-8fcF9R1a0fHvgSep svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-8fcF9R1a0fHvgSep .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-8fcF9R1a0fHvgSep text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-8fcF9R1a0fHvgSep .actor-line{stroke:grey;}#mermaid-svg-8fcF9R1a0fHvgSep .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-8fcF9R1a0fHvgSep .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-8fcF9R1a0fHvgSep #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-8fcF9R1a0fHvgSep .sequenceNumber{fill:white;}#mermaid-svg-8fcF9R1a0fHvgSep #sequencenumber{fill:#333;}#mermaid-svg-8fcF9R1a0fHvgSep #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-8fcF9R1a0fHvgSep .messageText{fill:#333;stroke:#333;}#mermaid-svg-8fcF9R1a0fHvgSep .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-8fcF9R1a0fHvgSep .labelText,#mermaid-svg-8fcF9R1a0fHvgSep .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-8fcF9R1a0fHvgSep .loopText,#mermaid-svg-8fcF9R1a0fHvgSep .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-8fcF9R1a0fHvgSep .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-8fcF9R1a0fHvgSep .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-8fcF9R1a0fHvgSep .noteText,#mermaid-svg-8fcF9R1a0fHvgSep .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-8fcF9R1a0fHvgSep .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-8fcF9R1a0fHvgSep .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-8fcF9R1a0fHvgSep .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-8fcF9R1a0fHvgSep .actorPopupMenu{position:absolute;}#mermaid-svg-8fcF9R1a0fHvgSep .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-8fcF9R1a0fHvgSep .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-8fcF9R1a0fHvgSep .actor-man circle,#mermaid-svg-8fcF9R1a0fHvgSep line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-8fcF9R1a0fHvgSep :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 学生 教务系统 课程 成绩 用户名/密码 opt [认证] 请求课程列表 获取课程列表 返回课程列表 获取成绩信息 返回成绩信息 显示成绩 学生 教务系统 课程 成绩
4. 小结
  • 时序图是用来描述交互过程的图形组合,描述了对象间的动态协作;
  • 时序图最核心的元素是对象、生命线和消息;
  • 我们可以通过判断、循环、并行描述复杂的消息传递及处理流程。
关注
打赏
1658837700
查看更多评论
立即登录/注册

微信扫码登录

0.0641s