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. 小结
- 时序图是用来描述交互过程的图形组合，描述了对象间的动态协作；
- 时序图最核心的元素是对象、生命线和消息；
- 我们可以通过判断、循环、并行描述复杂的消息传递及处理流程。
