河北网站建设服务,江苏省交通建设局网站,wordpress ping插件,手机网站建设公司哪家好目录序UML图之顺序图顺序图的四个要素关于消息箭头的语法Mermaid中顺序图的简单例子样例用小人表示对象为对象设置别名激活对象UML图之类图类图中常见的关系关于不同类型关系的语法Mermaid中类图的简单例子样例类定义的两种方式为类定义成员双向关系的表示多重性关系的表示UML之…
目录序UML图之顺序图顺序图的四个要素关于消息箭头的语法Mermaid中顺序图的简单例子样例用小人表示对象为对象设置别名激活对象UML图之类图类图中常见的关系关于不同类型关系的语法Mermaid中类图的简单例子样例类定义的两种方式为类定义成员双向关系的表示多重性关系的表示UML之状态图状态图的构成要素Mermaid中顺序图的简单例子样例状态的表示转移的表示开始和结束的表示判断的表示同步的表示序
Mermaid(中译为美人鱼就好比一条美人鱼在流动构成了各种的图),是一种在MarkDown中以特定格式的文字生成各种图示的方法。
接着之前写过的MarkDown中写流程图的方法这篇博客经过了三年Mermaid也是接连更新了软件工程中常用的顺序图、类图、状态图等UML图E-R图以及项目管理中常用的甘特图、饼图还有常用版本管理工具Git的合并策略图也可以画出来了这真是为开发者们徒增不少便利啊
只有你想不到没有Mermaid做不到当然这不是打广告就连思维导图Mermaid也支持啦虽然XMind用来画思维导图是更加方便的不过多掌握一项技能又何尝不可呢
这篇博客将为大家介绍如何绘制常见UML图诸如顺序图、类图、状态图。
UML图之顺序图
顺序图又叫时序图、序列图即以时间为主线有生命线的动态视图它显示了各个进程之间是如何运作的以及它们是以什么顺序运作的。
顺序图的四个要素
①对象类的实例化。
②生命线对象存在的时间。
③消息对象之间靠消息传递信息和指令用从一个对象的生命线到另一个对象生命线的箭头表示消息。
④激活这个时间对象可以实现操作。对象存在时生命线用一条虚线表示当对象的过程处于激活状态生命线用双道线表示。
接下来介绍如何使用Mermaid画顺序图。
关于消息箭头的语法
消息箭头类型表达含义示意图-不带箭头的实线/--不带箭头的点虚线/-带箭头的实线--带箭头的点虚线-x尾部带十字叉的实线--x尾部带十字叉的点虚线-)尾部是开箭头的实线(异步)--)尾部是开箭头的点虚线(异步)
Mermaid中顺序图的简单例子
样例
在下面这段文字代码块中的前面和后面一行各自添加键盘左上与~共用一个键即可生成如下图的展示结果(注意在使用时需要增加mermaid标识加在前面那三点的后面)。
sequenceDiagram学生-老师: 老师请问这道题的解题思路是什么?老师--学生: 来你看这边是这样的……学生-)老师: 醍醐灌顶谢谢老师#mermaid-svg-gODMeRymyF5lkde3 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-gODMeRymyF5lkde3 .error-icon{fill:#552222;}#mermaid-svg-gODMeRymyF5lkde3 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-gODMeRymyF5lkde3 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-gODMeRymyF5lkde3 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-gODMeRymyF5lkde3 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-gODMeRymyF5lkde3 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-gODMeRymyF5lkde3 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-gODMeRymyF5lkde3 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-gODMeRymyF5lkde3 .marker.cross{stroke:#333333;}#mermaid-svg-gODMeRymyF5lkde3 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-gODMeRymyF5lkde3 .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-gODMeRymyF5lkde3 text.actortspan{fill:black;stroke:none;}#mermaid-svg-gODMeRymyF5lkde3 .actor-line{stroke:grey;}#mermaid-svg-gODMeRymyF5lkde3 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-gODMeRymyF5lkde3 .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-gODMeRymyF5lkde3 #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-gODMeRymyF5lkde3 .sequenceNumber{fill:white;}#mermaid-svg-gODMeRymyF5lkde3 #sequencenumber{fill:#333;}#mermaid-svg-gODMeRymyF5lkde3 #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-gODMeRymyF5lkde3 .messageText{fill:#333;stroke:#333;}#mermaid-svg-gODMeRymyF5lkde3 .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-gODMeRymyF5lkde3 .labelText,#mermaid-svg-gODMeRymyF5lkde3 .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-gODMeRymyF5lkde3 .loopText,#mermaid-svg-gODMeRymyF5lkde3 .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-gODMeRymyF5lkde3 .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-gODMeRymyF5lkde3 .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-gODMeRymyF5lkde3 .noteText,#mermaid-svg-gODMeRymyF5lkde3 .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-gODMeRymyF5lkde3 .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-gODMeRymyF5lkde3 .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-gODMeRymyF5lkde3 .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-gODMeRymyF5lkde3 .actorPopupMenu{position:absolute;}#mermaid-svg-gODMeRymyF5lkde3 .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-gODMeRymyF5lkde3 .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-gODMeRymyF5lkde3 .actor-man circle,#mermaid-svg-gODMeRymyF5lkde3 line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-gODMeRymyF5lkde3 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}学生老师老师请问这道题的解题思路是什么?来你看这边是这样的……醍醐灌顶谢谢老师学生老师注意end这个词会与Mermaid语法冲突如果必须要使用到需将这样使用(end) 或[ end ] 或{ end }.
用小人表示对象
上面的例子是用长方形和文字来表示一个对象的如果要用更加形象的小人来表示对象那么在使用对象前用actor来声明即可。
sequenceDiagramactor 学生actor 老师学生-老师: 老师好老师--学生: 你好~#mermaid-svg-M5BYn5bZ5LxrMX32 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-M5BYn5bZ5LxrMX32 .error-icon{fill:#552222;}#mermaid-svg-M5BYn5bZ5LxrMX32 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-M5BYn5bZ5LxrMX32 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-M5BYn5bZ5LxrMX32 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-M5BYn5bZ5LxrMX32 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-M5BYn5bZ5LxrMX32 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-M5BYn5bZ5LxrMX32 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-M5BYn5bZ5LxrMX32 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-M5BYn5bZ5LxrMX32 .marker.cross{stroke:#333333;}#mermaid-svg-M5BYn5bZ5LxrMX32 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-M5BYn5bZ5LxrMX32 .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-M5BYn5bZ5LxrMX32 text.actortspan{fill:black;stroke:none;}#mermaid-svg-M5BYn5bZ5LxrMX32 .actor-line{stroke:grey;}#mermaid-svg-M5BYn5bZ5LxrMX32 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-M5BYn5bZ5LxrMX32 .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-M5BYn5bZ5LxrMX32 #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-M5BYn5bZ5LxrMX32 .sequenceNumber{fill:white;}#mermaid-svg-M5BYn5bZ5LxrMX32 #sequencenumber{fill:#333;}#mermaid-svg-M5BYn5bZ5LxrMX32 #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-M5BYn5bZ5LxrMX32 .messageText{fill:#333;stroke:#333;}#mermaid-svg-M5BYn5bZ5LxrMX32 .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-M5BYn5bZ5LxrMX32 .labelText,#mermaid-svg-M5BYn5bZ5LxrMX32 .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-M5BYn5bZ5LxrMX32 .loopText,#mermaid-svg-M5BYn5bZ5LxrMX32 .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-M5BYn5bZ5LxrMX32 .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-M5BYn5bZ5LxrMX32 .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-M5BYn5bZ5LxrMX32 .noteText,#mermaid-svg-M5BYn5bZ5LxrMX32 .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-M5BYn5bZ5LxrMX32 .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-M5BYn5bZ5LxrMX32 .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-M5BYn5bZ5LxrMX32 .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-M5BYn5bZ5LxrMX32 .actorPopupMenu{position:absolute;}#mermaid-svg-M5BYn5bZ5LxrMX32 .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-M5BYn5bZ5LxrMX32 .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-M5BYn5bZ5LxrMX32 .actor-man circle,#mermaid-svg-M5BYn5bZ5LxrMX32 line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-M5BYn5bZ5LxrMX32 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}学生老师老师好你好~学生老师为对象设置别名
如果觉得对象名太长太复杂那么可以使用participant···as···的语法为对象名设置一个简要的别名。
sequenceDiagramparticipant A as 学生participant B as 老师A-B: 老师好B--A: 你好~#mermaid-svg-Nf4oOX58MGgKXJpj {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Nf4oOX58MGgKXJpj .error-icon{fill:#552222;}#mermaid-svg-Nf4oOX58MGgKXJpj .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Nf4oOX58MGgKXJpj .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-Nf4oOX58MGgKXJpj .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Nf4oOX58MGgKXJpj .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Nf4oOX58MGgKXJpj .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Nf4oOX58MGgKXJpj .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Nf4oOX58MGgKXJpj .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Nf4oOX58MGgKXJpj .marker.cross{stroke:#333333;}#mermaid-svg-Nf4oOX58MGgKXJpj svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Nf4oOX58MGgKXJpj .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-Nf4oOX58MGgKXJpj text.actortspan{fill:black;stroke:none;}#mermaid-svg-Nf4oOX58MGgKXJpj .actor-line{stroke:grey;}#mermaid-svg-Nf4oOX58MGgKXJpj .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-Nf4oOX58MGgKXJpj .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-Nf4oOX58MGgKXJpj #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-Nf4oOX58MGgKXJpj .sequenceNumber{fill:white;}#mermaid-svg-Nf4oOX58MGgKXJpj #sequencenumber{fill:#333;}#mermaid-svg-Nf4oOX58MGgKXJpj #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-Nf4oOX58MGgKXJpj .messageText{fill:#333;stroke:#333;}#mermaid-svg-Nf4oOX58MGgKXJpj .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-Nf4oOX58MGgKXJpj .labelText,#mermaid-svg-Nf4oOX58MGgKXJpj .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-Nf4oOX58MGgKXJpj .loopText,#mermaid-svg-Nf4oOX58MGgKXJpj .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-Nf4oOX58MGgKXJpj .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-Nf4oOX58MGgKXJpj .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-Nf4oOX58MGgKXJpj .noteText,#mermaid-svg-Nf4oOX58MGgKXJpj .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-Nf4oOX58MGgKXJpj .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-Nf4oOX58MGgKXJpj .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-Nf4oOX58MGgKXJpj .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-Nf4oOX58MGgKXJpj .actorPopupMenu{position:absolute;}#mermaid-svg-Nf4oOX58MGgKXJpj .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-Nf4oOX58MGgKXJpj .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-Nf4oOX58MGgKXJpj .actor-man circle,#mermaid-svg-Nf4oOX58MGgKXJpj line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-Nf4oOX58MGgKXJpj :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}学生老师老师好你好~学生老师这样画出来的图没有区别但是写法上会简单很多。
激活对象
如果想要激活对象那么使用activate取消对象的激活状态则使用deactivate。
sequenceDiagramactor A as 学生actor B as 系统A-B: 录入信息activate BB--A: 更新信息deactivate B#mermaid-svg-S3llE72hLRrnq5Br {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-S3llE72hLRrnq5Br .error-icon{fill:#552222;}#mermaid-svg-S3llE72hLRrnq5Br .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-S3llE72hLRrnq5Br .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-S3llE72hLRrnq5Br .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-S3llE72hLRrnq5Br .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-S3llE72hLRrnq5Br .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-S3llE72hLRrnq5Br .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-S3llE72hLRrnq5Br .marker{fill:#333333;stroke:#333333;}#mermaid-svg-S3llE72hLRrnq5Br .marker.cross{stroke:#333333;}#mermaid-svg-S3llE72hLRrnq5Br svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-S3llE72hLRrnq5Br .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-S3llE72hLRrnq5Br text.actortspan{fill:black;stroke:none;}#mermaid-svg-S3llE72hLRrnq5Br .actor-line{stroke:grey;}#mermaid-svg-S3llE72hLRrnq5Br .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-S3llE72hLRrnq5Br .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-S3llE72hLRrnq5Br #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-S3llE72hLRrnq5Br .sequenceNumber{fill:white;}#mermaid-svg-S3llE72hLRrnq5Br #sequencenumber{fill:#333;}#mermaid-svg-S3llE72hLRrnq5Br #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-S3llE72hLRrnq5Br .messageText{fill:#333;stroke:#333;}#mermaid-svg-S3llE72hLRrnq5Br .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-S3llE72hLRrnq5Br .labelText,#mermaid-svg-S3llE72hLRrnq5Br .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-S3llE72hLRrnq5Br .loopText,#mermaid-svg-S3llE72hLRrnq5Br .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-S3llE72hLRrnq5Br .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-S3llE72hLRrnq5Br .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-S3llE72hLRrnq5Br .noteText,#mermaid-svg-S3llE72hLRrnq5Br .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-S3llE72hLRrnq5Br .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-S3llE72hLRrnq5Br .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-S3llE72hLRrnq5Br .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-S3llE72hLRrnq5Br .actorPopupMenu{position:absolute;}#mermaid-svg-S3llE72hLRrnq5Br .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-S3llE72hLRrnq5Br .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-S3llE72hLRrnq5Br .actor-man circle,#mermaid-svg-S3llE72hLRrnq5Br line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-S3llE72hLRrnq5Br :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}学生系统录入信息更新信息学生系统可以使用/-简化激活/未激活状态。
sequenceDiagramactor A as 学生actor B as 系统A-B: 录入信息B---A: 更新信息#mermaid-svg-vIDUUaDr5oPq5dKW {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-vIDUUaDr5oPq5dKW .error-icon{fill:#552222;}#mermaid-svg-vIDUUaDr5oPq5dKW .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-vIDUUaDr5oPq5dKW .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-vIDUUaDr5oPq5dKW .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-vIDUUaDr5oPq5dKW .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-vIDUUaDr5oPq5dKW .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-vIDUUaDr5oPq5dKW .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-vIDUUaDr5oPq5dKW .marker{fill:#333333;stroke:#333333;}#mermaid-svg-vIDUUaDr5oPq5dKW .marker.cross{stroke:#333333;}#mermaid-svg-vIDUUaDr5oPq5dKW svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-vIDUUaDr5oPq5dKW .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-vIDUUaDr5oPq5dKW text.actortspan{fill:black;stroke:none;}#mermaid-svg-vIDUUaDr5oPq5dKW .actor-line{stroke:grey;}#mermaid-svg-vIDUUaDr5oPq5dKW .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-vIDUUaDr5oPq5dKW .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-vIDUUaDr5oPq5dKW #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-vIDUUaDr5oPq5dKW .sequenceNumber{fill:white;}#mermaid-svg-vIDUUaDr5oPq5dKW #sequencenumber{fill:#333;}#mermaid-svg-vIDUUaDr5oPq5dKW #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-vIDUUaDr5oPq5dKW .messageText{fill:#333;stroke:#333;}#mermaid-svg-vIDUUaDr5oPq5dKW .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-vIDUUaDr5oPq5dKW .labelText,#mermaid-svg-vIDUUaDr5oPq5dKW .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-vIDUUaDr5oPq5dKW .loopText,#mermaid-svg-vIDUUaDr5oPq5dKW .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-vIDUUaDr5oPq5dKW .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-vIDUUaDr5oPq5dKW .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-vIDUUaDr5oPq5dKW .noteText,#mermaid-svg-vIDUUaDr5oPq5dKW .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-vIDUUaDr5oPq5dKW .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-vIDUUaDr5oPq5dKW .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-vIDUUaDr5oPq5dKW .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-vIDUUaDr5oPq5dKW .actorPopupMenu{position:absolute;}#mermaid-svg-vIDUUaDr5oPq5dKW .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-vIDUUaDr5oPq5dKW .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-vIDUUaDr5oPq5dKW .actor-man circle,#mermaid-svg-vIDUUaDr5oPq5dKW line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-vIDUUaDr5oPq5dKW :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}学生系统录入信息更新信息学生系统UML图之类图
在面向对象的模型中类图常用来表达系统的类、属性、操作又叫方法以及类之间的关系。
类图中常见的关系
①泛化Generalization一种继承关系即一般与特殊的关系它指定了子类如何特化父类的所有特征和行为。 表示带三角箭头的实线箭头指向父类。
②实现Realization一种类与接口的关系即类是接口所有特征和行为的实现。 表示带三角箭头的虚线箭头指向接口。
③关联Association)一种拥有关系它使一个类知道另一个类的属性和方法。 表示带普通箭头的实心线指向被拥有者。
④聚合Aggregation整体与部分的关系且部分可以离开整体而单独存在。 注聚合关系是关联关系的一种是强的关联关系关联和聚合在语义上无法区分必须考察具体的逻辑关系。 表示带空心菱形的实心线菱形指向整体。
⑤组合(Composition)整体与部分的关系但部分不能离开整体而单独存在。 注组合关系也是关联关系的一种但相比于聚合组合是一种更强的关联关系。 表示带实心菱形的实线菱形指向整体。
⑥依赖(Dependency)一种使用的关系即一个类的实现需要另一个类的协助因此尽量不要使用双向的互相依赖。 表示带箭头的虚线指向被使用者。
各种关系的强弱顺序 泛化 实现 组合 聚合 关联 依赖
关于不同类型关系的语法
关系表达含义示意图|--继承*--组合o--聚合--关联--实线连接..依赖..|实现..虚线连接
Mermaid中类图的简单例子
样例
在下面这段文字代码块中的前面和后面一行各自添加键盘左上与~共用一个键即可生成如下图的展示结果(注意在使用时需要增加mermaid标识加在前面那三点的后面)。 classDiagram动物 .. 水动物 .. 氧气动物 |-- 鸟鸟 |-- 老鹰鸟 |-- 白鹭鸟 |-- 天鹅鸟 1*--2 翅膀天鹅群1o--n天鹅天鹅..|飞翔白鹭1--1气候动物: 生命动物: 性别动物: 新陈代谢(int 氧气,int 水)动物: 繁衍后代()飞翔: 飞()class 鸟{羽毛进食()下蛋()}class 老鹰{-鹰眼视力-抓田鼠()-下蛋()}class 白鹭{野生自然捕鱼()下蛋()}class 天鹅{黑色与白色捕鱼()下蛋()}#mermaid-svg-jgV6PwBM9mXGbwFQ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-jgV6PwBM9mXGbwFQ .error-icon{fill:#552222;}#mermaid-svg-jgV6PwBM9mXGbwFQ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-jgV6PwBM9mXGbwFQ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-jgV6PwBM9mXGbwFQ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-jgV6PwBM9mXGbwFQ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-jgV6PwBM9mXGbwFQ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-jgV6PwBM9mXGbwFQ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-jgV6PwBM9mXGbwFQ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-jgV6PwBM9mXGbwFQ .marker.cross{stroke:#333333;}#mermaid-svg-jgV6PwBM9mXGbwFQ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-jgV6PwBM9mXGbwFQ g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-jgV6PwBM9mXGbwFQ g.classGroup text .title{font-weight:bolder;}#mermaid-svg-jgV6PwBM9mXGbwFQ .nodeLabel,#mermaid-svg-jgV6PwBM9mXGbwFQ .edgeLabel{color:#131300;}#mermaid-svg-jgV6PwBM9mXGbwFQ .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-jgV6PwBM9mXGbwFQ .label text{fill:#131300;}#mermaid-svg-jgV6PwBM9mXGbwFQ .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-jgV6PwBM9mXGbwFQ .classTitle{font-weight:bolder;}#mermaid-svg-jgV6PwBM9mXGbwFQ .node rect,#mermaid-svg-jgV6PwBM9mXGbwFQ .node circle,#mermaid-svg-jgV6PwBM9mXGbwFQ .node ellipse,#mermaid-svg-jgV6PwBM9mXGbwFQ .node polygon,#mermaid-svg-jgV6PwBM9mXGbwFQ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-jgV6PwBM9mXGbwFQ .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-jgV6PwBM9mXGbwFQ g.clickable{cursor:pointer;}#mermaid-svg-jgV6PwBM9mXGbwFQ g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-jgV6PwBM9mXGbwFQ g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-jgV6PwBM9mXGbwFQ .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-jgV6PwBM9mXGbwFQ .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-jgV6PwBM9mXGbwFQ .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-jgV6PwBM9mXGbwFQ .dashed-line{stroke-dasharray:3;}#mermaid-svg-jgV6PwBM9mXGbwFQ #compositionStart,#mermaid-svg-jgV6PwBM9mXGbwFQ .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-jgV6PwBM9mXGbwFQ #compositionEnd,#mermaid-svg-jgV6PwBM9mXGbwFQ .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-jgV6PwBM9mXGbwFQ #dependencyStart,#mermaid-svg-jgV6PwBM9mXGbwFQ .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-jgV6PwBM9mXGbwFQ #dependencyStart,#mermaid-svg-jgV6PwBM9mXGbwFQ .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-jgV6PwBM9mXGbwFQ #extensionStart,#mermaid-svg-jgV6PwBM9mXGbwFQ .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-jgV6PwBM9mXGbwFQ #extensionEnd,#mermaid-svg-jgV6PwBM9mXGbwFQ .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-jgV6PwBM9mXGbwFQ #aggregationStart,#mermaid-svg-jgV6PwBM9mXGbwFQ .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-jgV6PwBM9mXGbwFQ #aggregationEnd,#mermaid-svg-jgV6PwBM9mXGbwFQ .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-jgV6PwBM9mXGbwFQ .edgeTerminals{font-size:11px;}#mermaid-svg-jgV6PwBM9mXGbwFQ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}121n11动物 生命 性别新陈代谢(int 氧气,int 水)繁衍后代()水氧气鸟羽毛进食()下蛋()老鹰-鹰眼视力-抓田鼠()-下蛋()白鹭野生自然捕鱼()下蛋()天鹅黑色与白色捕鱼()下蛋()翅膀天鹅群飞翔飞()气候类定义的两种方式
使用关键词class来定义一个类。 如class Animal可以定义一个Animal的类
classDiagramclass Animal#mermaid-svg-4cluTNd8EwnBOCWb {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-4cluTNd8EwnBOCWb .error-icon{fill:#552222;}#mermaid-svg-4cluTNd8EwnBOCWb .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-4cluTNd8EwnBOCWb .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-4cluTNd8EwnBOCWb .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-4cluTNd8EwnBOCWb .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-4cluTNd8EwnBOCWb .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-4cluTNd8EwnBOCWb .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-4cluTNd8EwnBOCWb .marker{fill:#333333;stroke:#333333;}#mermaid-svg-4cluTNd8EwnBOCWb .marker.cross{stroke:#333333;}#mermaid-svg-4cluTNd8EwnBOCWb svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-4cluTNd8EwnBOCWb g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-4cluTNd8EwnBOCWb g.classGroup text .title{font-weight:bolder;}#mermaid-svg-4cluTNd8EwnBOCWb .nodeLabel,#mermaid-svg-4cluTNd8EwnBOCWb .edgeLabel{color:#131300;}#mermaid-svg-4cluTNd8EwnBOCWb .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-4cluTNd8EwnBOCWb .label text{fill:#131300;}#mermaid-svg-4cluTNd8EwnBOCWb .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-4cluTNd8EwnBOCWb .classTitle{font-weight:bolder;}#mermaid-svg-4cluTNd8EwnBOCWb .node rect,#mermaid-svg-4cluTNd8EwnBOCWb .node circle,#mermaid-svg-4cluTNd8EwnBOCWb .node ellipse,#mermaid-svg-4cluTNd8EwnBOCWb .node polygon,#mermaid-svg-4cluTNd8EwnBOCWb .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-4cluTNd8EwnBOCWb .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-4cluTNd8EwnBOCWb g.clickable{cursor:pointer;}#mermaid-svg-4cluTNd8EwnBOCWb g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-4cluTNd8EwnBOCWb g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-4cluTNd8EwnBOCWb .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-4cluTNd8EwnBOCWb .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-4cluTNd8EwnBOCWb .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-4cluTNd8EwnBOCWb .dashed-line{stroke-dasharray:3;}#mermaid-svg-4cluTNd8EwnBOCWb #compositionStart,#mermaid-svg-4cluTNd8EwnBOCWb .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-4cluTNd8EwnBOCWb #compositionEnd,#mermaid-svg-4cluTNd8EwnBOCWb .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-4cluTNd8EwnBOCWb #dependencyStart,#mermaid-svg-4cluTNd8EwnBOCWb .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-4cluTNd8EwnBOCWb #dependencyStart,#mermaid-svg-4cluTNd8EwnBOCWb .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-4cluTNd8EwnBOCWb #extensionStart,#mermaid-svg-4cluTNd8EwnBOCWb .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-4cluTNd8EwnBOCWb #extensionEnd,#mermaid-svg-4cluTNd8EwnBOCWb .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-4cluTNd8EwnBOCWb #aggregationStart,#mermaid-svg-4cluTNd8EwnBOCWb .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-4cluTNd8EwnBOCWb #aggregationEnd,#mermaid-svg-4cluTNd8EwnBOCWb .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-4cluTNd8EwnBOCWb .edgeTerminals{font-size:11px;}#mermaid-svg-4cluTNd8EwnBOCWb :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}Animal通过两个类之间的关系可以同时定义两个类。 如Vehicle |-- Car表示Car类继承自Vehicle类
classDiagramVehicle |-- Car#mermaid-svg-TE2ewlTzGJxkF7NV {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-TE2ewlTzGJxkF7NV .error-icon{fill:#552222;}#mermaid-svg-TE2ewlTzGJxkF7NV .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-TE2ewlTzGJxkF7NV .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-TE2ewlTzGJxkF7NV .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-TE2ewlTzGJxkF7NV .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-TE2ewlTzGJxkF7NV .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-TE2ewlTzGJxkF7NV .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-TE2ewlTzGJxkF7NV .marker{fill:#333333;stroke:#333333;}#mermaid-svg-TE2ewlTzGJxkF7NV .marker.cross{stroke:#333333;}#mermaid-svg-TE2ewlTzGJxkF7NV svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-TE2ewlTzGJxkF7NV g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-TE2ewlTzGJxkF7NV g.classGroup text .title{font-weight:bolder;}#mermaid-svg-TE2ewlTzGJxkF7NV .nodeLabel,#mermaid-svg-TE2ewlTzGJxkF7NV .edgeLabel{color:#131300;}#mermaid-svg-TE2ewlTzGJxkF7NV .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-TE2ewlTzGJxkF7NV .label text{fill:#131300;}#mermaid-svg-TE2ewlTzGJxkF7NV .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-TE2ewlTzGJxkF7NV .classTitle{font-weight:bolder;}#mermaid-svg-TE2ewlTzGJxkF7NV .node rect,#mermaid-svg-TE2ewlTzGJxkF7NV .node circle,#mermaid-svg-TE2ewlTzGJxkF7NV .node ellipse,#mermaid-svg-TE2ewlTzGJxkF7NV .node polygon,#mermaid-svg-TE2ewlTzGJxkF7NV .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-TE2ewlTzGJxkF7NV .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-TE2ewlTzGJxkF7NV g.clickable{cursor:pointer;}#mermaid-svg-TE2ewlTzGJxkF7NV g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-TE2ewlTzGJxkF7NV g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-TE2ewlTzGJxkF7NV .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-TE2ewlTzGJxkF7NV .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-TE2ewlTzGJxkF7NV .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-TE2ewlTzGJxkF7NV .dashed-line{stroke-dasharray:3;}#mermaid-svg-TE2ewlTzGJxkF7NV #compositionStart,#mermaid-svg-TE2ewlTzGJxkF7NV .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-TE2ewlTzGJxkF7NV #compositionEnd,#mermaid-svg-TE2ewlTzGJxkF7NV .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-TE2ewlTzGJxkF7NV #dependencyStart,#mermaid-svg-TE2ewlTzGJxkF7NV .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-TE2ewlTzGJxkF7NV #dependencyStart,#mermaid-svg-TE2ewlTzGJxkF7NV .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-TE2ewlTzGJxkF7NV #extensionStart,#mermaid-svg-TE2ewlTzGJxkF7NV .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-TE2ewlTzGJxkF7NV #extensionEnd,#mermaid-svg-TE2ewlTzGJxkF7NV .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-TE2ewlTzGJxkF7NV #aggregationStart,#mermaid-svg-TE2ewlTzGJxkF7NV .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-TE2ewlTzGJxkF7NV #aggregationEnd,#mermaid-svg-TE2ewlTzGJxkF7NV .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-TE2ewlTzGJxkF7NV .edgeTerminals{font-size:11px;}#mermaid-svg-TE2ewlTzGJxkF7NV :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}VehicleCar需要注意的是类名应该只由字母、数字、字符包括Unicode和下划线组成。
为类定义成员
类通常有其特有的属性和方法方法用到的参数通常在后面用()括起来。
而属性与方法的访问级别修饰符表示通常在冒号后面用一个符号来表示对应的关系如下表所示
符号访问级别修饰符Public-Private#Protected~Package/Internal
如果想表示抽象方法或者是静态方法或静态变量可以分别使用*和$符号标明
抽象方法someAbstractMethod()*静态方法someStaticMethod()$静态变量String someField$
同样的有两种方法来定义类的成员
在类后面使用:冒号后面跟类成员。这种方式适用于一次定义一个成员。
classDiagram
class Person
Person: String name
Person: int age
Person: work(time) bool
Person: study(time) int#mermaid-svg-U7I4WAcIXtB9dFZt {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-U7I4WAcIXtB9dFZt .error-icon{fill:#552222;}#mermaid-svg-U7I4WAcIXtB9dFZt .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-U7I4WAcIXtB9dFZt .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-U7I4WAcIXtB9dFZt .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-U7I4WAcIXtB9dFZt .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-U7I4WAcIXtB9dFZt .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-U7I4WAcIXtB9dFZt .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-U7I4WAcIXtB9dFZt .marker{fill:#333333;stroke:#333333;}#mermaid-svg-U7I4WAcIXtB9dFZt .marker.cross{stroke:#333333;}#mermaid-svg-U7I4WAcIXtB9dFZt svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-U7I4WAcIXtB9dFZt g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-U7I4WAcIXtB9dFZt g.classGroup text .title{font-weight:bolder;}#mermaid-svg-U7I4WAcIXtB9dFZt .nodeLabel,#mermaid-svg-U7I4WAcIXtB9dFZt .edgeLabel{color:#131300;}#mermaid-svg-U7I4WAcIXtB9dFZt .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-U7I4WAcIXtB9dFZt .label text{fill:#131300;}#mermaid-svg-U7I4WAcIXtB9dFZt .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-U7I4WAcIXtB9dFZt .classTitle{font-weight:bolder;}#mermaid-svg-U7I4WAcIXtB9dFZt .node rect,#mermaid-svg-U7I4WAcIXtB9dFZt .node circle,#mermaid-svg-U7I4WAcIXtB9dFZt .node ellipse,#mermaid-svg-U7I4WAcIXtB9dFZt .node polygon,#mermaid-svg-U7I4WAcIXtB9dFZt .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-U7I4WAcIXtB9dFZt .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-U7I4WAcIXtB9dFZt g.clickable{cursor:pointer;}#mermaid-svg-U7I4WAcIXtB9dFZt g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-U7I4WAcIXtB9dFZt g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-U7I4WAcIXtB9dFZt .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-U7I4WAcIXtB9dFZt .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-U7I4WAcIXtB9dFZt .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-U7I4WAcIXtB9dFZt .dashed-line{stroke-dasharray:3;}#mermaid-svg-U7I4WAcIXtB9dFZt #compositionStart,#mermaid-svg-U7I4WAcIXtB9dFZt .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-U7I4WAcIXtB9dFZt #compositionEnd,#mermaid-svg-U7I4WAcIXtB9dFZt .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-U7I4WAcIXtB9dFZt #dependencyStart,#mermaid-svg-U7I4WAcIXtB9dFZt .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-U7I4WAcIXtB9dFZt #dependencyStart,#mermaid-svg-U7I4WAcIXtB9dFZt .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-U7I4WAcIXtB9dFZt #extensionStart,#mermaid-svg-U7I4WAcIXtB9dFZt .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-U7I4WAcIXtB9dFZt #extensionEnd,#mermaid-svg-U7I4WAcIXtB9dFZt .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-U7I4WAcIXtB9dFZt #aggregationStart,#mermaid-svg-U7I4WAcIXtB9dFZt .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-U7I4WAcIXtB9dFZt #aggregationEnd,#mermaid-svg-U7I4WAcIXtB9dFZt .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-U7I4WAcIXtB9dFZt .edgeTerminals{font-size:11px;}#mermaid-svg-U7I4WAcIXtB9dFZt :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}PersonString nameint agework(time) : boolstudy(time) : int使用{}将类成员括起来。这种方式适用于一次定义多个成员。
classDiagram
class Person{String nameint agework(time) boolstudy(time) int
}#mermaid-svg-CCdhhAMVgMOa1Xto {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-CCdhhAMVgMOa1Xto .error-icon{fill:#552222;}#mermaid-svg-CCdhhAMVgMOa1Xto .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-CCdhhAMVgMOa1Xto .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-CCdhhAMVgMOa1Xto .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-CCdhhAMVgMOa1Xto .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-CCdhhAMVgMOa1Xto .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-CCdhhAMVgMOa1Xto .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-CCdhhAMVgMOa1Xto .marker{fill:#333333;stroke:#333333;}#mermaid-svg-CCdhhAMVgMOa1Xto .marker.cross{stroke:#333333;}#mermaid-svg-CCdhhAMVgMOa1Xto svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-CCdhhAMVgMOa1Xto g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-CCdhhAMVgMOa1Xto g.classGroup text .title{font-weight:bolder;}#mermaid-svg-CCdhhAMVgMOa1Xto .nodeLabel,#mermaid-svg-CCdhhAMVgMOa1Xto .edgeLabel{color:#131300;}#mermaid-svg-CCdhhAMVgMOa1Xto .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-CCdhhAMVgMOa1Xto .label text{fill:#131300;}#mermaid-svg-CCdhhAMVgMOa1Xto .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-CCdhhAMVgMOa1Xto .classTitle{font-weight:bolder;}#mermaid-svg-CCdhhAMVgMOa1Xto .node rect,#mermaid-svg-CCdhhAMVgMOa1Xto .node circle,#mermaid-svg-CCdhhAMVgMOa1Xto .node ellipse,#mermaid-svg-CCdhhAMVgMOa1Xto .node polygon,#mermaid-svg-CCdhhAMVgMOa1Xto .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-CCdhhAMVgMOa1Xto .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-CCdhhAMVgMOa1Xto g.clickable{cursor:pointer;}#mermaid-svg-CCdhhAMVgMOa1Xto g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-CCdhhAMVgMOa1Xto g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-CCdhhAMVgMOa1Xto .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-CCdhhAMVgMOa1Xto .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-CCdhhAMVgMOa1Xto .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-CCdhhAMVgMOa1Xto .dashed-line{stroke-dasharray:3;}#mermaid-svg-CCdhhAMVgMOa1Xto #compositionStart,#mermaid-svg-CCdhhAMVgMOa1Xto .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-CCdhhAMVgMOa1Xto #compositionEnd,#mermaid-svg-CCdhhAMVgMOa1Xto .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-CCdhhAMVgMOa1Xto #dependencyStart,#mermaid-svg-CCdhhAMVgMOa1Xto .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-CCdhhAMVgMOa1Xto #dependencyStart,#mermaid-svg-CCdhhAMVgMOa1Xto .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-CCdhhAMVgMOa1Xto #extensionStart,#mermaid-svg-CCdhhAMVgMOa1Xto .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-CCdhhAMVgMOa1Xto #extensionEnd,#mermaid-svg-CCdhhAMVgMOa1Xto .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-CCdhhAMVgMOa1Xto #aggregationStart,#mermaid-svg-CCdhhAMVgMOa1Xto .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-CCdhhAMVgMOa1Xto #aggregationEnd,#mermaid-svg-CCdhhAMVgMOa1Xto .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-CCdhhAMVgMOa1Xto .edgeTerminals{font-size:11px;}#mermaid-svg-CCdhhAMVgMOa1Xto :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}PersonString nameint agework(time) : boolstudy(time) : int注如果方法有返回值那么返回值类型可以在方法后加一个空格并加上其返回值类型。
如果成员变量中含有泛型那么像Listint是这样表示的List~int~。即使用了~ ~来表示了 。
classDiagram
class Square~Shape~{int idList~int~ positionsetPoints(List~int~ points)getPoints() List~int~
}Square : List~string~ messages
Square : setMessages(List~string~ messages)
Square : getMessages() List~string~
Square : getDistanceMatrix() List~List~int~~#mermaid-svg-PW2ZYd2j4xoLA7B4 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .error-icon{fill:#552222;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .marker.cross{stroke:#333333;}#mermaid-svg-PW2ZYd2j4xoLA7B4 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-PW2ZYd2j4xoLA7B4 g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-PW2ZYd2j4xoLA7B4 g.classGroup text .title{font-weight:bolder;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .nodeLabel,#mermaid-svg-PW2ZYd2j4xoLA7B4 .edgeLabel{color:#131300;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .label text{fill:#131300;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .classTitle{font-weight:bolder;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .node rect,#mermaid-svg-PW2ZYd2j4xoLA7B4 .node circle,#mermaid-svg-PW2ZYd2j4xoLA7B4 .node ellipse,#mermaid-svg-PW2ZYd2j4xoLA7B4 .node polygon,#mermaid-svg-PW2ZYd2j4xoLA7B4 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-PW2ZYd2j4xoLA7B4 g.clickable{cursor:pointer;}#mermaid-svg-PW2ZYd2j4xoLA7B4 g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-PW2ZYd2j4xoLA7B4 g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .dashed-line{stroke-dasharray:3;}#mermaid-svg-PW2ZYd2j4xoLA7B4 #compositionStart,#mermaid-svg-PW2ZYd2j4xoLA7B4 .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-PW2ZYd2j4xoLA7B4 #compositionEnd,#mermaid-svg-PW2ZYd2j4xoLA7B4 .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-PW2ZYd2j4xoLA7B4 #dependencyStart,#mermaid-svg-PW2ZYd2j4xoLA7B4 .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-PW2ZYd2j4xoLA7B4 #dependencyStart,#mermaid-svg-PW2ZYd2j4xoLA7B4 .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-PW2ZYd2j4xoLA7B4 #extensionStart,#mermaid-svg-PW2ZYd2j4xoLA7B4 .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-PW2ZYd2j4xoLA7B4 #extensionEnd,#mermaid-svg-PW2ZYd2j4xoLA7B4 .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-PW2ZYd2j4xoLA7B4 #aggregationStart,#mermaid-svg-PW2ZYd2j4xoLA7B4 .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-PW2ZYd2j4xoLA7B4 #aggregationEnd,#mermaid-svg-PW2ZYd2j4xoLA7B4 .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-PW2ZYd2j4xoLA7B4 .edgeTerminals{font-size:11px;}#mermaid-svg-PW2ZYd2j4xoLA7B4 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}SquareShapeint idListint positionListstring messagessetPoints(Listint points)getPoints() : ListintsetMessages(Liststring messages)getMessages() : ListstringgetDistanceMatrix()双向关系的表示
关系可以表示逻辑上N:M的联系。 一个简单的例子如下
classDiagramAnimal |--| Zebra#mermaid-svg-euGkdbJAxSd3BHEj {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-euGkdbJAxSd3BHEj .error-icon{fill:#552222;}#mermaid-svg-euGkdbJAxSd3BHEj .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-euGkdbJAxSd3BHEj .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-euGkdbJAxSd3BHEj .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-euGkdbJAxSd3BHEj .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-euGkdbJAxSd3BHEj .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-euGkdbJAxSd3BHEj .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-euGkdbJAxSd3BHEj .marker{fill:#333333;stroke:#333333;}#mermaid-svg-euGkdbJAxSd3BHEj .marker.cross{stroke:#333333;}#mermaid-svg-euGkdbJAxSd3BHEj svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-euGkdbJAxSd3BHEj g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-euGkdbJAxSd3BHEj g.classGroup text .title{font-weight:bolder;}#mermaid-svg-euGkdbJAxSd3BHEj .nodeLabel,#mermaid-svg-euGkdbJAxSd3BHEj .edgeLabel{color:#131300;}#mermaid-svg-euGkdbJAxSd3BHEj .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-euGkdbJAxSd3BHEj .label text{fill:#131300;}#mermaid-svg-euGkdbJAxSd3BHEj .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-euGkdbJAxSd3BHEj .classTitle{font-weight:bolder;}#mermaid-svg-euGkdbJAxSd3BHEj .node rect,#mermaid-svg-euGkdbJAxSd3BHEj .node circle,#mermaid-svg-euGkdbJAxSd3BHEj .node ellipse,#mermaid-svg-euGkdbJAxSd3BHEj .node polygon,#mermaid-svg-euGkdbJAxSd3BHEj .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-euGkdbJAxSd3BHEj .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-euGkdbJAxSd3BHEj g.clickable{cursor:pointer;}#mermaid-svg-euGkdbJAxSd3BHEj g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-euGkdbJAxSd3BHEj g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-euGkdbJAxSd3BHEj .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-euGkdbJAxSd3BHEj .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-euGkdbJAxSd3BHEj .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-euGkdbJAxSd3BHEj .dashed-line{stroke-dasharray:3;}#mermaid-svg-euGkdbJAxSd3BHEj #compositionStart,#mermaid-svg-euGkdbJAxSd3BHEj .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-euGkdbJAxSd3BHEj #compositionEnd,#mermaid-svg-euGkdbJAxSd3BHEj .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-euGkdbJAxSd3BHEj #dependencyStart,#mermaid-svg-euGkdbJAxSd3BHEj .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-euGkdbJAxSd3BHEj #dependencyStart,#mermaid-svg-euGkdbJAxSd3BHEj .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-euGkdbJAxSd3BHEj #extensionStart,#mermaid-svg-euGkdbJAxSd3BHEj .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-euGkdbJAxSd3BHEj #extensionEnd,#mermaid-svg-euGkdbJAxSd3BHEj .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-euGkdbJAxSd3BHEj #aggregationStart,#mermaid-svg-euGkdbJAxSd3BHEj .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-euGkdbJAxSd3BHEj #aggregationEnd,#mermaid-svg-euGkdbJAxSd3BHEj .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-euGkdbJAxSd3BHEj .edgeTerminals{font-size:11px;}#mermaid-svg-euGkdbJAxSd3BHEj :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}AnimalZebra双向关系的语法格式
[关系类型][连接][关系类型]其中关系类型如下表所示
关系类型说明|继承\*组合o聚合关联关联|实现
其中连接如下表所示
连接类型说明--实线..虚线
多重性关系的表示
类图中的多重性或者叫基数表示一个类有多少实例可以与另一个类的实例形成关系。
不同的基数表示方法
1一个0..1零个或一个1..*一个或多个*零个或多个nn个0..n零到n个1..n一到n个
基数可以在箭头表示的关系左右加上引号和以上的基数表示
classDiagramCustomer 1 -- * TicketStudent 1 -- 1..* CourseGalaxy -- many Star : Contains#mermaid-svg-FTK05G0PS7OYIuTC {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-FTK05G0PS7OYIuTC .error-icon{fill:#552222;}#mermaid-svg-FTK05G0PS7OYIuTC .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-FTK05G0PS7OYIuTC .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-FTK05G0PS7OYIuTC .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-FTK05G0PS7OYIuTC .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-FTK05G0PS7OYIuTC .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-FTK05G0PS7OYIuTC .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-FTK05G0PS7OYIuTC .marker{fill:#333333;stroke:#333333;}#mermaid-svg-FTK05G0PS7OYIuTC .marker.cross{stroke:#333333;}#mermaid-svg-FTK05G0PS7OYIuTC svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-FTK05G0PS7OYIuTC g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-FTK05G0PS7OYIuTC g.classGroup text .title{font-weight:bolder;}#mermaid-svg-FTK05G0PS7OYIuTC .nodeLabel,#mermaid-svg-FTK05G0PS7OYIuTC .edgeLabel{color:#131300;}#mermaid-svg-FTK05G0PS7OYIuTC .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-FTK05G0PS7OYIuTC .label text{fill:#131300;}#mermaid-svg-FTK05G0PS7OYIuTC .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-FTK05G0PS7OYIuTC .classTitle{font-weight:bolder;}#mermaid-svg-FTK05G0PS7OYIuTC .node rect,#mermaid-svg-FTK05G0PS7OYIuTC .node circle,#mermaid-svg-FTK05G0PS7OYIuTC .node ellipse,#mermaid-svg-FTK05G0PS7OYIuTC .node polygon,#mermaid-svg-FTK05G0PS7OYIuTC .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-FTK05G0PS7OYIuTC .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-FTK05G0PS7OYIuTC g.clickable{cursor:pointer;}#mermaid-svg-FTK05G0PS7OYIuTC g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-FTK05G0PS7OYIuTC g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-FTK05G0PS7OYIuTC .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-FTK05G0PS7OYIuTC .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-FTK05G0PS7OYIuTC .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-FTK05G0PS7OYIuTC .dashed-line{stroke-dasharray:3;}#mermaid-svg-FTK05G0PS7OYIuTC #compositionStart,#mermaid-svg-FTK05G0PS7OYIuTC .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-FTK05G0PS7OYIuTC #compositionEnd,#mermaid-svg-FTK05G0PS7OYIuTC .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-FTK05G0PS7OYIuTC #dependencyStart,#mermaid-svg-FTK05G0PS7OYIuTC .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-FTK05G0PS7OYIuTC #dependencyStart,#mermaid-svg-FTK05G0PS7OYIuTC .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-FTK05G0PS7OYIuTC #extensionStart,#mermaid-svg-FTK05G0PS7OYIuTC .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-FTK05G0PS7OYIuTC #extensionEnd,#mermaid-svg-FTK05G0PS7OYIuTC .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-FTK05G0PS7OYIuTC #aggregationStart,#mermaid-svg-FTK05G0PS7OYIuTC .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-FTK05G0PS7OYIuTC #aggregationEnd,#mermaid-svg-FTK05G0PS7OYIuTC .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-FTK05G0PS7OYIuTC .edgeTerminals{font-size:11px;}#mermaid-svg-FTK05G0PS7OYIuTC :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}1*11..*nCustomerTicketStudentCourseGalaxyStarUML之状态图
状态图主要用于描述一个特定的对象的所有可能状态以及由于各种事件的发生而引起的状态之间的转换。
状态图的构成要素
状态States在对象的生命周期中满足某些条件、执行某些活动或等待某些事件的一个条件或状况。所有的对象都有状态状态是对象执行了一系列活动的结果当某个事件发生后对象的状态将发生变化。 状态图中可以包含0个多个开始状态也可以包含多个结束状态。模型不必同时具有开始和结束状态因为模型可以总是运行从不停止。转移Transitions两个状态之间的一种关系表示对象将在第一个状态中执行一定的动作并在某个特定事件发生或某个特定条件满足时进入第二个状态。
#mermaid-svg-7YF28yiBpIMBeVrr {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-7YF28yiBpIMBeVrr .error-icon{fill:#552222;}#mermaid-svg-7YF28yiBpIMBeVrr .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-7YF28yiBpIMBeVrr .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-7YF28yiBpIMBeVrr .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-7YF28yiBpIMBeVrr .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-7YF28yiBpIMBeVrr .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-7YF28yiBpIMBeVrr .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-7YF28yiBpIMBeVrr .marker{fill:#333333;stroke:#333333;}#mermaid-svg-7YF28yiBpIMBeVrr .marker.cross{stroke:#333333;}#mermaid-svg-7YF28yiBpIMBeVrr svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-7YF28yiBpIMBeVrr defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-7YF28yiBpIMBeVrr g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-7YF28yiBpIMBeVrr g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-7YF28yiBpIMBeVrr g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-7YF28yiBpIMBeVrr g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-7YF28yiBpIMBeVrr g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-7YF28yiBpIMBeVrr .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-7YF28yiBpIMBeVrr .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-7YF28yiBpIMBeVrr .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-7YF28yiBpIMBeVrr .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-7YF28yiBpIMBeVrr .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-7YF28yiBpIMBeVrr .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-7YF28yiBpIMBeVrr .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-7YF28yiBpIMBeVrr .edgeLabel .label text{fill:#333;}#mermaid-svg-7YF28yiBpIMBeVrr .label div .edgeLabel{color:#333;}#mermaid-svg-7YF28yiBpIMBeVrr .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-7YF28yiBpIMBeVrr .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-7YF28yiBpIMBeVrr .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-7YF28yiBpIMBeVrr .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-7YF28yiBpIMBeVrr .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-7YF28yiBpIMBeVrr .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-7YF28yiBpIMBeVrr .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-7YF28yiBpIMBeVrr #statediagram-barbEnd{fill:#333333;}#mermaid-svg-7YF28yiBpIMBeVrr .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-7YF28yiBpIMBeVrr .cluster-label,#mermaid-svg-7YF28yiBpIMBeVrr .nodeLabel{color:#131300;}#mermaid-svg-7YF28yiBpIMBeVrr .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-7YF28yiBpIMBeVrr .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-7YF28yiBpIMBeVrr .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-7YF28yiBpIMBeVrr .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-7YF28yiBpIMBeVrr .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-7YF28yiBpIMBeVrr .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-7YF28yiBpIMBeVrr .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-7YF28yiBpIMBeVrr .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-7YF28yiBpIMBeVrr .note-edge{stroke-dasharray:5;}#mermaid-svg-7YF28yiBpIMBeVrr .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-7YF28yiBpIMBeVrr .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-7YF28yiBpIMBeVrr .statediagram-note text{fill:black;}#mermaid-svg-7YF28yiBpIMBeVrr .statediagram-note .nodeLabel{color:black;}#mermaid-svg-7YF28yiBpIMBeVrr .statediagram .edgeLabel{color:red;}#mermaid-svg-7YF28yiBpIMBeVrr #dependencyStart,#mermaid-svg-7YF28yiBpIMBeVrr #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-7YF28yiBpIMBeVrr :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}StateAStateB事件使状态发生变化的某时刻发生的动作或活动用来指示是什么触发了转移从而导致状态发生了改变。事件通常在从一个状态到另一个状态的转移路径上直接指定。判断判断点通过对事件判断分组转移到各自方向提高了状态图的可视性。
#mermaid-svg-8nedwTXSkfxnTlIE {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8nedwTXSkfxnTlIE .error-icon{fill:#552222;}#mermaid-svg-8nedwTXSkfxnTlIE .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-8nedwTXSkfxnTlIE .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-8nedwTXSkfxnTlIE .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-8nedwTXSkfxnTlIE .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-8nedwTXSkfxnTlIE .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-8nedwTXSkfxnTlIE .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-8nedwTXSkfxnTlIE .marker{fill:#333333;stroke:#333333;}#mermaid-svg-8nedwTXSkfxnTlIE .marker.cross{stroke:#333333;}#mermaid-svg-8nedwTXSkfxnTlIE svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-8nedwTXSkfxnTlIE defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-8nedwTXSkfxnTlIE g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-8nedwTXSkfxnTlIE g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-8nedwTXSkfxnTlIE g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-8nedwTXSkfxnTlIE g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-8nedwTXSkfxnTlIE g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-8nedwTXSkfxnTlIE .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-8nedwTXSkfxnTlIE .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-8nedwTXSkfxnTlIE .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-8nedwTXSkfxnTlIE .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-8nedwTXSkfxnTlIE .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-8nedwTXSkfxnTlIE .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-8nedwTXSkfxnTlIE .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-8nedwTXSkfxnTlIE .edgeLabel .label text{fill:#333;}#mermaid-svg-8nedwTXSkfxnTlIE .label div .edgeLabel{color:#333;}#mermaid-svg-8nedwTXSkfxnTlIE .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-8nedwTXSkfxnTlIE .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-8nedwTXSkfxnTlIE .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-8nedwTXSkfxnTlIE .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-8nedwTXSkfxnTlIE .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-8nedwTXSkfxnTlIE .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-8nedwTXSkfxnTlIE .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-8nedwTXSkfxnTlIE #statediagram-barbEnd{fill:#333333;}#mermaid-svg-8nedwTXSkfxnTlIE .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-8nedwTXSkfxnTlIE .cluster-label,#mermaid-svg-8nedwTXSkfxnTlIE .nodeLabel{color:#131300;}#mermaid-svg-8nedwTXSkfxnTlIE .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-8nedwTXSkfxnTlIE .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-8nedwTXSkfxnTlIE .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-8nedwTXSkfxnTlIE .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-8nedwTXSkfxnTlIE .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-8nedwTXSkfxnTlIE .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-8nedwTXSkfxnTlIE .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-8nedwTXSkfxnTlIE .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-8nedwTXSkfxnTlIE .note-edge{stroke-dasharray:5;}#mermaid-svg-8nedwTXSkfxnTlIE .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-8nedwTXSkfxnTlIE .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-8nedwTXSkfxnTlIE .statediagram-note text{fill:black;}#mermaid-svg-8nedwTXSkfxnTlIE .statediagram-note .nodeLabel{color:black;}#mermaid-svg-8nedwTXSkfxnTlIE .statediagram .edgeLabel{color:red;}#mermaid-svg-8nedwTXSkfxnTlIE #dependencyStart,#mermaid-svg-8nedwTXSkfxnTlIE #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-8nedwTXSkfxnTlIE :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}StateAStateBStateCStateD同步使用同步和活动图一样是为了说明并发工作流的分叉与联合。
#mermaid-svg-lOSnAG6h1su8IMRB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-lOSnAG6h1su8IMRB .error-icon{fill:#552222;}#mermaid-svg-lOSnAG6h1su8IMRB .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-lOSnAG6h1su8IMRB .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-lOSnAG6h1su8IMRB .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-lOSnAG6h1su8IMRB .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-lOSnAG6h1su8IMRB .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-lOSnAG6h1su8IMRB .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-lOSnAG6h1su8IMRB .marker{fill:#333333;stroke:#333333;}#mermaid-svg-lOSnAG6h1su8IMRB .marker.cross{stroke:#333333;}#mermaid-svg-lOSnAG6h1su8IMRB svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-lOSnAG6h1su8IMRB defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-lOSnAG6h1su8IMRB g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-lOSnAG6h1su8IMRB g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-lOSnAG6h1su8IMRB g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-lOSnAG6h1su8IMRB g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-lOSnAG6h1su8IMRB g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-lOSnAG6h1su8IMRB .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-lOSnAG6h1su8IMRB .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-lOSnAG6h1su8IMRB .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-lOSnAG6h1su8IMRB .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-lOSnAG6h1su8IMRB .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-lOSnAG6h1su8IMRB .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-lOSnAG6h1su8IMRB .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-lOSnAG6h1su8IMRB .edgeLabel .label text{fill:#333;}#mermaid-svg-lOSnAG6h1su8IMRB .label div .edgeLabel{color:#333;}#mermaid-svg-lOSnAG6h1su8IMRB .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-lOSnAG6h1su8IMRB .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-lOSnAG6h1su8IMRB .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-lOSnAG6h1su8IMRB .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-lOSnAG6h1su8IMRB .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-lOSnAG6h1su8IMRB .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-lOSnAG6h1su8IMRB .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-lOSnAG6h1su8IMRB #statediagram-barbEnd{fill:#333333;}#mermaid-svg-lOSnAG6h1su8IMRB .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-lOSnAG6h1su8IMRB .cluster-label,#mermaid-svg-lOSnAG6h1su8IMRB .nodeLabel{color:#131300;}#mermaid-svg-lOSnAG6h1su8IMRB .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-lOSnAG6h1su8IMRB .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-lOSnAG6h1su8IMRB .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-lOSnAG6h1su8IMRB .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-lOSnAG6h1su8IMRB .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-lOSnAG6h1su8IMRB .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-lOSnAG6h1su8IMRB .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-lOSnAG6h1su8IMRB .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-lOSnAG6h1su8IMRB .note-edge{stroke-dasharray:5;}#mermaid-svg-lOSnAG6h1su8IMRB .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-lOSnAG6h1su8IMRB .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-lOSnAG6h1su8IMRB .statediagram-note text{fill:black;}#mermaid-svg-lOSnAG6h1su8IMRB .statediagram-note .nodeLabel{color:black;}#mermaid-svg-lOSnAG6h1su8IMRB .statediagram .edgeLabel{color:red;}#mermaid-svg-lOSnAG6h1su8IMRB #dependencyStart,#mermaid-svg-lOSnAG6h1su8IMRB #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-lOSnAG6h1su8IMRB :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}StateAStateB注状态图重点在与描述对象的状态及其状态之间的转移与活动图区别在于状态图注重的是行为的结果活动图更注重是行为的动作。
Mermaid中顺序图的简单例子
样例
在下面这段文字代码块中的前面和后面一行各自添加键盘左上与~共用一个键即可生成如下图的展示结果(注意在使用时需要增加mermaid标识加在前面那三点的后面)。
stateDiagram[*] -- 用户登录用户登录 -- 登录成功:验证通过登录成功 -- 填写信息:注册新卡填写信息 -- 存入数据库:信息合理存入数据库-- 提示成功:保存成功提示成功 -- 退出系统:退出退出系统--[*]#mermaid-svg-lqVqXb8CIC4NKLX7 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-lqVqXb8CIC4NKLX7 .error-icon{fill:#552222;}#mermaid-svg-lqVqXb8CIC4NKLX7 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-lqVqXb8CIC4NKLX7 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-lqVqXb8CIC4NKLX7 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-lqVqXb8CIC4NKLX7 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-lqVqXb8CIC4NKLX7 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-lqVqXb8CIC4NKLX7 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-lqVqXb8CIC4NKLX7 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-lqVqXb8CIC4NKLX7 .marker.cross{stroke:#333333;}#mermaid-svg-lqVqXb8CIC4NKLX7 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-lqVqXb8CIC4NKLX7 defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-lqVqXb8CIC4NKLX7 g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-lqVqXb8CIC4NKLX7 g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-lqVqXb8CIC4NKLX7 g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-lqVqXb8CIC4NKLX7 g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-lqVqXb8CIC4NKLX7 g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-lqVqXb8CIC4NKLX7 .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-lqVqXb8CIC4NKLX7 .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-lqVqXb8CIC4NKLX7 .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-lqVqXb8CIC4NKLX7 .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-lqVqXb8CIC4NKLX7 .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-lqVqXb8CIC4NKLX7 .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-lqVqXb8CIC4NKLX7 .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-lqVqXb8CIC4NKLX7 .edgeLabel .label text{fill:#333;}#mermaid-svg-lqVqXb8CIC4NKLX7 .label div .edgeLabel{color:#333;}#mermaid-svg-lqVqXb8CIC4NKLX7 .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-lqVqXb8CIC4NKLX7 .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-lqVqXb8CIC4NKLX7 .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-lqVqXb8CIC4NKLX7 .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-lqVqXb8CIC4NKLX7 .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-lqVqXb8CIC4NKLX7 .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-lqVqXb8CIC4NKLX7 .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-lqVqXb8CIC4NKLX7 #statediagram-barbEnd{fill:#333333;}#mermaid-svg-lqVqXb8CIC4NKLX7 .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-lqVqXb8CIC4NKLX7 .cluster-label,#mermaid-svg-lqVqXb8CIC4NKLX7 .nodeLabel{color:#131300;}#mermaid-svg-lqVqXb8CIC4NKLX7 .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-lqVqXb8CIC4NKLX7 .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-lqVqXb8CIC4NKLX7 .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-lqVqXb8CIC4NKLX7 .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-lqVqXb8CIC4NKLX7 .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-lqVqXb8CIC4NKLX7 .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-lqVqXb8CIC4NKLX7 .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-lqVqXb8CIC4NKLX7 .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-lqVqXb8CIC4NKLX7 .note-edge{stroke-dasharray:5;}#mermaid-svg-lqVqXb8CIC4NKLX7 .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-lqVqXb8CIC4NKLX7 .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-lqVqXb8CIC4NKLX7 .statediagram-note text{fill:black;}#mermaid-svg-lqVqXb8CIC4NKLX7 .statediagram-note .nodeLabel{color:black;}#mermaid-svg-lqVqXb8CIC4NKLX7 .statediagram .edgeLabel{color:red;}#mermaid-svg-lqVqXb8CIC4NKLX7 #dependencyStart,#mermaid-svg-lqVqXb8CIC4NKLX7 #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-lqVqXb8CIC4NKLX7 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}验证通过注册新卡信息合理保存成功退出用户登录登录成功填写信息存入数据库提示成功退出系统状态的表示
状态的表示有多种方式
最简单的是用一个名字来定义一个状态
stateDiagram-v2stateId#mermaid-svg-gynp4qrSiil3iu1M {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-gynp4qrSiil3iu1M .error-icon{fill:#552222;}#mermaid-svg-gynp4qrSiil3iu1M .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-gynp4qrSiil3iu1M .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-gynp4qrSiil3iu1M .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-gynp4qrSiil3iu1M .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-gynp4qrSiil3iu1M .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-gynp4qrSiil3iu1M .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-gynp4qrSiil3iu1M .marker{fill:#333333;stroke:#333333;}#mermaid-svg-gynp4qrSiil3iu1M .marker.cross{stroke:#333333;}#mermaid-svg-gynp4qrSiil3iu1M svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-gynp4qrSiil3iu1M defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-gynp4qrSiil3iu1M g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-gynp4qrSiil3iu1M g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-gynp4qrSiil3iu1M g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-gynp4qrSiil3iu1M g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-gynp4qrSiil3iu1M g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-gynp4qrSiil3iu1M .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-gynp4qrSiil3iu1M .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-gynp4qrSiil3iu1M .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-gynp4qrSiil3iu1M .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-gynp4qrSiil3iu1M .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-gynp4qrSiil3iu1M .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-gynp4qrSiil3iu1M .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-gynp4qrSiil3iu1M .edgeLabel .label text{fill:#333;}#mermaid-svg-gynp4qrSiil3iu1M .label div .edgeLabel{color:#333;}#mermaid-svg-gynp4qrSiil3iu1M .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-gynp4qrSiil3iu1M .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-gynp4qrSiil3iu1M .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-gynp4qrSiil3iu1M .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-gynp4qrSiil3iu1M .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-gynp4qrSiil3iu1M .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-gynp4qrSiil3iu1M .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-gynp4qrSiil3iu1M #statediagram-barbEnd{fill:#333333;}#mermaid-svg-gynp4qrSiil3iu1M .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-gynp4qrSiil3iu1M .cluster-label,#mermaid-svg-gynp4qrSiil3iu1M .nodeLabel{color:#131300;}#mermaid-svg-gynp4qrSiil3iu1M .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-gynp4qrSiil3iu1M .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-gynp4qrSiil3iu1M .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-gynp4qrSiil3iu1M .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-gynp4qrSiil3iu1M .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-gynp4qrSiil3iu1M .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-gynp4qrSiil3iu1M .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-gynp4qrSiil3iu1M .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-gynp4qrSiil3iu1M .note-edge{stroke-dasharray:5;}#mermaid-svg-gynp4qrSiil3iu1M .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-gynp4qrSiil3iu1M .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-gynp4qrSiil3iu1M .statediagram-note text{fill:black;}#mermaid-svg-gynp4qrSiil3iu1M .statediagram-note .nodeLabel{color:black;}#mermaid-svg-gynp4qrSiil3iu1M .statediagram .edgeLabel{color:red;}#mermaid-svg-gynp4qrSiil3iu1M #dependencyStart,#mermaid-svg-gynp4qrSiil3iu1M #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-gynp4qrSiil3iu1M :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}stateId如果要简写状态名则可以使用以下方式
stateDiagram-v2state StateA as s1s1 --StateB#mermaid-svg-3Wdg2OwN27kNfev6 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3Wdg2OwN27kNfev6 .error-icon{fill:#552222;}#mermaid-svg-3Wdg2OwN27kNfev6 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-3Wdg2OwN27kNfev6 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-3Wdg2OwN27kNfev6 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-3Wdg2OwN27kNfev6 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-3Wdg2OwN27kNfev6 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-3Wdg2OwN27kNfev6 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-3Wdg2OwN27kNfev6 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-3Wdg2OwN27kNfev6 .marker.cross{stroke:#333333;}#mermaid-svg-3Wdg2OwN27kNfev6 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-3Wdg2OwN27kNfev6 defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-3Wdg2OwN27kNfev6 g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-3Wdg2OwN27kNfev6 g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-3Wdg2OwN27kNfev6 g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-3Wdg2OwN27kNfev6 g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-3Wdg2OwN27kNfev6 g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-3Wdg2OwN27kNfev6 .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-3Wdg2OwN27kNfev6 .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-3Wdg2OwN27kNfev6 .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-3Wdg2OwN27kNfev6 .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-3Wdg2OwN27kNfev6 .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-3Wdg2OwN27kNfev6 .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-3Wdg2OwN27kNfev6 .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-3Wdg2OwN27kNfev6 .edgeLabel .label text{fill:#333;}#mermaid-svg-3Wdg2OwN27kNfev6 .label div .edgeLabel{color:#333;}#mermaid-svg-3Wdg2OwN27kNfev6 .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-3Wdg2OwN27kNfev6 .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-3Wdg2OwN27kNfev6 .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-3Wdg2OwN27kNfev6 .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-3Wdg2OwN27kNfev6 .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-3Wdg2OwN27kNfev6 .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-3Wdg2OwN27kNfev6 .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-3Wdg2OwN27kNfev6 #statediagram-barbEnd{fill:#333333;}#mermaid-svg-3Wdg2OwN27kNfev6 .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-3Wdg2OwN27kNfev6 .cluster-label,#mermaid-svg-3Wdg2OwN27kNfev6 .nodeLabel{color:#131300;}#mermaid-svg-3Wdg2OwN27kNfev6 .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-3Wdg2OwN27kNfev6 .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-3Wdg2OwN27kNfev6 .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-3Wdg2OwN27kNfev6 .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-3Wdg2OwN27kNfev6 .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-3Wdg2OwN27kNfev6 .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-3Wdg2OwN27kNfev6 .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-3Wdg2OwN27kNfev6 .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-3Wdg2OwN27kNfev6 .note-edge{stroke-dasharray:5;}#mermaid-svg-3Wdg2OwN27kNfev6 .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-3Wdg2OwN27kNfev6 .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-3Wdg2OwN27kNfev6 .statediagram-note text{fill:black;}#mermaid-svg-3Wdg2OwN27kNfev6 .statediagram-note .nodeLabel{color:black;}#mermaid-svg-3Wdg2OwN27kNfev6 .statediagram .edgeLabel{color:red;}#mermaid-svg-3Wdg2OwN27kNfev6 #dependencyStart,#mermaid-svg-3Wdg2OwN27kNfev6 #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-3Wdg2OwN27kNfev6 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}StateAStateB这样在后续就可以直接使用s1来表示StateA了。 3. 简写状态名还可以用冒号的方式
stateDiagram-v2s1 : StateAs1 --StateB#mermaid-svg-QBuMHkWhxYwxxSlX {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-QBuMHkWhxYwxxSlX .error-icon{fill:#552222;}#mermaid-svg-QBuMHkWhxYwxxSlX .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-QBuMHkWhxYwxxSlX .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-QBuMHkWhxYwxxSlX .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-QBuMHkWhxYwxxSlX .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-QBuMHkWhxYwxxSlX .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-QBuMHkWhxYwxxSlX .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-QBuMHkWhxYwxxSlX .marker{fill:#333333;stroke:#333333;}#mermaid-svg-QBuMHkWhxYwxxSlX .marker.cross{stroke:#333333;}#mermaid-svg-QBuMHkWhxYwxxSlX svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-QBuMHkWhxYwxxSlX defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-QBuMHkWhxYwxxSlX g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-QBuMHkWhxYwxxSlX g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-QBuMHkWhxYwxxSlX g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-QBuMHkWhxYwxxSlX g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-QBuMHkWhxYwxxSlX g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-QBuMHkWhxYwxxSlX .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-QBuMHkWhxYwxxSlX .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-QBuMHkWhxYwxxSlX .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-QBuMHkWhxYwxxSlX .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-QBuMHkWhxYwxxSlX .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-QBuMHkWhxYwxxSlX .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-QBuMHkWhxYwxxSlX .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-QBuMHkWhxYwxxSlX .edgeLabel .label text{fill:#333;}#mermaid-svg-QBuMHkWhxYwxxSlX .label div .edgeLabel{color:#333;}#mermaid-svg-QBuMHkWhxYwxxSlX .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-QBuMHkWhxYwxxSlX .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-QBuMHkWhxYwxxSlX .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-QBuMHkWhxYwxxSlX .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-QBuMHkWhxYwxxSlX .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-QBuMHkWhxYwxxSlX .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-QBuMHkWhxYwxxSlX .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-QBuMHkWhxYwxxSlX #statediagram-barbEnd{fill:#333333;}#mermaid-svg-QBuMHkWhxYwxxSlX .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-QBuMHkWhxYwxxSlX .cluster-label,#mermaid-svg-QBuMHkWhxYwxxSlX .nodeLabel{color:#131300;}#mermaid-svg-QBuMHkWhxYwxxSlX .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-QBuMHkWhxYwxxSlX .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-QBuMHkWhxYwxxSlX .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-QBuMHkWhxYwxxSlX .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-QBuMHkWhxYwxxSlX .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-QBuMHkWhxYwxxSlX .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-QBuMHkWhxYwxxSlX .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-QBuMHkWhxYwxxSlX .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-QBuMHkWhxYwxxSlX .note-edge{stroke-dasharray:5;}#mermaid-svg-QBuMHkWhxYwxxSlX .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-QBuMHkWhxYwxxSlX .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-QBuMHkWhxYwxxSlX .statediagram-note text{fill:black;}#mermaid-svg-QBuMHkWhxYwxxSlX .statediagram-note .nodeLabel{color:black;}#mermaid-svg-QBuMHkWhxYwxxSlX .statediagram .edgeLabel{color:red;}#mermaid-svg-QBuMHkWhxYwxxSlX #dependencyStart,#mermaid-svg-QBuMHkWhxYwxxSlX #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-QBuMHkWhxYwxxSlX :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}StateAStateB转移的表示
转移使用箭头--表示。 当在两个状态间定义一个转移时这两个状态也同时会被定义。
stateDiagram-v2s1 -- s2#mermaid-svg-WkTiwMLbwL12Nfvh {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-WkTiwMLbwL12Nfvh .error-icon{fill:#552222;}#mermaid-svg-WkTiwMLbwL12Nfvh .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-WkTiwMLbwL12Nfvh .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-WkTiwMLbwL12Nfvh .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-WkTiwMLbwL12Nfvh .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-WkTiwMLbwL12Nfvh .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-WkTiwMLbwL12Nfvh .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-WkTiwMLbwL12Nfvh .marker{fill:#333333;stroke:#333333;}#mermaid-svg-WkTiwMLbwL12Nfvh .marker.cross{stroke:#333333;}#mermaid-svg-WkTiwMLbwL12Nfvh svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-WkTiwMLbwL12Nfvh defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-WkTiwMLbwL12Nfvh g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-WkTiwMLbwL12Nfvh g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-WkTiwMLbwL12Nfvh g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-WkTiwMLbwL12Nfvh g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-WkTiwMLbwL12Nfvh g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-WkTiwMLbwL12Nfvh .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-WkTiwMLbwL12Nfvh .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-WkTiwMLbwL12Nfvh .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-WkTiwMLbwL12Nfvh .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-WkTiwMLbwL12Nfvh .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-WkTiwMLbwL12Nfvh .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-WkTiwMLbwL12Nfvh .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-WkTiwMLbwL12Nfvh .edgeLabel .label text{fill:#333;}#mermaid-svg-WkTiwMLbwL12Nfvh .label div .edgeLabel{color:#333;}#mermaid-svg-WkTiwMLbwL12Nfvh .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-WkTiwMLbwL12Nfvh .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-WkTiwMLbwL12Nfvh .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-WkTiwMLbwL12Nfvh .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-WkTiwMLbwL12Nfvh .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-WkTiwMLbwL12Nfvh .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-WkTiwMLbwL12Nfvh .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-WkTiwMLbwL12Nfvh #statediagram-barbEnd{fill:#333333;}#mermaid-svg-WkTiwMLbwL12Nfvh .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-WkTiwMLbwL12Nfvh .cluster-label,#mermaid-svg-WkTiwMLbwL12Nfvh .nodeLabel{color:#131300;}#mermaid-svg-WkTiwMLbwL12Nfvh .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-WkTiwMLbwL12Nfvh .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-WkTiwMLbwL12Nfvh .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-WkTiwMLbwL12Nfvh .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-WkTiwMLbwL12Nfvh .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-WkTiwMLbwL12Nfvh .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-WkTiwMLbwL12Nfvh .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-WkTiwMLbwL12Nfvh .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-WkTiwMLbwL12Nfvh .note-edge{stroke-dasharray:5;}#mermaid-svg-WkTiwMLbwL12Nfvh .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-WkTiwMLbwL12Nfvh .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-WkTiwMLbwL12Nfvh .statediagram-note text{fill:black;}#mermaid-svg-WkTiwMLbwL12Nfvh .statediagram-note .nodeLabel{color:black;}#mermaid-svg-WkTiwMLbwL12Nfvh .statediagram .edgeLabel{color:red;}#mermaid-svg-WkTiwMLbwL12Nfvh #dependencyStart,#mermaid-svg-WkTiwMLbwL12Nfvh #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-WkTiwMLbwL12Nfvh :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}s1s2如果想在转移上添加文字那么在后面加上一个冒号后写上想添加的文字即可。
stateDiagram-v2s1 -- s2: A transition#mermaid-svg-sisP81SlqMqhNy0s {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-sisP81SlqMqhNy0s .error-icon{fill:#552222;}#mermaid-svg-sisP81SlqMqhNy0s .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-sisP81SlqMqhNy0s .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-sisP81SlqMqhNy0s .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-sisP81SlqMqhNy0s .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-sisP81SlqMqhNy0s .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-sisP81SlqMqhNy0s .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-sisP81SlqMqhNy0s .marker{fill:#333333;stroke:#333333;}#mermaid-svg-sisP81SlqMqhNy0s .marker.cross{stroke:#333333;}#mermaid-svg-sisP81SlqMqhNy0s svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-sisP81SlqMqhNy0s defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-sisP81SlqMqhNy0s g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-sisP81SlqMqhNy0s g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-sisP81SlqMqhNy0s g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-sisP81SlqMqhNy0s g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-sisP81SlqMqhNy0s g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-sisP81SlqMqhNy0s .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-sisP81SlqMqhNy0s .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-sisP81SlqMqhNy0s .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-sisP81SlqMqhNy0s .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-sisP81SlqMqhNy0s .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-sisP81SlqMqhNy0s .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-sisP81SlqMqhNy0s .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-sisP81SlqMqhNy0s .edgeLabel .label text{fill:#333;}#mermaid-svg-sisP81SlqMqhNy0s .label div .edgeLabel{color:#333;}#mermaid-svg-sisP81SlqMqhNy0s .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-sisP81SlqMqhNy0s .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-sisP81SlqMqhNy0s .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-sisP81SlqMqhNy0s .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-sisP81SlqMqhNy0s .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-sisP81SlqMqhNy0s .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-sisP81SlqMqhNy0s .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-sisP81SlqMqhNy0s #statediagram-barbEnd{fill:#333333;}#mermaid-svg-sisP81SlqMqhNy0s .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-sisP81SlqMqhNy0s .cluster-label,#mermaid-svg-sisP81SlqMqhNy0s .nodeLabel{color:#131300;}#mermaid-svg-sisP81SlqMqhNy0s .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-sisP81SlqMqhNy0s .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-sisP81SlqMqhNy0s .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-sisP81SlqMqhNy0s .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-sisP81SlqMqhNy0s .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-sisP81SlqMqhNy0s .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-sisP81SlqMqhNy0s .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-sisP81SlqMqhNy0s .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-sisP81SlqMqhNy0s .note-edge{stroke-dasharray:5;}#mermaid-svg-sisP81SlqMqhNy0s .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-sisP81SlqMqhNy0s .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-sisP81SlqMqhNy0s .statediagram-note text{fill:black;}#mermaid-svg-sisP81SlqMqhNy0s .statediagram-note .nodeLabel{color:black;}#mermaid-svg-sisP81SlqMqhNy0s .statediagram .edgeLabel{color:red;}#mermaid-svg-sisP81SlqMqhNy0s #dependencyStart,#mermaid-svg-sisP81SlqMqhNy0s #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-sisP81SlqMqhNy0s :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}A transitions1s2开始和结束的表示
在状态图中开始和结束状态是两个特殊的状态。它们都用[*]来表示。
stateDiagram-v2[*] -- s1s1 -- [*]#mermaid-svg-NquMfz40yKeKQ5DY {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-NquMfz40yKeKQ5DY .error-icon{fill:#552222;}#mermaid-svg-NquMfz40yKeKQ5DY .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-NquMfz40yKeKQ5DY .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-NquMfz40yKeKQ5DY .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-NquMfz40yKeKQ5DY .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-NquMfz40yKeKQ5DY .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-NquMfz40yKeKQ5DY .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-NquMfz40yKeKQ5DY .marker{fill:#333333;stroke:#333333;}#mermaid-svg-NquMfz40yKeKQ5DY .marker.cross{stroke:#333333;}#mermaid-svg-NquMfz40yKeKQ5DY svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-NquMfz40yKeKQ5DY defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-NquMfz40yKeKQ5DY g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-NquMfz40yKeKQ5DY g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-NquMfz40yKeKQ5DY g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-NquMfz40yKeKQ5DY g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-NquMfz40yKeKQ5DY g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-NquMfz40yKeKQ5DY .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-NquMfz40yKeKQ5DY .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-NquMfz40yKeKQ5DY .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-NquMfz40yKeKQ5DY .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-NquMfz40yKeKQ5DY .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-NquMfz40yKeKQ5DY .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-NquMfz40yKeKQ5DY .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-NquMfz40yKeKQ5DY .edgeLabel .label text{fill:#333;}#mermaid-svg-NquMfz40yKeKQ5DY .label div .edgeLabel{color:#333;}#mermaid-svg-NquMfz40yKeKQ5DY .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-NquMfz40yKeKQ5DY .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-NquMfz40yKeKQ5DY .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-NquMfz40yKeKQ5DY .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-NquMfz40yKeKQ5DY .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-NquMfz40yKeKQ5DY .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-NquMfz40yKeKQ5DY .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-NquMfz40yKeKQ5DY #statediagram-barbEnd{fill:#333333;}#mermaid-svg-NquMfz40yKeKQ5DY .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-NquMfz40yKeKQ5DY .cluster-label,#mermaid-svg-NquMfz40yKeKQ5DY .nodeLabel{color:#131300;}#mermaid-svg-NquMfz40yKeKQ5DY .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-NquMfz40yKeKQ5DY .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-NquMfz40yKeKQ5DY .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-NquMfz40yKeKQ5DY .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-NquMfz40yKeKQ5DY .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-NquMfz40yKeKQ5DY .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-NquMfz40yKeKQ5DY .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-NquMfz40yKeKQ5DY .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-NquMfz40yKeKQ5DY .note-edge{stroke-dasharray:5;}#mermaid-svg-NquMfz40yKeKQ5DY .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-NquMfz40yKeKQ5DY .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-NquMfz40yKeKQ5DY .statediagram-note text{fill:black;}#mermaid-svg-NquMfz40yKeKQ5DY .statediagram-note .nodeLabel{color:black;}#mermaid-svg-NquMfz40yKeKQ5DY .statediagram .edgeLabel{color:red;}#mermaid-svg-NquMfz40yKeKQ5DY #dependencyStart,#mermaid-svg-NquMfz40yKeKQ5DY #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-NquMfz40yKeKQ5DY :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}s1判断的表示
如果状态图中涉及到了判断那么可以使用choice来表示。
stateDiagram-v2state if_state choice[*] -- IsPositiveIsPositive -- if_stateif_state -- False: if n 0if_state -- True : if n 0#mermaid-svg-CjvnoUh0l4KrDVR4 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-CjvnoUh0l4KrDVR4 .error-icon{fill:#552222;}#mermaid-svg-CjvnoUh0l4KrDVR4 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-CjvnoUh0l4KrDVR4 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-CjvnoUh0l4KrDVR4 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-CjvnoUh0l4KrDVR4 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-CjvnoUh0l4KrDVR4 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-CjvnoUh0l4KrDVR4 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-CjvnoUh0l4KrDVR4 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-CjvnoUh0l4KrDVR4 .marker.cross{stroke:#333333;}#mermaid-svg-CjvnoUh0l4KrDVR4 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-CjvnoUh0l4KrDVR4 defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-CjvnoUh0l4KrDVR4 g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-CjvnoUh0l4KrDVR4 g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-CjvnoUh0l4KrDVR4 g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-CjvnoUh0l4KrDVR4 g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-CjvnoUh0l4KrDVR4 g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-CjvnoUh0l4KrDVR4 .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-CjvnoUh0l4KrDVR4 .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-CjvnoUh0l4KrDVR4 .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-CjvnoUh0l4KrDVR4 .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-CjvnoUh0l4KrDVR4 .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-CjvnoUh0l4KrDVR4 .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-CjvnoUh0l4KrDVR4 .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-CjvnoUh0l4KrDVR4 .edgeLabel .label text{fill:#333;}#mermaid-svg-CjvnoUh0l4KrDVR4 .label div .edgeLabel{color:#333;}#mermaid-svg-CjvnoUh0l4KrDVR4 .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-CjvnoUh0l4KrDVR4 .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-CjvnoUh0l4KrDVR4 .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-CjvnoUh0l4KrDVR4 .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-CjvnoUh0l4KrDVR4 .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-CjvnoUh0l4KrDVR4 .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-CjvnoUh0l4KrDVR4 .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-CjvnoUh0l4KrDVR4 #statediagram-barbEnd{fill:#333333;}#mermaid-svg-CjvnoUh0l4KrDVR4 .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-CjvnoUh0l4KrDVR4 .cluster-label,#mermaid-svg-CjvnoUh0l4KrDVR4 .nodeLabel{color:#131300;}#mermaid-svg-CjvnoUh0l4KrDVR4 .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-CjvnoUh0l4KrDVR4 .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-CjvnoUh0l4KrDVR4 .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-CjvnoUh0l4KrDVR4 .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-CjvnoUh0l4KrDVR4 .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-CjvnoUh0l4KrDVR4 .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-CjvnoUh0l4KrDVR4 .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-CjvnoUh0l4KrDVR4 .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-CjvnoUh0l4KrDVR4 .note-edge{stroke-dasharray:5;}#mermaid-svg-CjvnoUh0l4KrDVR4 .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-CjvnoUh0l4KrDVR4 .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-CjvnoUh0l4KrDVR4 .statediagram-note text{fill:black;}#mermaid-svg-CjvnoUh0l4KrDVR4 .statediagram-note .nodeLabel{color:black;}#mermaid-svg-CjvnoUh0l4KrDVR4 .statediagram .edgeLabel{color:red;}#mermaid-svg-CjvnoUh0l4KrDVR4 #dependencyStart,#mermaid-svg-CjvnoUh0l4KrDVR4 #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-CjvnoUh0l4KrDVR4 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}if n 0if n 0IsPositiveFalseTrue同步的表示
对于同步的表示则使用到了fork和join。
stateDiagram-v2state fork_state fork[*] -- fork_statefork_state -- State2fork_state -- State3state join_state joinState2 -- join_stateState3 -- join_statejoin_state -- State4State4 -- [*]#mermaid-svg-1MbUG6jVL3uulnEO {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-1MbUG6jVL3uulnEO .error-icon{fill:#552222;}#mermaid-svg-1MbUG6jVL3uulnEO .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-1MbUG6jVL3uulnEO .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-1MbUG6jVL3uulnEO .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-1MbUG6jVL3uulnEO .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-1MbUG6jVL3uulnEO .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-1MbUG6jVL3uulnEO .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-1MbUG6jVL3uulnEO .marker{fill:#333333;stroke:#333333;}#mermaid-svg-1MbUG6jVL3uulnEO .marker.cross{stroke:#333333;}#mermaid-svg-1MbUG6jVL3uulnEO svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-1MbUG6jVL3uulnEO defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-1MbUG6jVL3uulnEO g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-1MbUG6jVL3uulnEO g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-1MbUG6jVL3uulnEO g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-1MbUG6jVL3uulnEO g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-1MbUG6jVL3uulnEO g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-1MbUG6jVL3uulnEO .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-1MbUG6jVL3uulnEO .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-1MbUG6jVL3uulnEO .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-1MbUG6jVL3uulnEO .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-1MbUG6jVL3uulnEO .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-1MbUG6jVL3uulnEO .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-1MbUG6jVL3uulnEO .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-1MbUG6jVL3uulnEO .edgeLabel .label text{fill:#333;}#mermaid-svg-1MbUG6jVL3uulnEO .label div .edgeLabel{color:#333;}#mermaid-svg-1MbUG6jVL3uulnEO .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-1MbUG6jVL3uulnEO .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-1MbUG6jVL3uulnEO .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-1MbUG6jVL3uulnEO .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-1MbUG6jVL3uulnEO .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-1MbUG6jVL3uulnEO .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-1MbUG6jVL3uulnEO .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-1MbUG6jVL3uulnEO #statediagram-barbEnd{fill:#333333;}#mermaid-svg-1MbUG6jVL3uulnEO .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-1MbUG6jVL3uulnEO .cluster-label,#mermaid-svg-1MbUG6jVL3uulnEO .nodeLabel{color:#131300;}#mermaid-svg-1MbUG6jVL3uulnEO .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-1MbUG6jVL3uulnEO .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-1MbUG6jVL3uulnEO .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-1MbUG6jVL3uulnEO .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-1MbUG6jVL3uulnEO .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-1MbUG6jVL3uulnEO .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-1MbUG6jVL3uulnEO .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-1MbUG6jVL3uulnEO .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-1MbUG6jVL3uulnEO .note-edge{stroke-dasharray:5;}#mermaid-svg-1MbUG6jVL3uulnEO .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-1MbUG6jVL3uulnEO .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-1MbUG6jVL3uulnEO .statediagram-note text{fill:black;}#mermaid-svg-1MbUG6jVL3uulnEO .statediagram-note .nodeLabel{color:black;}#mermaid-svg-1MbUG6jVL3uulnEO .statediagram .edgeLabel{color:red;}#mermaid-svg-1MbUG6jVL3uulnEO #dependencyStart,#mermaid-svg-1MbUG6jVL3uulnEO #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-1MbUG6jVL3uulnEO :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}State2State3State4
