阿里巴巴网站的建设内容,wordpress 资源文件,Paas网站建设,wordpress后台能登陆前台却不行CSDN Markdown之时序图sequenceDiagram详解 序列图 sequenceDiagram参与者与组参与者 participant拟人符号 actor别名 as组 box 消息(连线)激活/失活 activate/deactivate备注 Note循环 loop备选 Alt并行 par临界区 critical中断 break背景高亮 rect注释 %%转义字符的实体代码序… CSDN Markdown之时序图sequenceDiagram详解 序列图 sequenceDiagram参与者与组参与者 participant拟人符号 actor别名 as组 box 消息(连线)激活/失活 activate/deactivate备注 Note循环 loop备选 Alt并行 par临界区 critical中断 break背景高亮 rect注释 %%转义字符的实体代码序号 autonumber人物菜单 link高级菜单语法 links 样式使用的部分类表单示例 配置可能的配置参数: 序列图 sequenceDiagram 序列图是一种交互图显示进程如何相互操作以及按什么顺序操作。 Mermaid 可以渲染序列图.
代码: mermaid sequenceDiagram 张三-李四: 李女士, 最近过得好吗? 李四–张三: 我很好! 张三-)李四: 待会见! #mermaid-svg-BQMB3UPT8Qg9g1HM {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-BQMB3UPT8Qg9g1HM .error-icon{fill:#552222;}#mermaid-svg-BQMB3UPT8Qg9g1HM .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-BQMB3UPT8Qg9g1HM .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-BQMB3UPT8Qg9g1HM .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-BQMB3UPT8Qg9g1HM .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-BQMB3UPT8Qg9g1HM .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-BQMB3UPT8Qg9g1HM .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-BQMB3UPT8Qg9g1HM .marker{fill:#333333;stroke:#333333;}#mermaid-svg-BQMB3UPT8Qg9g1HM .marker.cross{stroke:#333333;}#mermaid-svg-BQMB3UPT8Qg9g1HM svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-BQMB3UPT8Qg9g1HM .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-BQMB3UPT8Qg9g1HM text.actortspan{fill:black;stroke:none;}#mermaid-svg-BQMB3UPT8Qg9g1HM .actor-line{stroke:grey;}#mermaid-svg-BQMB3UPT8Qg9g1HM .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-BQMB3UPT8Qg9g1HM .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-BQMB3UPT8Qg9g1HM #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-BQMB3UPT8Qg9g1HM .sequenceNumber{fill:white;}#mermaid-svg-BQMB3UPT8Qg9g1HM #sequencenumber{fill:#333;}#mermaid-svg-BQMB3UPT8Qg9g1HM #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-BQMB3UPT8Qg9g1HM .messageText{fill:#333;stroke:#333;}#mermaid-svg-BQMB3UPT8Qg9g1HM .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-BQMB3UPT8Qg9g1HM .labelText,#mermaid-svg-BQMB3UPT8Qg9g1HM .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-BQMB3UPT8Qg9g1HM .loopText,#mermaid-svg-BQMB3UPT8Qg9g1HM .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-BQMB3UPT8Qg9g1HM .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-BQMB3UPT8Qg9g1HM .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-BQMB3UPT8Qg9g1HM .noteText,#mermaid-svg-BQMB3UPT8Qg9g1HM .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-BQMB3UPT8Qg9g1HM .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-BQMB3UPT8Qg9g1HM .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-BQMB3UPT8Qg9g1HM .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-BQMB3UPT8Qg9g1HM .actorPopupMenu{position:absolute;}#mermaid-svg-BQMB3UPT8Qg9g1HM .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-BQMB3UPT8Qg9g1HM .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-BQMB3UPT8Qg9g1HM .actor-man circle,#mermaid-svg-BQMB3UPT8Qg9g1HM line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-BQMB3UPT8Qg9g1HM :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 李女士, 最近过得好吗? 1 我很好! 2 待会见! 3 张三 李四 备注 注意事项:由于mermaid 语言的脚本编写方式end一词可能会破坏图表。 如果必须使用end作为文本必须使用括号()、引号或方括号{},[]将单词end括起来。即(end), [end], {end}. 参与者与组
参与者 participant
参与者可以像本页的第一个示例中那样被隐式定义。参与者或人物在图表源文本中会隐式按交互记录顺序依次呈现。有时您可能希望参与者不按交互记录依次呈现。可以通过以下操作指定演员的出场顺序
代码: mermaid sequenceDiagram participant 张三 participant 李四 张三-李四: 你好李女士 李四-张三: 你好张先生 #mermaid-svg-SRqCzSpGkJF3WyUI {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SRqCzSpGkJF3WyUI .error-icon{fill:#552222;}#mermaid-svg-SRqCzSpGkJF3WyUI .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-SRqCzSpGkJF3WyUI .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-SRqCzSpGkJF3WyUI .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-SRqCzSpGkJF3WyUI .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-SRqCzSpGkJF3WyUI .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-SRqCzSpGkJF3WyUI .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-SRqCzSpGkJF3WyUI .marker{fill:#333333;stroke:#333333;}#mermaid-svg-SRqCzSpGkJF3WyUI .marker.cross{stroke:#333333;}#mermaid-svg-SRqCzSpGkJF3WyUI svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-SRqCzSpGkJF3WyUI .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-SRqCzSpGkJF3WyUI text.actortspan{fill:black;stroke:none;}#mermaid-svg-SRqCzSpGkJF3WyUI .actor-line{stroke:grey;}#mermaid-svg-SRqCzSpGkJF3WyUI .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-SRqCzSpGkJF3WyUI .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-SRqCzSpGkJF3WyUI #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-SRqCzSpGkJF3WyUI .sequenceNumber{fill:white;}#mermaid-svg-SRqCzSpGkJF3WyUI #sequencenumber{fill:#333;}#mermaid-svg-SRqCzSpGkJF3WyUI #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-SRqCzSpGkJF3WyUI .messageText{fill:#333;stroke:#333;}#mermaid-svg-SRqCzSpGkJF3WyUI .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-SRqCzSpGkJF3WyUI .labelText,#mermaid-svg-SRqCzSpGkJF3WyUI .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-SRqCzSpGkJF3WyUI .loopText,#mermaid-svg-SRqCzSpGkJF3WyUI .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-SRqCzSpGkJF3WyUI .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-SRqCzSpGkJF3WyUI .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-SRqCzSpGkJF3WyUI .noteText,#mermaid-svg-SRqCzSpGkJF3WyUI .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-SRqCzSpGkJF3WyUI .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-SRqCzSpGkJF3WyUI .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-SRqCzSpGkJF3WyUI .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-SRqCzSpGkJF3WyUI .actorPopupMenu{position:absolute;}#mermaid-svg-SRqCzSpGkJF3WyUI .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-SRqCzSpGkJF3WyUI .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-SRqCzSpGkJF3WyUI .actor-man circle,#mermaid-svg-SRqCzSpGkJF3WyUI line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-SRqCzSpGkJF3WyUI :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 你好李女士 1 你好张先生 2 张三 李四 拟人符号 actor
如果您特别想使用actor符号替换掉带文本的矩形框可以按照下面的说明来书写actor语句。
代码: mermaid sequenceDiagram actor 张三 actor 李四 张三-李四: 李女士您好 李四-张三: 张先生您好 #mermaid-svg-emWoJ8PbIQPWOgHZ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-emWoJ8PbIQPWOgHZ .error-icon{fill:#552222;}#mermaid-svg-emWoJ8PbIQPWOgHZ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-emWoJ8PbIQPWOgHZ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-emWoJ8PbIQPWOgHZ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-emWoJ8PbIQPWOgHZ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-emWoJ8PbIQPWOgHZ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-emWoJ8PbIQPWOgHZ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-emWoJ8PbIQPWOgHZ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-emWoJ8PbIQPWOgHZ .marker.cross{stroke:#333333;}#mermaid-svg-emWoJ8PbIQPWOgHZ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-emWoJ8PbIQPWOgHZ .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-emWoJ8PbIQPWOgHZ text.actortspan{fill:black;stroke:none;}#mermaid-svg-emWoJ8PbIQPWOgHZ .actor-line{stroke:grey;}#mermaid-svg-emWoJ8PbIQPWOgHZ .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-emWoJ8PbIQPWOgHZ .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-emWoJ8PbIQPWOgHZ #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-emWoJ8PbIQPWOgHZ .sequenceNumber{fill:white;}#mermaid-svg-emWoJ8PbIQPWOgHZ #sequencenumber{fill:#333;}#mermaid-svg-emWoJ8PbIQPWOgHZ #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-emWoJ8PbIQPWOgHZ .messageText{fill:#333;stroke:#333;}#mermaid-svg-emWoJ8PbIQPWOgHZ .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-emWoJ8PbIQPWOgHZ .labelText,#mermaid-svg-emWoJ8PbIQPWOgHZ .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-emWoJ8PbIQPWOgHZ .loopText,#mermaid-svg-emWoJ8PbIQPWOgHZ .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-emWoJ8PbIQPWOgHZ .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-emWoJ8PbIQPWOgHZ .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-emWoJ8PbIQPWOgHZ .noteText,#mermaid-svg-emWoJ8PbIQPWOgHZ .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-emWoJ8PbIQPWOgHZ .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-emWoJ8PbIQPWOgHZ .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-emWoJ8PbIQPWOgHZ .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-emWoJ8PbIQPWOgHZ .actorPopupMenu{position:absolute;}#mermaid-svg-emWoJ8PbIQPWOgHZ .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-emWoJ8PbIQPWOgHZ .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-emWoJ8PbIQPWOgHZ .actor-man circle,#mermaid-svg-emWoJ8PbIQPWOgHZ line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-emWoJ8PbIQPWOgHZ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 李女士您好 1 张先生您好 2 张三 李四 别名 as
参与者可以有个变量名和描述性的标签名
代码: mermaid sequenceDiagram participant A as 张三 participant B as 李四 A-B: 李女士, 最近过得好吗? B-A: 嗯我很好! #mermaid-svg-8brbzcwqrWyNB1dg {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8brbzcwqrWyNB1dg .error-icon{fill:#552222;}#mermaid-svg-8brbzcwqrWyNB1dg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-8brbzcwqrWyNB1dg .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-8brbzcwqrWyNB1dg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-8brbzcwqrWyNB1dg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-8brbzcwqrWyNB1dg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-8brbzcwqrWyNB1dg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-8brbzcwqrWyNB1dg .marker{fill:#333333;stroke:#333333;}#mermaid-svg-8brbzcwqrWyNB1dg .marker.cross{stroke:#333333;}#mermaid-svg-8brbzcwqrWyNB1dg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-8brbzcwqrWyNB1dg .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-8brbzcwqrWyNB1dg text.actortspan{fill:black;stroke:none;}#mermaid-svg-8brbzcwqrWyNB1dg .actor-line{stroke:grey;}#mermaid-svg-8brbzcwqrWyNB1dg .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-8brbzcwqrWyNB1dg .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-8brbzcwqrWyNB1dg #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-8brbzcwqrWyNB1dg .sequenceNumber{fill:white;}#mermaid-svg-8brbzcwqrWyNB1dg #sequencenumber{fill:#333;}#mermaid-svg-8brbzcwqrWyNB1dg #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-8brbzcwqrWyNB1dg .messageText{fill:#333;stroke:#333;}#mermaid-svg-8brbzcwqrWyNB1dg .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-8brbzcwqrWyNB1dg .labelText,#mermaid-svg-8brbzcwqrWyNB1dg .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-8brbzcwqrWyNB1dg .loopText,#mermaid-svg-8brbzcwqrWyNB1dg .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-8brbzcwqrWyNB1dg .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-8brbzcwqrWyNB1dg .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-8brbzcwqrWyNB1dg .noteText,#mermaid-svg-8brbzcwqrWyNB1dg .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-8brbzcwqrWyNB1dg .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-8brbzcwqrWyNB1dg .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-8brbzcwqrWyNB1dg .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-8brbzcwqrWyNB1dg .actorPopupMenu{position:absolute;}#mermaid-svg-8brbzcwqrWyNB1dg .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-8brbzcwqrWyNB1dg .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-8brbzcwqrWyNB1dg .actor-man circle,#mermaid-svg-8brbzcwqrWyNB1dg line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-8brbzcwqrWyNB1dg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 李女士, 最近过得好吗? 1 嗯我很好! 2 张三 李四 组 box
参与者可以分组在垂直框中。您可以使用以下符号定义颜色如果没有设置颜色则默认为透明。
box Aqua 组描述
... 参与者...
end
box 没有设置颜色的组
... 参与者...
end
box rgb(33,66,99)
... 参与者...
end如果你的组名是一种颜色你可以强制设置组的颜色为transparent透明
box transparent Aqua
... 参与者...
end代码:
sequenceDiagrambox Purple 张三 李四participant 张三participant 李四endbox 另外一组participant 王五participant 赵六end张三-李四: 李女士,最近身体怎么样?李四-张三: 我很好!张三-王五: 王先生, 赵女士怎么样了?王五-赵六: 赵女士,最近身体怎么样?消息(连线)
消息有两种显示形式既可以显示在实线上也可以显示在虚线上
[Actor][Arrow][Actor]:Message text目前支持八种类型的连接线:
类型描述-没有箭头的实线–没有箭头的虚线-带箭头的实线–带箭头的虚线-x末端带有×的实线–x末端带有×的虚线-)末端带有开放箭头的实线 (异步)–)末端带有开放箭头的虚线 (异步) #mermaid-svg-SgKRrHMMsonmkQbC {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SgKRrHMMsonmkQbC .error-icon{fill:#552222;}#mermaid-svg-SgKRrHMMsonmkQbC .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-SgKRrHMMsonmkQbC .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-SgKRrHMMsonmkQbC .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-SgKRrHMMsonmkQbC .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-SgKRrHMMsonmkQbC .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-SgKRrHMMsonmkQbC .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-SgKRrHMMsonmkQbC .marker{fill:#333333;stroke:#333333;}#mermaid-svg-SgKRrHMMsonmkQbC .marker.cross{stroke:#333333;}#mermaid-svg-SgKRrHMMsonmkQbC svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-SgKRrHMMsonmkQbC .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-SgKRrHMMsonmkQbC text.actortspan{fill:black;stroke:none;}#mermaid-svg-SgKRrHMMsonmkQbC .actor-line{stroke:grey;}#mermaid-svg-SgKRrHMMsonmkQbC .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-SgKRrHMMsonmkQbC .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-SgKRrHMMsonmkQbC #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-SgKRrHMMsonmkQbC .sequenceNumber{fill:white;}#mermaid-svg-SgKRrHMMsonmkQbC #sequencenumber{fill:#333;}#mermaid-svg-SgKRrHMMsonmkQbC #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-SgKRrHMMsonmkQbC .messageText{fill:#333;stroke:#333;}#mermaid-svg-SgKRrHMMsonmkQbC .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-SgKRrHMMsonmkQbC .labelText,#mermaid-svg-SgKRrHMMsonmkQbC .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-SgKRrHMMsonmkQbC .loopText,#mermaid-svg-SgKRrHMMsonmkQbC .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-SgKRrHMMsonmkQbC .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-SgKRrHMMsonmkQbC .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-SgKRrHMMsonmkQbC .noteText,#mermaid-svg-SgKRrHMMsonmkQbC .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-SgKRrHMMsonmkQbC .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-SgKRrHMMsonmkQbC .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-SgKRrHMMsonmkQbC .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-SgKRrHMMsonmkQbC .actorPopupMenu{position:absolute;}#mermaid-svg-SgKRrHMMsonmkQbC .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-SgKRrHMMsonmkQbC .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-SgKRrHMMsonmkQbC .actor-man circle,#mermaid-svg-SgKRrHMMsonmkQbC line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-SgKRrHMMsonmkQbC :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 - 没有箭头的实线 1 --没有箭头的虚线 2 -带箭头的实线 3 --带箭头的虚线 4 -x末端带有×的实线 5 --x末端带有×的虚线 6 -)末端带有开放箭头的实线 (异步) 7 --)末端带有开放箭头的虚线 (异步) 8 张三 李四 激活/失活 activate/deactivate
可以标识参与者对话的开始与结束。(de)activation 语法如下
代码: mermaid sequenceDiagram 张三-李四: 李女士, 最近过得好吗? activate 李四 李四--张三: 嗯我很好! deactivate 李四 #mermaid-svg-k7b8GV0GfuEanhXb {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-k7b8GV0GfuEanhXb .error-icon{fill:#552222;}#mermaid-svg-k7b8GV0GfuEanhXb .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-k7b8GV0GfuEanhXb .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-k7b8GV0GfuEanhXb .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-k7b8GV0GfuEanhXb .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-k7b8GV0GfuEanhXb .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-k7b8GV0GfuEanhXb .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-k7b8GV0GfuEanhXb .marker{fill:#333333;stroke:#333333;}#mermaid-svg-k7b8GV0GfuEanhXb .marker.cross{stroke:#333333;}#mermaid-svg-k7b8GV0GfuEanhXb svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-k7b8GV0GfuEanhXb .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-k7b8GV0GfuEanhXb text.actortspan{fill:black;stroke:none;}#mermaid-svg-k7b8GV0GfuEanhXb .actor-line{stroke:grey;}#mermaid-svg-k7b8GV0GfuEanhXb .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-k7b8GV0GfuEanhXb .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-k7b8GV0GfuEanhXb #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-k7b8GV0GfuEanhXb .sequenceNumber{fill:white;}#mermaid-svg-k7b8GV0GfuEanhXb #sequencenumber{fill:#333;}#mermaid-svg-k7b8GV0GfuEanhXb #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-k7b8GV0GfuEanhXb .messageText{fill:#333;stroke:#333;}#mermaid-svg-k7b8GV0GfuEanhXb .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-k7b8GV0GfuEanhXb .labelText,#mermaid-svg-k7b8GV0GfuEanhXb .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-k7b8GV0GfuEanhXb .loopText,#mermaid-svg-k7b8GV0GfuEanhXb .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-k7b8GV0GfuEanhXb .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-k7b8GV0GfuEanhXb .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-k7b8GV0GfuEanhXb .noteText,#mermaid-svg-k7b8GV0GfuEanhXb .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-k7b8GV0GfuEanhXb .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-k7b8GV0GfuEanhXb .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-k7b8GV0GfuEanhXb .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-k7b8GV0GfuEanhXb .actorPopupMenu{position:absolute;}#mermaid-svg-k7b8GV0GfuEanhXb .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-k7b8GV0GfuEanhXb .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-k7b8GV0GfuEanhXb .actor-man circle,#mermaid-svg-k7b8GV0GfuEanhXb line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-k7b8GV0GfuEanhXb :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 李女士, 最近过得好吗? 1 嗯我很好! 2 张三 李四 还有一种快捷方式表示法在消息箭头后加上/-后缀
代码: mermaid sequenceDiagram 张三-李四: 李女士, 最近过得好吗? 李四---张三: 嗯我很好! #mermaid-svg-XPIH6oZuErgJNqjg {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-XPIH6oZuErgJNqjg .error-icon{fill:#552222;}#mermaid-svg-XPIH6oZuErgJNqjg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-XPIH6oZuErgJNqjg .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-XPIH6oZuErgJNqjg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-XPIH6oZuErgJNqjg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-XPIH6oZuErgJNqjg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-XPIH6oZuErgJNqjg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-XPIH6oZuErgJNqjg .marker{fill:#333333;stroke:#333333;}#mermaid-svg-XPIH6oZuErgJNqjg .marker.cross{stroke:#333333;}#mermaid-svg-XPIH6oZuErgJNqjg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-XPIH6oZuErgJNqjg .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-XPIH6oZuErgJNqjg text.actortspan{fill:black;stroke:none;}#mermaid-svg-XPIH6oZuErgJNqjg .actor-line{stroke:grey;}#mermaid-svg-XPIH6oZuErgJNqjg .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-XPIH6oZuErgJNqjg .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-XPIH6oZuErgJNqjg #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-XPIH6oZuErgJNqjg .sequenceNumber{fill:white;}#mermaid-svg-XPIH6oZuErgJNqjg #sequencenumber{fill:#333;}#mermaid-svg-XPIH6oZuErgJNqjg #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-XPIH6oZuErgJNqjg .messageText{fill:#333;stroke:#333;}#mermaid-svg-XPIH6oZuErgJNqjg .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-XPIH6oZuErgJNqjg .labelText,#mermaid-svg-XPIH6oZuErgJNqjg .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-XPIH6oZuErgJNqjg .loopText,#mermaid-svg-XPIH6oZuErgJNqjg .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-XPIH6oZuErgJNqjg .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-XPIH6oZuErgJNqjg .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-XPIH6oZuErgJNqjg .noteText,#mermaid-svg-XPIH6oZuErgJNqjg .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-XPIH6oZuErgJNqjg .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-XPIH6oZuErgJNqjg .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-XPIH6oZuErgJNqjg .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-XPIH6oZuErgJNqjg .actorPopupMenu{position:absolute;}#mermaid-svg-XPIH6oZuErgJNqjg .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-XPIH6oZuErgJNqjg .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-XPIH6oZuErgJNqjg .actor-man circle,#mermaid-svg-XPIH6oZuErgJNqjg line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-XPIH6oZuErgJNqjg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 李女士, 最近过得好吗? 1 嗯我很好! 2 张三 李四 同一参与者可以进行堆叠激活:
代码: mermaid sequenceDiagram 张三-李四: 李女士, 最近过得好吗? 张三-李四: 李女士, 你能听到我说话吗? 李四---张三: 张先生你好我能听见你说话! 李四---张三: 我过得非常好! #mermaid-svg-uewNtTr2lPk5GVuN {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-uewNtTr2lPk5GVuN .error-icon{fill:#552222;}#mermaid-svg-uewNtTr2lPk5GVuN .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-uewNtTr2lPk5GVuN .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-uewNtTr2lPk5GVuN .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-uewNtTr2lPk5GVuN .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-uewNtTr2lPk5GVuN .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-uewNtTr2lPk5GVuN .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-uewNtTr2lPk5GVuN .marker{fill:#333333;stroke:#333333;}#mermaid-svg-uewNtTr2lPk5GVuN .marker.cross{stroke:#333333;}#mermaid-svg-uewNtTr2lPk5GVuN svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-uewNtTr2lPk5GVuN .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-uewNtTr2lPk5GVuN text.actortspan{fill:black;stroke:none;}#mermaid-svg-uewNtTr2lPk5GVuN .actor-line{stroke:grey;}#mermaid-svg-uewNtTr2lPk5GVuN .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-uewNtTr2lPk5GVuN .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-uewNtTr2lPk5GVuN #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-uewNtTr2lPk5GVuN .sequenceNumber{fill:white;}#mermaid-svg-uewNtTr2lPk5GVuN #sequencenumber{fill:#333;}#mermaid-svg-uewNtTr2lPk5GVuN #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-uewNtTr2lPk5GVuN .messageText{fill:#333;stroke:#333;}#mermaid-svg-uewNtTr2lPk5GVuN .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-uewNtTr2lPk5GVuN .labelText,#mermaid-svg-uewNtTr2lPk5GVuN .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-uewNtTr2lPk5GVuN .loopText,#mermaid-svg-uewNtTr2lPk5GVuN .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-uewNtTr2lPk5GVuN .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-uewNtTr2lPk5GVuN .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-uewNtTr2lPk5GVuN .noteText,#mermaid-svg-uewNtTr2lPk5GVuN .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-uewNtTr2lPk5GVuN .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-uewNtTr2lPk5GVuN .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-uewNtTr2lPk5GVuN .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-uewNtTr2lPk5GVuN .actorPopupMenu{position:absolute;}#mermaid-svg-uewNtTr2lPk5GVuN .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-uewNtTr2lPk5GVuN .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-uewNtTr2lPk5GVuN .actor-man circle,#mermaid-svg-uewNtTr2lPk5GVuN line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-uewNtTr2lPk5GVuN :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 李女士, 最近过得好吗? 1 李女士, 你能听到我说话吗? 2 张先生你好我能听见你说话! 3 我过得非常好! 4 张三 李四 备注 Note
你可以在序列图中添加备注。这是通过以下语句实现
Note [ right of | left of | over ] [Actor]: 备注内容中的文本请参阅下面的示例:
代码: mermaid sequenceDiagram participant 张三 Note right of 张三: 备注中的文本 #mermaid-svg-m4JMMNuieqOObnog {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-m4JMMNuieqOObnog .error-icon{fill:#552222;}#mermaid-svg-m4JMMNuieqOObnog .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-m4JMMNuieqOObnog .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-m4JMMNuieqOObnog .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-m4JMMNuieqOObnog .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-m4JMMNuieqOObnog .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-m4JMMNuieqOObnog .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-m4JMMNuieqOObnog .marker{fill:#333333;stroke:#333333;}#mermaid-svg-m4JMMNuieqOObnog .marker.cross{stroke:#333333;}#mermaid-svg-m4JMMNuieqOObnog svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-m4JMMNuieqOObnog .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-m4JMMNuieqOObnog text.actortspan{fill:black;stroke:none;}#mermaid-svg-m4JMMNuieqOObnog .actor-line{stroke:grey;}#mermaid-svg-m4JMMNuieqOObnog .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-m4JMMNuieqOObnog .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-m4JMMNuieqOObnog #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-m4JMMNuieqOObnog .sequenceNumber{fill:white;}#mermaid-svg-m4JMMNuieqOObnog #sequencenumber{fill:#333;}#mermaid-svg-m4JMMNuieqOObnog #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-m4JMMNuieqOObnog .messageText{fill:#333;stroke:#333;}#mermaid-svg-m4JMMNuieqOObnog .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-m4JMMNuieqOObnog .labelText,#mermaid-svg-m4JMMNuieqOObnog .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-m4JMMNuieqOObnog .loopText,#mermaid-svg-m4JMMNuieqOObnog .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-m4JMMNuieqOObnog .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-m4JMMNuieqOObnog .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-m4JMMNuieqOObnog .noteText,#mermaid-svg-m4JMMNuieqOObnog .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-m4JMMNuieqOObnog .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-m4JMMNuieqOObnog .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-m4JMMNuieqOObnog .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-m4JMMNuieqOObnog .actorPopupMenu{position:absolute;}#mermaid-svg-m4JMMNuieqOObnog .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-m4JMMNuieqOObnog .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-m4JMMNuieqOObnog .actor-man circle,#mermaid-svg-m4JMMNuieqOObnog line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-m4JMMNuieqOObnog :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 备注中的文本 张三 还可以创建跨越两个参与者的备注
代码: mermaid sequenceDiagram 张三-李四: 李女士, 最近过得好吗? Note over 张三,李四: 常见的互动 #mermaid-svg-lcKTTVWJkjCVwQVn {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-lcKTTVWJkjCVwQVn .error-icon{fill:#552222;}#mermaid-svg-lcKTTVWJkjCVwQVn .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-lcKTTVWJkjCVwQVn .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-lcKTTVWJkjCVwQVn .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-lcKTTVWJkjCVwQVn .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-lcKTTVWJkjCVwQVn .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-lcKTTVWJkjCVwQVn .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-lcKTTVWJkjCVwQVn .marker{fill:#333333;stroke:#333333;}#mermaid-svg-lcKTTVWJkjCVwQVn .marker.cross{stroke:#333333;}#mermaid-svg-lcKTTVWJkjCVwQVn svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-lcKTTVWJkjCVwQVn .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-lcKTTVWJkjCVwQVn text.actortspan{fill:black;stroke:none;}#mermaid-svg-lcKTTVWJkjCVwQVn .actor-line{stroke:grey;}#mermaid-svg-lcKTTVWJkjCVwQVn .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-lcKTTVWJkjCVwQVn .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-lcKTTVWJkjCVwQVn #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-lcKTTVWJkjCVwQVn .sequenceNumber{fill:white;}#mermaid-svg-lcKTTVWJkjCVwQVn #sequencenumber{fill:#333;}#mermaid-svg-lcKTTVWJkjCVwQVn #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-lcKTTVWJkjCVwQVn .messageText{fill:#333;stroke:#333;}#mermaid-svg-lcKTTVWJkjCVwQVn .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-lcKTTVWJkjCVwQVn .labelText,#mermaid-svg-lcKTTVWJkjCVwQVn .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-lcKTTVWJkjCVwQVn .loopText,#mermaid-svg-lcKTTVWJkjCVwQVn .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-lcKTTVWJkjCVwQVn .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-lcKTTVWJkjCVwQVn .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-lcKTTVWJkjCVwQVn .noteText,#mermaid-svg-lcKTTVWJkjCVwQVn .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-lcKTTVWJkjCVwQVn .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-lcKTTVWJkjCVwQVn .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-lcKTTVWJkjCVwQVn .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-lcKTTVWJkjCVwQVn .actorPopupMenu{position:absolute;}#mermaid-svg-lcKTTVWJkjCVwQVn .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-lcKTTVWJkjCVwQVn .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-lcKTTVWJkjCVwQVn .actor-man circle,#mermaid-svg-lcKTTVWJkjCVwQVn line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-lcKTTVWJkjCVwQVn :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 李女士, 最近过得好吗? 1 常见的互动 张三 李四 还可以添加换行符通常适用于文本输入
代码: mermaid sequenceDiagram 张三-李四: 李女士, 最近过得好吗? Note over 张三,李四: 常见的互动br/这是第二行的备注 #mermaid-svg-xDzYMlpdK3PkSHK6 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-xDzYMlpdK3PkSHK6 .error-icon{fill:#552222;}#mermaid-svg-xDzYMlpdK3PkSHK6 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-xDzYMlpdK3PkSHK6 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-xDzYMlpdK3PkSHK6 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-xDzYMlpdK3PkSHK6 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-xDzYMlpdK3PkSHK6 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-xDzYMlpdK3PkSHK6 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-xDzYMlpdK3PkSHK6 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-xDzYMlpdK3PkSHK6 .marker.cross{stroke:#333333;}#mermaid-svg-xDzYMlpdK3PkSHK6 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-xDzYMlpdK3PkSHK6 .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-xDzYMlpdK3PkSHK6 text.actortspan{fill:black;stroke:none;}#mermaid-svg-xDzYMlpdK3PkSHK6 .actor-line{stroke:grey;}#mermaid-svg-xDzYMlpdK3PkSHK6 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-xDzYMlpdK3PkSHK6 .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-xDzYMlpdK3PkSHK6 #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-xDzYMlpdK3PkSHK6 .sequenceNumber{fill:white;}#mermaid-svg-xDzYMlpdK3PkSHK6 #sequencenumber{fill:#333;}#mermaid-svg-xDzYMlpdK3PkSHK6 #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-xDzYMlpdK3PkSHK6 .messageText{fill:#333;stroke:#333;}#mermaid-svg-xDzYMlpdK3PkSHK6 .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-xDzYMlpdK3PkSHK6 .labelText,#mermaid-svg-xDzYMlpdK3PkSHK6 .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-xDzYMlpdK3PkSHK6 .loopText,#mermaid-svg-xDzYMlpdK3PkSHK6 .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-xDzYMlpdK3PkSHK6 .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-xDzYMlpdK3PkSHK6 .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-xDzYMlpdK3PkSHK6 .noteText,#mermaid-svg-xDzYMlpdK3PkSHK6 .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-xDzYMlpdK3PkSHK6 .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-xDzYMlpdK3PkSHK6 .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-xDzYMlpdK3PkSHK6 .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-xDzYMlpdK3PkSHK6 .actorPopupMenu{position:absolute;}#mermaid-svg-xDzYMlpdK3PkSHK6 .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-xDzYMlpdK3PkSHK6 .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-xDzYMlpdK3PkSHK6 .actor-man circle,#mermaid-svg-xDzYMlpdK3PkSHK6 line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-xDzYMlpdK3PkSHK6 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 李女士, 最近过得好吗? 1 常见的互动 这是第二行的备注 张三 李四 循环 loop
可以在序列图中表示循环。这是通过以下语句实现
loop 循环文本
... 参与者交互记录 ...
end请参阅下面的示例:
代码: mermaid sequenceDiagram 张三-李四: 李女士, 最近过得好吗? loop 每分钟问一次 李四--张三: 嗯我很好! end #mermaid-svg-UbCQWrG8YyVWiZ7c {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-UbCQWrG8YyVWiZ7c .error-icon{fill:#552222;}#mermaid-svg-UbCQWrG8YyVWiZ7c .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-UbCQWrG8YyVWiZ7c .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-UbCQWrG8YyVWiZ7c .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-UbCQWrG8YyVWiZ7c .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-UbCQWrG8YyVWiZ7c .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-UbCQWrG8YyVWiZ7c .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-UbCQWrG8YyVWiZ7c .marker{fill:#333333;stroke:#333333;}#mermaid-svg-UbCQWrG8YyVWiZ7c .marker.cross{stroke:#333333;}#mermaid-svg-UbCQWrG8YyVWiZ7c svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-UbCQWrG8YyVWiZ7c .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-UbCQWrG8YyVWiZ7c text.actortspan{fill:black;stroke:none;}#mermaid-svg-UbCQWrG8YyVWiZ7c .actor-line{stroke:grey;}#mermaid-svg-UbCQWrG8YyVWiZ7c .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-UbCQWrG8YyVWiZ7c .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-UbCQWrG8YyVWiZ7c #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-UbCQWrG8YyVWiZ7c .sequenceNumber{fill:white;}#mermaid-svg-UbCQWrG8YyVWiZ7c #sequencenumber{fill:#333;}#mermaid-svg-UbCQWrG8YyVWiZ7c #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-UbCQWrG8YyVWiZ7c .messageText{fill:#333;stroke:#333;}#mermaid-svg-UbCQWrG8YyVWiZ7c .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-UbCQWrG8YyVWiZ7c .labelText,#mermaid-svg-UbCQWrG8YyVWiZ7c .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-UbCQWrG8YyVWiZ7c .loopText,#mermaid-svg-UbCQWrG8YyVWiZ7c .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-UbCQWrG8YyVWiZ7c .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-UbCQWrG8YyVWiZ7c .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-UbCQWrG8YyVWiZ7c .noteText,#mermaid-svg-UbCQWrG8YyVWiZ7c .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-UbCQWrG8YyVWiZ7c .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-UbCQWrG8YyVWiZ7c .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-UbCQWrG8YyVWiZ7c .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-UbCQWrG8YyVWiZ7c .actorPopupMenu{position:absolute;}#mermaid-svg-UbCQWrG8YyVWiZ7c .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-UbCQWrG8YyVWiZ7c .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-UbCQWrG8YyVWiZ7c .actor-man circle,#mermaid-svg-UbCQWrG8YyVWiZ7c line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-UbCQWrG8YyVWiZ7c :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 李女士, 最近过得好吗? 1 嗯我很好! 2 loop [每分钟问一次] 张三 李四 备选 Alt
可以在序列图中表示条件 这是通过以下语句实现
alt 描述文本
... 参与者交互记录...
else 描述文本
... 参与者交互记录...
end或者需要表示一个可以选的序列内容(else).
opt 描述文本
... 参与者交互记录...
end请参阅下面的示例:
代码: mermaid sequenceDiagram 张三-李四: 李女士, 最近过得好吗? alt 身体抱恙 李四-张三: 无精打采 ┭┮﹏┭┮ else 身体健康 李四-张三: 感觉神清气爽 end opt 额外的回答 李四-张三: 谢谢关心 end #mermaid-svg-izk9XSFqVPzI0tTg {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-izk9XSFqVPzI0tTg .error-icon{fill:#552222;}#mermaid-svg-izk9XSFqVPzI0tTg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-izk9XSFqVPzI0tTg .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-izk9XSFqVPzI0tTg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-izk9XSFqVPzI0tTg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-izk9XSFqVPzI0tTg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-izk9XSFqVPzI0tTg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-izk9XSFqVPzI0tTg .marker{fill:#333333;stroke:#333333;}#mermaid-svg-izk9XSFqVPzI0tTg .marker.cross{stroke:#333333;}#mermaid-svg-izk9XSFqVPzI0tTg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-izk9XSFqVPzI0tTg .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-izk9XSFqVPzI0tTg text.actortspan{fill:black;stroke:none;}#mermaid-svg-izk9XSFqVPzI0tTg .actor-line{stroke:grey;}#mermaid-svg-izk9XSFqVPzI0tTg .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-izk9XSFqVPzI0tTg .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-izk9XSFqVPzI0tTg #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-izk9XSFqVPzI0tTg .sequenceNumber{fill:white;}#mermaid-svg-izk9XSFqVPzI0tTg #sequencenumber{fill:#333;}#mermaid-svg-izk9XSFqVPzI0tTg #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-izk9XSFqVPzI0tTg .messageText{fill:#333;stroke:#333;}#mermaid-svg-izk9XSFqVPzI0tTg .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-izk9XSFqVPzI0tTg .labelText,#mermaid-svg-izk9XSFqVPzI0tTg .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-izk9XSFqVPzI0tTg .loopText,#mermaid-svg-izk9XSFqVPzI0tTg .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-izk9XSFqVPzI0tTg .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-izk9XSFqVPzI0tTg .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-izk9XSFqVPzI0tTg .noteText,#mermaid-svg-izk9XSFqVPzI0tTg .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-izk9XSFqVPzI0tTg .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-izk9XSFqVPzI0tTg .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-izk9XSFqVPzI0tTg .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-izk9XSFqVPzI0tTg .actorPopupMenu{position:absolute;}#mermaid-svg-izk9XSFqVPzI0tTg .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-izk9XSFqVPzI0tTg .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-izk9XSFqVPzI0tTg .actor-man circle,#mermaid-svg-izk9XSFqVPzI0tTg line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-izk9XSFqVPzI0tTg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 李女士, 最近过得好吗? 1 无精打采 ┭┮﹏┭┮ 2 感觉神清气爽 3 alt [身体抱恙] [身体健康] 谢谢关心 4 opt [额外的回答] 张三 李四 并行 par
可以序列图中显示并行的交互记录信息。 这是通过以下语句实现
par [行为 1]
... 参与者交互记录...
and [行为 2]
... 参与者交互记录...
and [行为 N]
... 参与者交互记录...
end请参阅下面的示例:
代码: mermaid sequenceDiagram par 张三对李四说 张三 -李四: 大家好! and 张三对王五说 张三 -王五: 大家好! end 李四--张三 : 你好张先生! 王五--张三 : 你好张先生! #mermaid-svg-GG3gTMMkSWB5Jkco {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GG3gTMMkSWB5Jkco .error-icon{fill:#552222;}#mermaid-svg-GG3gTMMkSWB5Jkco .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-GG3gTMMkSWB5Jkco .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-GG3gTMMkSWB5Jkco .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-GG3gTMMkSWB5Jkco .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-GG3gTMMkSWB5Jkco .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-GG3gTMMkSWB5Jkco .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-GG3gTMMkSWB5Jkco .marker{fill:#333333;stroke:#333333;}#mermaid-svg-GG3gTMMkSWB5Jkco .marker.cross{stroke:#333333;}#mermaid-svg-GG3gTMMkSWB5Jkco svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-GG3gTMMkSWB5Jkco .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-GG3gTMMkSWB5Jkco text.actortspan{fill:black;stroke:none;}#mermaid-svg-GG3gTMMkSWB5Jkco .actor-line{stroke:grey;}#mermaid-svg-GG3gTMMkSWB5Jkco .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-GG3gTMMkSWB5Jkco .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-GG3gTMMkSWB5Jkco #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-GG3gTMMkSWB5Jkco .sequenceNumber{fill:white;}#mermaid-svg-GG3gTMMkSWB5Jkco #sequencenumber{fill:#333;}#mermaid-svg-GG3gTMMkSWB5Jkco #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-GG3gTMMkSWB5Jkco .messageText{fill:#333;stroke:#333;}#mermaid-svg-GG3gTMMkSWB5Jkco .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-GG3gTMMkSWB5Jkco .labelText,#mermaid-svg-GG3gTMMkSWB5Jkco .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-GG3gTMMkSWB5Jkco .loopText,#mermaid-svg-GG3gTMMkSWB5Jkco .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-GG3gTMMkSWB5Jkco .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-GG3gTMMkSWB5Jkco .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-GG3gTMMkSWB5Jkco .noteText,#mermaid-svg-GG3gTMMkSWB5Jkco .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-GG3gTMMkSWB5Jkco .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-GG3gTMMkSWB5Jkco .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-GG3gTMMkSWB5Jkco .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-GG3gTMMkSWB5Jkco .actorPopupMenu{position:absolute;}#mermaid-svg-GG3gTMMkSWB5Jkco .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-GG3gTMMkSWB5Jkco .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-GG3gTMMkSWB5Jkco .actor-man circle,#mermaid-svg-GG3gTMMkSWB5Jkco line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-GG3gTMMkSWB5Jkco :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 王五 大家好! 1 大家好! 2 par [张三对李四说] [张三对王五说] 你好张先生! 3 你好张先生! 4 张三 李四 王五 可以对多个并行进行嵌套.
代码: #mermaid-svg-SOvueMDJOmXV84kL {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SOvueMDJOmXV84kL .error-icon{fill:#552222;}#mermaid-svg-SOvueMDJOmXV84kL .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-SOvueMDJOmXV84kL .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-SOvueMDJOmXV84kL .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-SOvueMDJOmXV84kL .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-SOvueMDJOmXV84kL .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-SOvueMDJOmXV84kL .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-SOvueMDJOmXV84kL .marker{fill:#333333;stroke:#333333;}#mermaid-svg-SOvueMDJOmXV84kL .marker.cross{stroke:#333333;}#mermaid-svg-SOvueMDJOmXV84kL svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-SOvueMDJOmXV84kL .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-SOvueMDJOmXV84kL text.actortspan{fill:black;stroke:none;}#mermaid-svg-SOvueMDJOmXV84kL .actor-line{stroke:grey;}#mermaid-svg-SOvueMDJOmXV84kL .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-SOvueMDJOmXV84kL .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-SOvueMDJOmXV84kL #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-SOvueMDJOmXV84kL .sequenceNumber{fill:white;}#mermaid-svg-SOvueMDJOmXV84kL #sequencenumber{fill:#333;}#mermaid-svg-SOvueMDJOmXV84kL #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-SOvueMDJOmXV84kL .messageText{fill:#333;stroke:#333;}#mermaid-svg-SOvueMDJOmXV84kL .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-SOvueMDJOmXV84kL .labelText,#mermaid-svg-SOvueMDJOmXV84kL .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-SOvueMDJOmXV84kL .loopText,#mermaid-svg-SOvueMDJOmXV84kL .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-SOvueMDJOmXV84kL .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-SOvueMDJOmXV84kL .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-SOvueMDJOmXV84kL .noteText,#mermaid-svg-SOvueMDJOmXV84kL .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-SOvueMDJOmXV84kL .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-SOvueMDJOmXV84kL .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-SOvueMDJOmXV84kL .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-SOvueMDJOmXV84kL .actorPopupMenu{position:absolute;}#mermaid-svg-SOvueMDJOmXV84kL .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-SOvueMDJOmXV84kL .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-SOvueMDJOmXV84kL .actor-man circle,#mermaid-svg-SOvueMDJOmXV84kL line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-SOvueMDJOmXV84kL :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 王五 赵六 卓七 我们去帮助王五他们吧 1 我想今天帮你做事 2 我们今天能做完吗? 3 你今天能帮我们吗? 4 par [王五对赵六说] [王五对卓七说] par [张三对李四说] [张三对王五说] 张三 李四 王五 赵六 卓七 临界区 critical
可以显示必须触发的事件然后通过不同的触发事件做不同的处理
可以通过以下语句实现
critical [一定触发的事件]
... 参与者交互记录...
option [触发事件 A]
... 参与者交互记录...
option [触发事件 B]
... 参与者交互记录...
end请参阅下面的示例:
代码: sequenceDiagramcritical 建立与数据库的连接服务--数据库: 连接option 网络超时服务--服务: 记录错误option 凭据被拒绝服务--服务: 记录不同的错误end也有可能根本没有选择
代码: sequenceDiagramcritical 建立与数据库的连接服务--数据库: 连接end这个临界区也可以嵌套相当于上面看到的par语句。 中断 break
可以在序列图表示中断参与者交互 (通常对异常进行处理).
可以通过以下语句实现
break [触发条件]
... 参与者交互记录...
end请参阅下面的示例:
代码: sequenceDiagram消费者--接口: 预定一些东西接口--预订服务: 开始预订流程break 当预订过程失败时接口--消费者: 显示故障end接口--计费服务: 启动计费过程背景高亮 rect
你可以通过rect设置颜色来高亮交互记录的背景。 这是通过以下语句实现
颜色使用rgb和rgba语法进行定义。.
rect rgb(0, 255, 0)
... 参与者交互记录...
end
rect rgba(0, 0, 255, .1)
... 参与者交互记录 ...
end请参阅下面的示例:
代码: mermaid sequenceDiagram participant 张三 participant 李四 rect rgb(191, 223, 255)note right of 张三: 张三 calls 李四.张三-李四: 李女士, 最近过得好吗?rect rgb(200, 150, 255)张三-李四: 李女士, 你能听到我说话吗?李四---张三: 张先生你好我能听见你说话!end李四---张三: 我过得非常好!end张三 - 李四: 你今晚想去看电影吗李四--- 张三: 好的电影院见.#mermaid-svg-ORLA6CIbDVuLhVvV {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ORLA6CIbDVuLhVvV .error-icon{fill:#552222;}#mermaid-svg-ORLA6CIbDVuLhVvV .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ORLA6CIbDVuLhVvV .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ORLA6CIbDVuLhVvV .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ORLA6CIbDVuLhVvV .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ORLA6CIbDVuLhVvV .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ORLA6CIbDVuLhVvV .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ORLA6CIbDVuLhVvV .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ORLA6CIbDVuLhVvV .marker.cross{stroke:#333333;}#mermaid-svg-ORLA6CIbDVuLhVvV svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ORLA6CIbDVuLhVvV .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ORLA6CIbDVuLhVvV text.actortspan{fill:black;stroke:none;}#mermaid-svg-ORLA6CIbDVuLhVvV .actor-line{stroke:grey;}#mermaid-svg-ORLA6CIbDVuLhVvV .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-ORLA6CIbDVuLhVvV .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-ORLA6CIbDVuLhVvV #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-ORLA6CIbDVuLhVvV .sequenceNumber{fill:white;}#mermaid-svg-ORLA6CIbDVuLhVvV #sequencenumber{fill:#333;}#mermaid-svg-ORLA6CIbDVuLhVvV #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-ORLA6CIbDVuLhVvV .messageText{fill:#333;stroke:#333;}#mermaid-svg-ORLA6CIbDVuLhVvV .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ORLA6CIbDVuLhVvV .labelText,#mermaid-svg-ORLA6CIbDVuLhVvV .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-ORLA6CIbDVuLhVvV .loopText,#mermaid-svg-ORLA6CIbDVuLhVvV .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-ORLA6CIbDVuLhVvV .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-ORLA6CIbDVuLhVvV .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-ORLA6CIbDVuLhVvV .noteText,#mermaid-svg-ORLA6CIbDVuLhVvV .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-ORLA6CIbDVuLhVvV .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ORLA6CIbDVuLhVvV .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ORLA6CIbDVuLhVvV .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ORLA6CIbDVuLhVvV .actorPopupMenu{position:absolute;}#mermaid-svg-ORLA6CIbDVuLhVvV .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-ORLA6CIbDVuLhVvV .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ORLA6CIbDVuLhVvV .actor-man circle,#mermaid-svg-ORLA6CIbDVuLhVvV line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-ORLA6CIbDVuLhVvV :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 张三 calls 李四. 李女士, 最近过得好吗? 1 李女士, 你能听到我说话吗? 2 张先生你好我能听见你说话! 3 我过得非常好! 4 你今晚想去看电影吗 5 好的电影院见. 6 张三 李四 注释 %%
可以在序列图中加入注释解下器将忽略这些注释注释必须在所注释代码之上且必须以%%双百分号开头。注释这行还是到下一行的任何文本都会被视作为注释包括任何图表语句。
代码: mermaid sequenceDiagram 张三-李四: 李女士, 最近过得好吗? %% 这是一个注释 李四--张三: 我过得非常好! #mermaid-svg-Xc7PZGE7PNIejtd0 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Xc7PZGE7PNIejtd0 .error-icon{fill:#552222;}#mermaid-svg-Xc7PZGE7PNIejtd0 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Xc7PZGE7PNIejtd0 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-Xc7PZGE7PNIejtd0 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Xc7PZGE7PNIejtd0 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Xc7PZGE7PNIejtd0 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Xc7PZGE7PNIejtd0 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Xc7PZGE7PNIejtd0 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Xc7PZGE7PNIejtd0 .marker.cross{stroke:#333333;}#mermaid-svg-Xc7PZGE7PNIejtd0 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Xc7PZGE7PNIejtd0 .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-Xc7PZGE7PNIejtd0 text.actortspan{fill:black;stroke:none;}#mermaid-svg-Xc7PZGE7PNIejtd0 .actor-line{stroke:grey;}#mermaid-svg-Xc7PZGE7PNIejtd0 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-Xc7PZGE7PNIejtd0 .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-Xc7PZGE7PNIejtd0 #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-Xc7PZGE7PNIejtd0 .sequenceNumber{fill:white;}#mermaid-svg-Xc7PZGE7PNIejtd0 #sequencenumber{fill:#333;}#mermaid-svg-Xc7PZGE7PNIejtd0 #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-Xc7PZGE7PNIejtd0 .messageText{fill:#333;stroke:#333;}#mermaid-svg-Xc7PZGE7PNIejtd0 .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-Xc7PZGE7PNIejtd0 .labelText,#mermaid-svg-Xc7PZGE7PNIejtd0 .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-Xc7PZGE7PNIejtd0 .loopText,#mermaid-svg-Xc7PZGE7PNIejtd0 .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-Xc7PZGE7PNIejtd0 .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-Xc7PZGE7PNIejtd0 .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-Xc7PZGE7PNIejtd0 .noteText,#mermaid-svg-Xc7PZGE7PNIejtd0 .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-Xc7PZGE7PNIejtd0 .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-Xc7PZGE7PNIejtd0 .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-Xc7PZGE7PNIejtd0 .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-Xc7PZGE7PNIejtd0 .actorPopupMenu{position:absolute;}#mermaid-svg-Xc7PZGE7PNIejtd0 .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-Xc7PZGE7PNIejtd0 .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-Xc7PZGE7PNIejtd0 .actor-man circle,#mermaid-svg-Xc7PZGE7PNIejtd0 line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-Xc7PZGE7PNIejtd0 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 李女士, 最近过得好吗? 1 我过得非常好! 2 张三 李四 转义字符的实体代码
可以使用下面示例的语句来转义字符。
代码: mermaid sequenceDiagram 张三-李四: 我 #35; 你! 李四-张三: 我 #9829; 你 #infin; 倍!; #mermaid-svg-YbN9wHPTa4eUw3dc {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-YbN9wHPTa4eUw3dc .error-icon{fill:#552222;}#mermaid-svg-YbN9wHPTa4eUw3dc .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-YbN9wHPTa4eUw3dc .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-YbN9wHPTa4eUw3dc .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-YbN9wHPTa4eUw3dc .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-YbN9wHPTa4eUw3dc .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-YbN9wHPTa4eUw3dc .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-YbN9wHPTa4eUw3dc .marker{fill:#333333;stroke:#333333;}#mermaid-svg-YbN9wHPTa4eUw3dc .marker.cross{stroke:#333333;}#mermaid-svg-YbN9wHPTa4eUw3dc svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-YbN9wHPTa4eUw3dc .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-YbN9wHPTa4eUw3dc text.actortspan{fill:black;stroke:none;}#mermaid-svg-YbN9wHPTa4eUw3dc .actor-line{stroke:grey;}#mermaid-svg-YbN9wHPTa4eUw3dc .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-YbN9wHPTa4eUw3dc .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-YbN9wHPTa4eUw3dc #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-YbN9wHPTa4eUw3dc .sequenceNumber{fill:white;}#mermaid-svg-YbN9wHPTa4eUw3dc #sequencenumber{fill:#333;}#mermaid-svg-YbN9wHPTa4eUw3dc #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-YbN9wHPTa4eUw3dc .messageText{fill:#333;stroke:#333;}#mermaid-svg-YbN9wHPTa4eUw3dc .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-YbN9wHPTa4eUw3dc .labelText,#mermaid-svg-YbN9wHPTa4eUw3dc .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-YbN9wHPTa4eUw3dc .loopText,#mermaid-svg-YbN9wHPTa4eUw3dc .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-YbN9wHPTa4eUw3dc .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-YbN9wHPTa4eUw3dc .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-YbN9wHPTa4eUw3dc .noteText,#mermaid-svg-YbN9wHPTa4eUw3dc .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-YbN9wHPTa4eUw3dc .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-YbN9wHPTa4eUw3dc .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-YbN9wHPTa4eUw3dc .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-YbN9wHPTa4eUw3dc .actorPopupMenu{position:absolute;}#mermaid-svg-YbN9wHPTa4eUw3dc .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-YbN9wHPTa4eUw3dc .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-YbN9wHPTa4eUw3dc .actor-man circle,#mermaid-svg-YbN9wHPTa4eUw3dc line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-YbN9wHPTa4eUw3dc :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 我 # 你! 1 我 ♥ 你 ∞ 倍! 2 张三 李四 实体代码是以16进制进行编码的, 所以#字符 可以用 #35;进行编码。 还支持使用HTML字符名称。
因为;(分号)可以替换换行符放在信息结尾直接放在文本中间将不会被解析器识别所以如果文本中需要包含;(分号)请使用#59;来代替。 序号 autonumber
可以在序列图中的每个连线上附加一个序列号。将mermaid 添加到网站时可以进行如下配置
scriptmermaid.initialize({ sequence: { showSequenceNumbers: true } });
/script你可以通过序列图中的autonumber关键字打开此功能.
代码: mermaid sequenceDiagram autonumber 张三-李四: 李女士,最近身体好吗? loop 体检 李四-李四: 与病魔斗争 end Note right of 李四: 理性思考! 李四--张三: 我很好! 李四-王五: 你现在身体是怎么样? 王五--李四: 我身体非常好! #mermaid-svg-fjXnpLPJORcllZvo {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-fjXnpLPJORcllZvo .error-icon{fill:#552222;}#mermaid-svg-fjXnpLPJORcllZvo .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-fjXnpLPJORcllZvo .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-fjXnpLPJORcllZvo .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-fjXnpLPJORcllZvo .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-fjXnpLPJORcllZvo .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-fjXnpLPJORcllZvo .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-fjXnpLPJORcllZvo .marker{fill:#333333;stroke:#333333;}#mermaid-svg-fjXnpLPJORcllZvo .marker.cross{stroke:#333333;}#mermaid-svg-fjXnpLPJORcllZvo svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-fjXnpLPJORcllZvo .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-fjXnpLPJORcllZvo text.actortspan{fill:black;stroke:none;}#mermaid-svg-fjXnpLPJORcllZvo .actor-line{stroke:grey;}#mermaid-svg-fjXnpLPJORcllZvo .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-fjXnpLPJORcllZvo .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-fjXnpLPJORcllZvo #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-fjXnpLPJORcllZvo .sequenceNumber{fill:white;}#mermaid-svg-fjXnpLPJORcllZvo #sequencenumber{fill:#333;}#mermaid-svg-fjXnpLPJORcllZvo #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-fjXnpLPJORcllZvo .messageText{fill:#333;stroke:#333;}#mermaid-svg-fjXnpLPJORcllZvo .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-fjXnpLPJORcllZvo .labelText,#mermaid-svg-fjXnpLPJORcllZvo .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-fjXnpLPJORcllZvo .loopText,#mermaid-svg-fjXnpLPJORcllZvo .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-fjXnpLPJORcllZvo .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-fjXnpLPJORcllZvo .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-fjXnpLPJORcllZvo .noteText,#mermaid-svg-fjXnpLPJORcllZvo .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-fjXnpLPJORcllZvo .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-fjXnpLPJORcllZvo .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-fjXnpLPJORcllZvo .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-fjXnpLPJORcllZvo .actorPopupMenu{position:absolute;}#mermaid-svg-fjXnpLPJORcllZvo .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-fjXnpLPJORcllZvo .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-fjXnpLPJORcllZvo .actor-man circle,#mermaid-svg-fjXnpLPJORcllZvo line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-fjXnpLPJORcllZvo :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 王五 李女士,最近身体好吗? 1 与病魔斗争 2 loop [体检] 理性思考! 我很好! 3 你现在身体是怎么样? 4 我身体非常好! 5 张三 李四 王五 人物菜单 link
人物可以有弹出菜单其中包含指向关于此人物得外部链接。
这可以通过添加一个或多个链接行进行配置格式为
link actor: link-label link-url代码: mermaid sequenceDiagram participant 张三 participant 李四 link 张三: 平台 https://dashboard.contoso.com/张三 link 张三: 百科 https://baike.baidu.com/item/张三/76379 link 李四: 平台 https://dashboard.contoso.com/李四 link 李四: 百科 https://baike.baidu.com/item/李四/37113 张三-李四: 李女士,最近身体好吗? 李四--张三: 我很好! 张三-)李四: 待会见! #mermaid-svg-tdaAKIuxBEGMkZHo {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-tdaAKIuxBEGMkZHo .error-icon{fill:#552222;}#mermaid-svg-tdaAKIuxBEGMkZHo .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-tdaAKIuxBEGMkZHo .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-tdaAKIuxBEGMkZHo .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-tdaAKIuxBEGMkZHo .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-tdaAKIuxBEGMkZHo .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-tdaAKIuxBEGMkZHo .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-tdaAKIuxBEGMkZHo .marker{fill:#333333;stroke:#333333;}#mermaid-svg-tdaAKIuxBEGMkZHo .marker.cross{stroke:#333333;}#mermaid-svg-tdaAKIuxBEGMkZHo svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-tdaAKIuxBEGMkZHo .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-tdaAKIuxBEGMkZHo text.actortspan{fill:black;stroke:none;}#mermaid-svg-tdaAKIuxBEGMkZHo .actor-line{stroke:grey;}#mermaid-svg-tdaAKIuxBEGMkZHo .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-tdaAKIuxBEGMkZHo .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-tdaAKIuxBEGMkZHo #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-tdaAKIuxBEGMkZHo .sequenceNumber{fill:white;}#mermaid-svg-tdaAKIuxBEGMkZHo #sequencenumber{fill:#333;}#mermaid-svg-tdaAKIuxBEGMkZHo #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-tdaAKIuxBEGMkZHo .messageText{fill:#333;stroke:#333;}#mermaid-svg-tdaAKIuxBEGMkZHo .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-tdaAKIuxBEGMkZHo .labelText,#mermaid-svg-tdaAKIuxBEGMkZHo .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-tdaAKIuxBEGMkZHo .loopText,#mermaid-svg-tdaAKIuxBEGMkZHo .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-tdaAKIuxBEGMkZHo .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-tdaAKIuxBEGMkZHo .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-tdaAKIuxBEGMkZHo .noteText,#mermaid-svg-tdaAKIuxBEGMkZHo .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-tdaAKIuxBEGMkZHo .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-tdaAKIuxBEGMkZHo .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-tdaAKIuxBEGMkZHo .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-tdaAKIuxBEGMkZHo .actorPopupMenu{position:absolute;}#mermaid-svg-tdaAKIuxBEGMkZHo .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-tdaAKIuxBEGMkZHo .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-tdaAKIuxBEGMkZHo .actor-man circle,#mermaid-svg-tdaAKIuxBEGMkZHo line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-tdaAKIuxBEGMkZHo :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 李女士,最近身体好吗? 1 我很好! 2 待会见! 3 张三 李四 平台 百科 平台 百科 高级菜单语法 links
有一种高级语法依赖于JSON格式。如果您习惯使用JSON格式刚好它也支持JSON语法。
可以通过以下格式添加链接
links actor: json-formatted link-name link-url pairs请参阅下面的示例:
代码: mermaid sequenceDiagram participant 张三 participant 李四 links 张三: {平台: https://dashboard.contoso.com/张三, 百科: https://baike.baidu.com/item/张三/76379} links 李四: {平台: https://dashboard.contoso.com/张三, 百科: https://baike.baidu.com/item/李四/37113} 张三-李四: 李女士,最近身体好吗? 李四--张三: 我很好! 张三-)李四: 待会见! #mermaid-svg-LdTlYWrskF3JpRwU {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-LdTlYWrskF3JpRwU .error-icon{fill:#552222;}#mermaid-svg-LdTlYWrskF3JpRwU .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-LdTlYWrskF3JpRwU .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-LdTlYWrskF3JpRwU .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-LdTlYWrskF3JpRwU .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-LdTlYWrskF3JpRwU .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-LdTlYWrskF3JpRwU .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-LdTlYWrskF3JpRwU .marker{fill:#333333;stroke:#333333;}#mermaid-svg-LdTlYWrskF3JpRwU .marker.cross{stroke:#333333;}#mermaid-svg-LdTlYWrskF3JpRwU svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-LdTlYWrskF3JpRwU .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-LdTlYWrskF3JpRwU text.actortspan{fill:black;stroke:none;}#mermaid-svg-LdTlYWrskF3JpRwU .actor-line{stroke:grey;}#mermaid-svg-LdTlYWrskF3JpRwU .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-LdTlYWrskF3JpRwU .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-LdTlYWrskF3JpRwU #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-LdTlYWrskF3JpRwU .sequenceNumber{fill:white;}#mermaid-svg-LdTlYWrskF3JpRwU #sequencenumber{fill:#333;}#mermaid-svg-LdTlYWrskF3JpRwU #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-LdTlYWrskF3JpRwU .messageText{fill:#333;stroke:#333;}#mermaid-svg-LdTlYWrskF3JpRwU .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-LdTlYWrskF3JpRwU .labelText,#mermaid-svg-LdTlYWrskF3JpRwU .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-LdTlYWrskF3JpRwU .loopText,#mermaid-svg-LdTlYWrskF3JpRwU .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-LdTlYWrskF3JpRwU .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-LdTlYWrskF3JpRwU .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-LdTlYWrskF3JpRwU .noteText,#mermaid-svg-LdTlYWrskF3JpRwU .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-LdTlYWrskF3JpRwU .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-LdTlYWrskF3JpRwU .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-LdTlYWrskF3JpRwU .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-LdTlYWrskF3JpRwU .actorPopupMenu{position:absolute;}#mermaid-svg-LdTlYWrskF3JpRwU .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-LdTlYWrskF3JpRwU .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-LdTlYWrskF3JpRwU .actor-man circle,#mermaid-svg-LdTlYWrskF3JpRwU line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-LdTlYWrskF3JpRwU :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 李女士,最近身体好吗? 1 我很好! 2 待会见! 3 张三 李四 平台 百科 平台 百科 样式
序列图的样式是通过定义许多css类来定义。以下类是从src/themes/ssequence.scss文件中提取的。
使用的部分类
类描述actor图表顶部参与者文本框的样式text.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;fill: #fff5ad;
}.noteText {fill: black;stroke: none;font-family: trebuchet ms, verdana, arial;font-size: 14px;
}配置
可以调整用于渲染序列图的边距。
这是通过定义 mermaid.sequenceConfig 或CLI在配置中使用json文件来完成的。mermaidCLI 页中介绍了如何使用CLI。mermaid.sequenceConfig可以设置为带有配置参数的JSON字符串或相应的对象。
mermaid.sequenceConfig {diagramMarginX: 50,diagramMarginY: 10,boxTextMargin: 5,noteMargin: 10,messageMargin: 35,mirrorActors: true,
};可能的配置参数:
参数描述默认值mirrorActors打开/关闭图表下方和上方参与者的渲染falsebottomMarginAdj调整图形向下结束的距离。 带有css的宽边框样式可能会生成不需要的剪裁这就是为什么存在此配置参数的原因。1actorFontSize设置参与者描述的字体大小14actorFontFamily设置参与者描述的字体“Open Sans”, sans-serifactorFontWeight设置演员描述的字体粗细“Open Sans”, sans-serifnoteFontSize设置参与者附加备注的字体大小14noteFontFamily设置参与者附加备注的字体“trebuchet ms”, verdana, arialnoteFontWeight设置参与者附加备注的字体粗细“trebuchet ms”, verdana, arialnoteAlign设置参与者附加备注的对齐方式centermessageFontSize设置参与者与参与者之间的消息字体大小16messageFontFamily设置参与者与参与者之间的消息字体“trebuchet ms”, verdana, arialmessageFontWeight设置参与者与参与者之间的消息字体粗细“trebuchet ms”, verdana, arial
