工欲善其事，必先利其器，Markdown和Mermaid的梦幻联动（2）

该文章Github地址： github /AntonyCheng/typora-notes/tree/master/chapter03-mermaid 在此介绍一下作者开源的SpringBoot项目初始化模板（Github仓库地址： github /AntonyCheng/spring-boot-init-template & CSDN文章地址： blog.csdn.net/AntonyCheng/article/details/136555245），该模板集成了最常见的开发组件，同时基于修改配置文件实现组件的装载，除了这些，模板中还有非常丰富的整合示例，同时单体架构也非常适合SpringBoot框架入门，如果觉得有意义或者有帮助，欢迎Star & Issues & PR！

上一章：工欲善其事，必先利其器，Markdown和Mermaid的梦幻联动（1） 5.类图(ClassDiagram) 在软件工程中，统一建模语言（UML）中的类图是一种静态结构图，它通过显示系统的类，属性，操作方法以及对象之间的关系来描述系统的结构。类图是面向对象建模的主要构建块，它用于应用程序结构的一般概念建模，以及将模型转换为编程代码的详细建模，类图也可用于数据建模，类图中的类代表主要元素，应用程序中的交互以及要编程的类。例如下： #mermaid-svg-6Cbaibmt3nKqbPL3 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-6Cbaibmt3nKqbPL3 .error-icon{fill:#552222;}#mermaid-svg-6Cbaibmt3nKqbPL3 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-6Cbaibmt3nKqbPL3 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-6Cbaibmt3nKqbPL3 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-6Cbaibmt3nKqbPL3 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-6Cbaibmt3nKqbPL3 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-6Cbaibmt3nKqbPL3 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-6Cbaibmt3nKqbPL3 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-6Cbaibmt3nKqbPL3 .marker.cross{stroke:#333333;}#mermaid-svg-6Cbaibmt3nKqbPL3 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-6Cbaibmt3nKqbPL3 g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-6Cbaibmt3nKqbPL3 g.classGroup text .title{font-weight:bolder;}#mermaid-svg-6Cbaibmt3nKqbPL3 .nodeLabel,#mermaid-svg-6Cbaibmt3nKqbPL3 .edgeLabel{color:#131300;}#mermaid-svg-6Cbaibmt3nKqbPL3 .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-6Cbaibmt3nKqbPL3 .label text{fill:#131300;}#mermaid-svg-6Cbaibmt3nKqbPL3 .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-6Cbaibmt3nKqbPL3 .classTitle{font-weight:bolder;}#mermaid-svg-6Cbaibmt3nKqbPL3 .node rect,#mermaid-svg-6Cbaibmt3nKqbPL3 .node circle,#mermaid-svg-6Cbaibmt3nKqbPL3 .node ellipse,#mermaid-svg-6Cbaibmt3nKqbPL3 .node polygon,#mermaid-svg-6Cbaibmt3nKqbPL3 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-6Cbaibmt3nKqbPL3 .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-6Cbaibmt3nKqbPL3 g.clickable{cursor:pointer;}#mermaid-svg-6Cbaibmt3nKqbPL3 g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-6Cbaibmt3nKqbPL3 g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-6Cbaibmt3nKqbPL3 .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-6Cbaibmt3nKqbPL3 .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-6Cbaibmt3nKqbPL3 .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-6Cbaibmt3nKqbPL3 .dashed-line{stroke-dasharray:3;}#mermaid-svg-6Cbaibmt3nKqbPL3 #compositionStart,#mermaid-svg-6Cbaibmt3nKqbPL3 position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-6Cbaibmt3nKqbPL3 #compositionEnd,#mermaid-svg-6Cbaibmt3nKqbPL3 position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-6Cbaibmt3nKqbPL3 #dependencyStart,#mermaid-svg-6Cbaibmt3nKqbPL3 .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-6Cbaibmt3nKqbPL3 #dependencyStart,#mermaid-svg-6Cbaibmt3nKqbPL3 .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-6Cbaibmt3nKqbPL3 #extensionStart,#mermaid-svg-6Cbaibmt3nKqbPL3 .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-6Cbaibmt3nKqbPL3 #extensionEnd,#mermaid-svg-6Cbaibmt3nKqbPL3 .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-6Cbaibmt3nKqbPL3 #aggregationStart,#mermaid-svg-6Cbaibmt3nKqbPL3 .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-6Cbaibmt3nKqbPL3 #aggregationEnd,#mermaid-svg-6Cbaibmt3nKqbPL3 .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-6Cbaibmt3nKqbPL3 .edgeTerminals{font-size:11px;}#mermaid-svg-6Cbaibmt3nKqbPL3 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} animal +int age +String gender +isMammal() +mate() duck +String beakColor +swim() +quack() fish -int sizeInFeet -canEat() zebra +bool is_wild +run() classDiagram animal <|-- duck animal <|-- fish animal <|-- zebra animal : +int age animal : +String gender animal : +isMammal() animal : +mate() class duck{ +String beakColor +swim() +quack() } class fish{ -int sizeInFeet -canEat() } class zebra{ +bool is_wild +run() } 5.1.句法 UML提供了表示类成员的机制，例如属性和方法，以及关于它们的附加信息，图中类的单个实例包含三个元素。 顶部：它是类的名称，它以粗体居中打印，第一个字母大写，他还可能包含描述类性质的可选注释文本。中部：它是类的属性，它们是左对齐，第一个字母是小写的（String写法本就如此）。底部：它是类的操作，它们是左对齐，第一个字母是小写的（String写法本就如此）。 #mermaid-svg-hTm8tsCGtIipPvvs {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-hTm8tsCGtIipPvvs .error-icon{fill:#552222;}#mermaid-svg-hTm8tsCGtIipPvvs .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-hTm8tsCGtIipPvvs .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-hTm8tsCGtIipPvvs .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-hTm8tsCGtIipPvvs .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-hTm8tsCGtIipPvvs .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-hTm8tsCGtIipPvvs .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-hTm8tsCGtIipPvvs .marker{fill:#333333;stroke:#333333;}#mermaid-svg-hTm8tsCGtIipPvvs .marker.cross{stroke:#333333;}#mermaid-svg-hTm8tsCGtIipPvvs svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-hTm8tsCGtIipPvvs g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-hTm8tsCGtIipPvvs g.classGroup text .title{font-weight:bolder;}#mermaid-svg-hTm8tsCGtIipPvvs .nodeLabel,#mermaid-svg-hTm8tsCGtIipPvvs .edgeLabel{color:#131300;}#mermaid-svg-hTm8tsCGtIipPvvs .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-hTm8tsCGtIipPvvs .label text{fill:#131300;}#mermaid-svg-hTm8tsCGtIipPvvs .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-hTm8tsCGtIipPvvs .classTitle{font-weight:bolder;}#mermaid-svg-hTm8tsCGtIipPvvs .node rect,#mermaid-svg-hTm8tsCGtIipPvvs .node circle,#mermaid-svg-hTm8tsCGtIipPvvs .node ellipse,#mermaid-svg-hTm8tsCGtIipPvvs .node polygon,#mermaid-svg-hTm8tsCGtIipPvvs .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-hTm8tsCGtIipPvvs .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-hTm8tsCGtIipPvvs g.clickable{cursor:pointer;}#mermaid-svg-hTm8tsCGtIipPvvs g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-hTm8tsCGtIipPvvs g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-hTm8tsCGtIipPvvs .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-hTm8tsCGtIipPvvs .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-hTm8tsCGtIipPvvs .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-hTm8tsCGtIipPvvs .dashed-line{stroke-dasharray:3;}#mermaid-svg-hTm8tsCGtIipPvvs #compositionStart,#mermaid-svg-hTm8tsCGtIipPvvs position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-hTm8tsCGtIipPvvs #compositionEnd,#mermaid-svg-hTm8tsCGtIipPvvs position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-hTm8tsCGtIipPvvs #dependencyStart,#mermaid-svg-hTm8tsCGtIipPvvs .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-hTm8tsCGtIipPvvs #dependencyStart,#mermaid-svg-hTm8tsCGtIipPvvs .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-hTm8tsCGtIipPvvs #extensionStart,#mermaid-svg-hTm8tsCGtIipPvvs .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-hTm8tsCGtIipPvvs #extensionEnd,#mermaid-svg-hTm8tsCGtIipPvvs .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-hTm8tsCGtIipPvvs #aggregationStart,#mermaid-svg-hTm8tsCGtIipPvvs .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-hTm8tsCGtIipPvvs #aggregationEnd,#mermaid-svg-hTm8tsCGtIipPvvs .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-hTm8tsCGtIipPvvs .edgeTerminals{font-size:11px;}#mermaid-svg-hTm8tsCGtIipPvvs :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} BankAccount +String owner +Bigdecimal balance +deposit(amount) +withdraw(amount) classDiagram class BankAccount{ +String owner +Bigdecimal balance +deposit(amount) +withdraw(amount) } 5.2.定义一个类 定义一个类有两种方式，一种是class ClassName，另一种是ClassName <|-- SubClassName，前者是通过关键字class显式定义，后者是通过两类的关系隐式定义： #mermaid-svg-yY71EgXwYTrOYjob {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-yY71EgXwYTrOYjob .error-icon{fill:#552222;}#mermaid-svg-yY71EgXwYTrOYjob .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-yY71EgXwYTrOYjob .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-yY71EgXwYTrOYjob .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-yY71EgXwYTrOYjob .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-yY71EgXwYTrOYjob .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-yY71EgXwYTrOYjob .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-yY71EgXwYTrOYjob .marker{fill:#333333;stroke:#333333;}#mermaid-svg-yY71EgXwYTrOYjob .marker.cross{stroke:#333333;}#mermaid-svg-yY71EgXwYTrOYjob svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-yY71EgXwYTrOYjob g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-yY71EgXwYTrOYjob g.classGroup text .title{font-weight:bolder;}#mermaid-svg-yY71EgXwYTrOYjob .nodeLabel,#mermaid-svg-yY71EgXwYTrOYjob .edgeLabel{color:#131300;}#mermaid-svg-yY71EgXwYTrOYjob .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-yY71EgXwYTrOYjob .label text{fill:#131300;}#mermaid-svg-yY71EgXwYTrOYjob .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-yY71EgXwYTrOYjob .classTitle{font-weight:bolder;}#mermaid-svg-yY71EgXwYTrOYjob .node rect,#mermaid-svg-yY71EgXwYTrOYjob .node circle,#mermaid-svg-yY71EgXwYTrOYjob .node ellipse,#mermaid-svg-yY71EgXwYTrOYjob .node polygon,#mermaid-svg-yY71EgXwYTrOYjob .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-yY71EgXwYTrOYjob .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-yY71EgXwYTrOYjob g.clickable{cursor:pointer;}#mermaid-svg-yY71EgXwYTrOYjob g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-yY71EgXwYTrOYjob g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-yY71EgXwYTrOYjob .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-yY71EgXwYTrOYjob .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-yY71EgXwYTrOYjob .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-yY71EgXwYTrOYjob .dashed-line{stroke-dasharray:3;}#mermaid-svg-yY71EgXwYTrOYjob #compositionStart,#mermaid-svg-yY71EgXwYTrOYjob position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-yY71EgXwYTrOYjob #compositionEnd,#mermaid-svg-yY71EgXwYTrOYjob position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-yY71EgXwYTrOYjob #dependencyStart,#mermaid-svg-yY71EgXwYTrOYjob .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-yY71EgXwYTrOYjob #dependencyStart,#mermaid-svg-yY71EgXwYTrOYjob .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-yY71EgXwYTrOYjob #extensionStart,#mermaid-svg-yY71EgXwYTrOYjob .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-yY71EgXwYTrOYjob #extensionEnd,#mermaid-svg-yY71EgXwYTrOYjob .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-yY71EgXwYTrOYjob #aggregationStart,#mermaid-svg-yY71EgXwYTrOYjob .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-yY71EgXwYTrOYjob #aggregationEnd,#mermaid-svg-yY71EgXwYTrOYjob .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-yY71EgXwYTrOYjob .edgeTerminals{font-size:11px;}#mermaid-svg-yY71EgXwYTrOYjob :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 1900sharehome 1900ShareHome Typora classDiagram class 1900sharehome 1900ShareHome <|-- Typora 命名要求：类名是由字母，数字（允许使用unicode）和下划线字符组成。 5.3.定义类的成员 UML提供了表示类成员的机制，例如属性和方法，以及关于它们的附加信息。Mermaid根据括号()是否存在来区分属性和函数/方法。那些()被视为函数/方法，而其他被视为属性。定义类成员的方法也有两种： #mermaid-svg-pdb7d0iA66W4XvZm {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-pdb7d0iA66W4XvZm .error-icon{fill:#552222;}#mermaid-svg-pdb7d0iA66W4XvZm .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-pdb7d0iA66W4XvZm .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-pdb7d0iA66W4XvZm .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-pdb7d0iA66W4XvZm .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-pdb7d0iA66W4XvZm .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-pdb7d0iA66W4XvZm .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-pdb7d0iA66W4XvZm .marker{fill:#333333;stroke:#333333;}#mermaid-svg-pdb7d0iA66W4XvZm .marker.cross{stroke:#333333;}#mermaid-svg-pdb7d0iA66W4XvZm svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-pdb7d0iA66W4XvZm g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-pdb7d0iA66W4XvZm g.classGroup text .title{font-weight:bolder;}#mermaid-svg-pdb7d0iA66W4XvZm .nodeLabel,#mermaid-svg-pdb7d0iA66W4XvZm .edgeLabel{color:#131300;}#mermaid-svg-pdb7d0iA66W4XvZm .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-pdb7d0iA66W4XvZm .label text{fill:#131300;}#mermaid-svg-pdb7d0iA66W4XvZm .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-pdb7d0iA66W4XvZm .classTitle{font-weight:bolder;}#mermaid-svg-pdb7d0iA66W4XvZm .node rect,#mermaid-svg-pdb7d0iA66W4XvZm .node circle,#mermaid-svg-pdb7d0iA66W4XvZm .node ellipse,#mermaid-svg-pdb7d0iA66W4XvZm .node polygon,#mermaid-svg-pdb7d0iA66W4XvZm .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-pdb7d0iA66W4XvZm .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-pdb7d0iA66W4XvZm g.clickable{cursor:pointer;}#mermaid-svg-pdb7d0iA66W4XvZm g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-pdb7d0iA66W4XvZm g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-pdb7d0iA66W4XvZm .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-pdb7d0iA66W4XvZm .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-pdb7d0iA66W4XvZm .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-pdb7d0iA66W4XvZm .dashed-line{stroke-dasharray:3;}#mermaid-svg-pdb7d0iA66W4XvZm #compositionStart,#mermaid-svg-pdb7d0iA66W4XvZm position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-pdb7d0iA66W4XvZm #compositionEnd,#mermaid-svg-pdb7d0iA66W4XvZm position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-pdb7d0iA66W4XvZm #dependencyStart,#mermaid-svg-pdb7d0iA66W4XvZm .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-pdb7d0iA66W4XvZm #dependencyStart,#mermaid-svg-pdb7d0iA66W4XvZm .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-pdb7d0iA66W4XvZm #extensionStart,#mermaid-svg-pdb7d0iA66W4XvZm .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-pdb7d0iA66W4XvZm #extensionEnd,#mermaid-svg-pdb7d0iA66W4XvZm .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-pdb7d0iA66W4XvZm #aggregationStart,#mermaid-svg-pdb7d0iA66W4XvZm .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-pdb7d0iA66W4XvZm #aggregationEnd,#mermaid-svg-pdb7d0iA66W4XvZm .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-pdb7d0iA66W4XvZm .edgeTerminals{font-size:11px;}#mermaid-svg-pdb7d0iA66W4XvZm :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} bankaccount +String owner +BigDecimal balance +deposit(amount) +withdrawal(amount) classDiagram class bankaccount{ +String owner +BigDecimal balance +deposit(amount) +withdrawal(amount) } #mermaid-svg-pc7dsfB2r6TM0Ltb {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-pc7dsfB2r6TM0Ltb .error-icon{fill:#552222;}#mermaid-svg-pc7dsfB2r6TM0Ltb .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-pc7dsfB2r6TM0Ltb .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-pc7dsfB2r6TM0Ltb .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-pc7dsfB2r6TM0Ltb .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-pc7dsfB2r6TM0Ltb .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-pc7dsfB2r6TM0Ltb .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-pc7dsfB2r6TM0Ltb .marker{fill:#333333;stroke:#333333;}#mermaid-svg-pc7dsfB2r6TM0Ltb .marker.cross{stroke:#333333;}#mermaid-svg-pc7dsfB2r6TM0Ltb svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-pc7dsfB2r6TM0Ltb g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-pc7dsfB2r6TM0Ltb g.classGroup text .title{font-weight:bolder;}#mermaid-svg-pc7dsfB2r6TM0Ltb .nodeLabel,#mermaid-svg-pc7dsfB2r6TM0Ltb .edgeLabel{color:#131300;}#mermaid-svg-pc7dsfB2r6TM0Ltb .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-pc7dsfB2r6TM0Ltb .label text{fill:#131300;}#mermaid-svg-pc7dsfB2r6TM0Ltb .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-pc7dsfB2r6TM0Ltb .classTitle{font-weight:bolder;}#mermaid-svg-pc7dsfB2r6TM0Ltb .node rect,#mermaid-svg-pc7dsfB2r6TM0Ltb .node circle,#mermaid-svg-pc7dsfB2r6TM0Ltb .node ellipse,#mermaid-svg-pc7dsfB2r6TM0Ltb .node polygon,#mermaid-svg-pc7dsfB2r6TM0Ltb .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-pc7dsfB2r6TM0Ltb .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-pc7dsfB2r6TM0Ltb g.clickable{cursor:pointer;}#mermaid-svg-pc7dsfB2r6TM0Ltb g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-pc7dsfB2r6TM0Ltb g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-pc7dsfB2r6TM0Ltb .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-pc7dsfB2r6TM0Ltb .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-pc7dsfB2r6TM0Ltb .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-pc7dsfB2r6TM0Ltb .dashed-line{stroke-dasharray:3;}#mermaid-svg-pc7dsfB2r6TM0Ltb #compositionStart,#mermaid-svg-pc7dsfB2r6TM0Ltb position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-pc7dsfB2r6TM0Ltb #compositionEnd,#mermaid-svg-pc7dsfB2r6TM0Ltb position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-pc7dsfB2r6TM0Ltb #dependencyStart,#mermaid-svg-pc7dsfB2r6TM0Ltb .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-pc7dsfB2r6TM0Ltb #dependencyStart,#mermaid-svg-pc7dsfB2r6TM0Ltb .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-pc7dsfB2r6TM0Ltb #extensionStart,#mermaid-svg-pc7dsfB2r6TM0Ltb .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-pc7dsfB2r6TM0Ltb #extensionEnd,#mermaid-svg-pc7dsfB2r6TM0Ltb .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-pc7dsfB2r6TM0Ltb #aggregationStart,#mermaid-svg-pc7dsfB2r6TM0Ltb .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-pc7dsfB2r6TM0Ltb #aggregationEnd,#mermaid-svg-pc7dsfB2r6TM0Ltb .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-pc7dsfB2r6TM0Ltb .edgeTerminals{font-size:11px;}#mermaid-svg-pc7dsfB2r6TM0Ltb :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} BankAccount +String owner +BigDecimal balance +deposit(amount) +withdrawal(amount) classDiagram class BankAccount BankAccount : +String owner BankAccount : +BigDecimal balance BankAccount : +deposit(amount) BankAccount : +withdrawal(amount)

返回类型：可以用返回的数据类型来定义：

#mermaid-svg-ftvNHlazUmMvfaqL {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ftvNHlazUmMvfaqL .error-icon{fill:#552222;}#mermaid-svg-ftvNHlazUmMvfaqL .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ftvNHlazUmMvfaqL .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ftvNHlazUmMvfaqL .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ftvNHlazUmMvfaqL .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ftvNHlazUmMvfaqL .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ftvNHlazUmMvfaqL .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ftvNHlazUmMvfaqL .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ftvNHlazUmMvfaqL .marker.cross{stroke:#333333;}#mermaid-svg-ftvNHlazUmMvfaqL svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ftvNHlazUmMvfaqL g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-ftvNHlazUmMvfaqL g.classGroup text .title{font-weight:bolder;}#mermaid-svg-ftvNHlazUmMvfaqL .nodeLabel,#mermaid-svg-ftvNHlazUmMvfaqL .edgeLabel{color:#131300;}#mermaid-svg-ftvNHlazUmMvfaqL .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-ftvNHlazUmMvfaqL .label text{fill:#131300;}#mermaid-svg-ftvNHlazUmMvfaqL .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-ftvNHlazUmMvfaqL .classTitle{font-weight:bolder;}#mermaid-svg-ftvNHlazUmMvfaqL .node rect,#mermaid-svg-ftvNHlazUmMvfaqL .node circle,#mermaid-svg-ftvNHlazUmMvfaqL .node ellipse,#mermaid-svg-ftvNHlazUmMvfaqL .node polygon,#mermaid-svg-ftvNHlazUmMvfaqL .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ftvNHlazUmMvfaqL .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-ftvNHlazUmMvfaqL g.clickable{cursor:pointer;}#mermaid-svg-ftvNHlazUmMvfaqL g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-ftvNHlazUmMvfaqL g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-ftvNHlazUmMvfaqL .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-ftvNHlazUmMvfaqL .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-ftvNHlazUmMvfaqL .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-ftvNHlazUmMvfaqL .dashed-line{stroke-dasharray:3;}#mermaid-svg-ftvNHlazUmMvfaqL #compositionStart,#mermaid-svg-ftvNHlazUmMvfaqL position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ftvNHlazUmMvfaqL #compositionEnd,#mermaid-svg-ftvNHlazUmMvfaqL position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ftvNHlazUmMvfaqL #dependencyStart,#mermaid-svg-ftvNHlazUmMvfaqL .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ftvNHlazUmMvfaqL #dependencyStart,#mermaid-svg-ftvNHlazUmMvfaqL .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ftvNHlazUmMvfaqL #extensionStart,#mermaid-svg-ftvNHlazUmMvfaqL .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ftvNHlazUmMvfaqL #extensionEnd,#mermaid-svg-ftvNHlazUmMvfaqL .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ftvNHlazUmMvfaqL #aggregationStart,#mermaid-svg-ftvNHlazUmMvfaqL .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ftvNHlazUmMvfaqL #aggregationEnd,#mermaid-svg-ftvNHlazUmMvfaqL .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ftvNHlazUmMvfaqL .edgeTerminals{font-size:11px;}#mermaid-svg-ftvNHlazUmMvfaqL :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} BankAccount +String owner +BigDecimal balance +deposit(amount) : int +withdrawal(amount) : bool classDiagram class BankAccount{ +String owner +BigDecimal balance +deposit(amount)int +withdrawal(amount)bool }

通用类型：可以用通用类型来进行成员的定义，例如List<int>,用于字段，参数和返回类型，方法是将类型包含在~内，且该方法不支持嵌套：

#mermaid-svg-a2RKCYDEvbEJ9pPm {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-a2RKCYDEvbEJ9pPm .error-icon{fill:#552222;}#mermaid-svg-a2RKCYDEvbEJ9pPm .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-a2RKCYDEvbEJ9pPm .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-a2RKCYDEvbEJ9pPm .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-a2RKCYDEvbEJ9pPm .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-a2RKCYDEvbEJ9pPm .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-a2RKCYDEvbEJ9pPm .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-a2RKCYDEvbEJ9pPm .marker{fill:#333333;stroke:#333333;}#mermaid-svg-a2RKCYDEvbEJ9pPm .marker.cross{stroke:#333333;}#mermaid-svg-a2RKCYDEvbEJ9pPm svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-a2RKCYDEvbEJ9pPm g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-a2RKCYDEvbEJ9pPm g.classGroup text .title{font-weight:bolder;}#mermaid-svg-a2RKCYDEvbEJ9pPm .nodeLabel,#mermaid-svg-a2RKCYDEvbEJ9pPm .edgeLabel{color:#131300;}#mermaid-svg-a2RKCYDEvbEJ9pPm .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-a2RKCYDEvbEJ9pPm .label text{fill:#131300;}#mermaid-svg-a2RKCYDEvbEJ9pPm .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-a2RKCYDEvbEJ9pPm .classTitle{font-weight:bolder;}#mermaid-svg-a2RKCYDEvbEJ9pPm .node rect,#mermaid-svg-a2RKCYDEvbEJ9pPm .node circle,#mermaid-svg-a2RKCYDEvbEJ9pPm .node ellipse,#mermaid-svg-a2RKCYDEvbEJ9pPm .node polygon,#mermaid-svg-a2RKCYDEvbEJ9pPm .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-a2RKCYDEvbEJ9pPm .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-a2RKCYDEvbEJ9pPm g.clickable{cursor:pointer;}#mermaid-svg-a2RKCYDEvbEJ9pPm g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-a2RKCYDEvbEJ9pPm g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-a2RKCYDEvbEJ9pPm .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-a2RKCYDEvbEJ9pPm .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-a2RKCYDEvbEJ9pPm .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-a2RKCYDEvbEJ9pPm .dashed-line{stroke-dasharray:3;}#mermaid-svg-a2RKCYDEvbEJ9pPm #compositionStart,#mermaid-svg-a2RKCYDEvbEJ9pPm position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-a2RKCYDEvbEJ9pPm #compositionEnd,#mermaid-svg-a2RKCYDEvbEJ9pPm position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-a2RKCYDEvbEJ9pPm #dependencyStart,#mermaid-svg-a2RKCYDEvbEJ9pPm .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-a2RKCYDEvbEJ9pPm #dependencyStart,#mermaid-svg-a2RKCYDEvbEJ9pPm .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-a2RKCYDEvbEJ9pPm #extensionStart,#mermaid-svg-a2RKCYDEvbEJ9pPm .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-a2RKCYDEvbEJ9pPm #extensionEnd,#mermaid-svg-a2RKCYDEvbEJ9pPm .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-a2RKCYDEvbEJ9pPm #aggregationStart,#mermaid-svg-a2RKCYDEvbEJ9pPm .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-a2RKCYDEvbEJ9pPm #aggregationEnd,#mermaid-svg-a2RKCYDEvbEJ9pPm .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-a2RKCYDEvbEJ9pPm .edgeTerminals{font-size:11px;}#mermaid-svg-a2RKCYDEvbEJ9pPm :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Class<Shape> int id List<int> position -List<String> messages setPoints(List<int> points) getPoints() : List<int> +setMessages(-List<String>messages) +getMessages() : List<Sring> classDiagram class Class~Shape~{ int id List~int~ position setPoints(List~int~ points) getPoints() List~int~ } Class : -List~String~ messages Class : +setMessages(-List~String~messages) Class : +getMessages() List~Sring~

可视度：对于一些有特殊可视性的类成员，一般把以下元素放置在成员名字之前：

字符意义+公开-私人#受保护~内部 #mermaid-svg-FRhlKdhhkMmqx7Xu {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-FRhlKdhhkMmqx7Xu .error-icon{fill:#552222;}#mermaid-svg-FRhlKdhhkMmqx7Xu .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-FRhlKdhhkMmqx7Xu .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-FRhlKdhhkMmqx7Xu .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-FRhlKdhhkMmqx7Xu .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-FRhlKdhhkMmqx7Xu .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-FRhlKdhhkMmqx7Xu .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-FRhlKdhhkMmqx7Xu .marker{fill:#333333;stroke:#333333;}#mermaid-svg-FRhlKdhhkMmqx7Xu .marker.cross{stroke:#333333;}#mermaid-svg-FRhlKdhhkMmqx7Xu svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-FRhlKdhhkMmqx7Xu g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-FRhlKdhhkMmqx7Xu g.classGroup text .title{font-weight:bolder;}#mermaid-svg-FRhlKdhhkMmqx7Xu .nodeLabel,#mermaid-svg-FRhlKdhhkMmqx7Xu .edgeLabel{color:#131300;}#mermaid-svg-FRhlKdhhkMmqx7Xu .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-FRhlKdhhkMmqx7Xu .label text{fill:#131300;}#mermaid-svg-FRhlKdhhkMmqx7Xu .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-FRhlKdhhkMmqx7Xu .classTitle{font-weight:bolder;}#mermaid-svg-FRhlKdhhkMmqx7Xu .node rect,#mermaid-svg-FRhlKdhhkMmqx7Xu .node circle,#mermaid-svg-FRhlKdhhkMmqx7Xu .node ellipse,#mermaid-svg-FRhlKdhhkMmqx7Xu .node polygon,#mermaid-svg-FRhlKdhhkMmqx7Xu .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-FRhlKdhhkMmqx7Xu .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-FRhlKdhhkMmqx7Xu g.clickable{cursor:pointer;}#mermaid-svg-FRhlKdhhkMmqx7Xu g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-FRhlKdhhkMmqx7Xu g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-FRhlKdhhkMmqx7Xu .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-FRhlKdhhkMmqx7Xu .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-FRhlKdhhkMmqx7Xu .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-FRhlKdhhkMmqx7Xu .dashed-line{stroke-dasharray:3;}#mermaid-svg-FRhlKdhhkMmqx7Xu #compositionStart,#mermaid-svg-FRhlKdhhkMmqx7Xu position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-FRhlKdhhkMmqx7Xu #compositionEnd,#mermaid-svg-FRhlKdhhkMmqx7Xu position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-FRhlKdhhkMmqx7Xu #dependencyStart,#mermaid-svg-FRhlKdhhkMmqx7Xu .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-FRhlKdhhkMmqx7Xu #dependencyStart,#mermaid-svg-FRhlKdhhkMmqx7Xu .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-FRhlKdhhkMmqx7Xu #extensionStart,#mermaid-svg-FRhlKdhhkMmqx7Xu .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-FRhlKdhhkMmqx7Xu #extensionEnd,#mermaid-svg-FRhlKdhhkMmqx7Xu .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-FRhlKdhhkMmqx7Xu #aggregationStart,#mermaid-svg-FRhlKdhhkMmqx7Xu .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-FRhlKdhhkMmqx7Xu #aggregationEnd,#mermaid-svg-FRhlKdhhkMmqx7Xu .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-FRhlKdhhkMmqx7Xu .edgeTerminals{font-size:11px;}#mermaid-svg-FRhlKdhhkMmqx7Xu :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} ClassName +Public -Private #Protected <Package/Internal classDiagram class ClassName{ +Public -Private #Protected ~Package/Internal } 5.4.定义关系 它是一种建立在类和项目图之上，包括特殊的逻辑链接的总称： [ClassA][Arrow][ClassB] 以下是目前在UML下所支持的关系定义： 样式描述<|–实心三角箭头*–菱形箭头o–空心菱形箭头–>向量箭头–实线…>虚线向量箭头…|>虚线三角箭头…虚线 #mermaid-svg-CnVbu38NFYHJWrhq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-CnVbu38NFYHJWrhq .error-icon{fill:#552222;}#mermaid-svg-CnVbu38NFYHJWrhq .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-CnVbu38NFYHJWrhq .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-CnVbu38NFYHJWrhq .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-CnVbu38NFYHJWrhq .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-CnVbu38NFYHJWrhq .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-CnVbu38NFYHJWrhq .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-CnVbu38NFYHJWrhq .marker{fill:#333333;stroke:#333333;}#mermaid-svg-CnVbu38NFYHJWrhq .marker.cross{stroke:#333333;}#mermaid-svg-CnVbu38NFYHJWrhq svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-CnVbu38NFYHJWrhq g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-CnVbu38NFYHJWrhq g.classGroup text .title{font-weight:bolder;}#mermaid-svg-CnVbu38NFYHJWrhq .nodeLabel,#mermaid-svg-CnVbu38NFYHJWrhq .edgeLabel{color:#131300;}#mermaid-svg-CnVbu38NFYHJWrhq .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-CnVbu38NFYHJWrhq .label text{fill:#131300;}#mermaid-svg-CnVbu38NFYHJWrhq .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-CnVbu38NFYHJWrhq .classTitle{font-weight:bolder;}#mermaid-svg-CnVbu38NFYHJWrhq .node rect,#mermaid-svg-CnVbu38NFYHJWrhq .node circle,#mermaid-svg-CnVbu38NFYHJWrhq .node ellipse,#mermaid-svg-CnVbu38NFYHJWrhq .node polygon,#mermaid-svg-CnVbu38NFYHJWrhq .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-CnVbu38NFYHJWrhq .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-CnVbu38NFYHJWrhq g.clickable{cursor:pointer;}#mermaid-svg-CnVbu38NFYHJWrhq g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-CnVbu38NFYHJWrhq g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-CnVbu38NFYHJWrhq .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-CnVbu38NFYHJWrhq .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-CnVbu38NFYHJWrhq .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-CnVbu38NFYHJWrhq .dashed-line{stroke-dasharray:3;}#mermaid-svg-CnVbu38NFYHJWrhq #compositionStart,#mermaid-svg-CnVbu38NFYHJWrhq position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-CnVbu38NFYHJWrhq #compositionEnd,#mermaid-svg-CnVbu38NFYHJWrhq position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-CnVbu38NFYHJWrhq #dependencyStart,#mermaid-svg-CnVbu38NFYHJWrhq .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-CnVbu38NFYHJWrhq #dependencyStart,#mermaid-svg-CnVbu38NFYHJWrhq .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-CnVbu38NFYHJWrhq #extensionStart,#mermaid-svg-CnVbu38NFYHJWrhq .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-CnVbu38NFYHJWrhq #extensionEnd,#mermaid-svg-CnVbu38NFYHJWrhq .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-CnVbu38NFYHJWrhq #aggregationStart,#mermaid-svg-CnVbu38NFYHJWrhq .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-CnVbu38NFYHJWrhq #aggregationEnd,#mermaid-svg-CnVbu38NFYHJWrhq .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-CnVbu38NFYHJWrhq .edgeTerminals{font-size:11px;}#mermaid-svg-CnVbu38NFYHJWrhq :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} classA classB classC classD classE classF classG classH classI classJ classK classL classM classN classO classP classDiagram classA <|-- classB classC *-- classD classE o-- classF classG <-- classH classI -- classJ classK <.. classL classM <|.. classN classO .. classP 我们还可以在两个关系之间使用描述性的标签： [ClassA][Arrow][ClassB]:LabelText #mermaid-svg-LAzOZ57j24lycuLl {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-LAzOZ57j24lycuLl .error-icon{fill:#552222;}#mermaid-svg-LAzOZ57j24lycuLl .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-LAzOZ57j24lycuLl .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-LAzOZ57j24lycuLl .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-LAzOZ57j24lycuLl .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-LAzOZ57j24lycuLl .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-LAzOZ57j24lycuLl .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-LAzOZ57j24lycuLl .marker{fill:#333333;stroke:#333333;}#mermaid-svg-LAzOZ57j24lycuLl .marker.cross{stroke:#333333;}#mermaid-svg-LAzOZ57j24lycuLl svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-LAzOZ57j24lycuLl g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-LAzOZ57j24lycuLl g.classGroup text .title{font-weight:bolder;}#mermaid-svg-LAzOZ57j24lycuLl .nodeLabel,#mermaid-svg-LAzOZ57j24lycuLl .edgeLabel{color:#131300;}#mermaid-svg-LAzOZ57j24lycuLl .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-LAzOZ57j24lycuLl .label text{fill:#131300;}#mermaid-svg-LAzOZ57j24lycuLl .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-LAzOZ57j24lycuLl .classTitle{font-weight:bolder;}#mermaid-svg-LAzOZ57j24lycuLl .node rect,#mermaid-svg-LAzOZ57j24lycuLl .node circle,#mermaid-svg-LAzOZ57j24lycuLl .node ellipse,#mermaid-svg-LAzOZ57j24lycuLl .node polygon,#mermaid-svg-LAzOZ57j24lycuLl .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-LAzOZ57j24lycuLl .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-LAzOZ57j24lycuLl g.clickable{cursor:pointer;}#mermaid-svg-LAzOZ57j24lycuLl g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-LAzOZ57j24lycuLl g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-LAzOZ57j24lycuLl .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-LAzOZ57j24lycuLl .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-LAzOZ57j24lycuLl .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-LAzOZ57j24lycuLl .dashed-line{stroke-dasharray:3;}#mermaid-svg-LAzOZ57j24lycuLl #compositionStart,#mermaid-svg-LAzOZ57j24lycuLl position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-LAzOZ57j24lycuLl #compositionEnd,#mermaid-svg-LAzOZ57j24lycuLl position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-LAzOZ57j24lycuLl #dependencyStart,#mermaid-svg-LAzOZ57j24lycuLl .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-LAzOZ57j24lycuLl #dependencyStart,#mermaid-svg-LAzOZ57j24lycuLl .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-LAzOZ57j24lycuLl #extensionStart,#mermaid-svg-LAzOZ57j24lycuLl .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-LAzOZ57j24lycuLl #extensionEnd,#mermaid-svg-LAzOZ57j24lycuLl .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-LAzOZ57j24lycuLl #aggregationStart,#mermaid-svg-LAzOZ57j24lycuLl .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-LAzOZ57j24lycuLl #aggregationEnd,#mermaid-svg-LAzOZ57j24lycuLl .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-LAzOZ57j24lycuLl .edgeTerminals{font-size:11px;}#mermaid-svg-LAzOZ57j24lycuLl :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Inheritance Composition Aggregation Association Link(Solid) Dependency Realization Link(Dashed) classA classB classC classD classE classF classG classH classI classJ classK classL classM classN classO classP classDiagram classA --|> classB : Inheritance classC --* classD : Composition classE --o classF : Aggregation classG --> classH : Association classI -- classJ : Link(Solid) classK ..> classL : Dependency classM ..|> classN : Realization classO .. classP : Link(Dashed) 双向箭头： 样式意义<|--左实心三角箭头实线<--左向量箭头实线--*实心菱形箭头实线--o空心菱形箭头实线--|>右实心箭头实线-->右向量箭头实线样式意义<|..左实心三角箭头虚线<..左向量箭头虚线..*实心菱形箭头虚线..o空心菱形箭头虚线..|>右实心箭头虚线..>右向量箭头虚线 5.5.基数/关系的多重性 类图中的多重性或基数表示一个类的实例链接到另一类的一个实体的数量，例如： 一家公司将有一名或多名员工，但每一位员工只为一家公司工作。多重符号放置在定义关系的末端： 基数选项意义1只有一个0…1零或一1…*一个或多个*****许多nn个0…n零到n个1…n一到n个 我们将多重符号定义在**中： [ClassA]"Number"[Arrow]"Number"[ClassB]:LabelText #mermaid-svg-ur8KW5BiV9VH5pXy {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ur8KW5BiV9VH5pXy .error-icon{fill:#552222;}#mermaid-svg-ur8KW5BiV9VH5pXy .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ur8KW5BiV9VH5pXy .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ur8KW5BiV9VH5pXy .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ur8KW5BiV9VH5pXy .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ur8KW5BiV9VH5pXy .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ur8KW5BiV9VH5pXy .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ur8KW5BiV9VH5pXy .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ur8KW5BiV9VH5pXy .marker.cross{stroke:#333333;}#mermaid-svg-ur8KW5BiV9VH5pXy svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ur8KW5BiV9VH5pXy g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-ur8KW5BiV9VH5pXy g.classGroup text .title{font-weight:bolder;}#mermaid-svg-ur8KW5BiV9VH5pXy .nodeLabel,#mermaid-svg-ur8KW5BiV9VH5pXy .edgeLabel{color:#131300;}#mermaid-svg-ur8KW5BiV9VH5pXy .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-ur8KW5BiV9VH5pXy .label text{fill:#131300;}#mermaid-svg-ur8KW5BiV9VH5pXy .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-ur8KW5BiV9VH5pXy .classTitle{font-weight:bolder;}#mermaid-svg-ur8KW5BiV9VH5pXy .node rect,#mermaid-svg-ur8KW5BiV9VH5pXy .node circle,#mermaid-svg-ur8KW5BiV9VH5pXy .node ellipse,#mermaid-svg-ur8KW5BiV9VH5pXy .node polygon,#mermaid-svg-ur8KW5BiV9VH5pXy .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ur8KW5BiV9VH5pXy .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-ur8KW5BiV9VH5pXy g.clickable{cursor:pointer;}#mermaid-svg-ur8KW5BiV9VH5pXy g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-ur8KW5BiV9VH5pXy g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-ur8KW5BiV9VH5pXy .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-ur8KW5BiV9VH5pXy .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-ur8KW5BiV9VH5pXy .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-ur8KW5BiV9VH5pXy .dashed-line{stroke-dasharray:3;}#mermaid-svg-ur8KW5BiV9VH5pXy #compositionStart,#mermaid-svg-ur8KW5BiV9VH5pXy position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ur8KW5BiV9VH5pXy #compositionEnd,#mermaid-svg-ur8KW5BiV9VH5pXy position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ur8KW5BiV9VH5pXy #dependencyStart,#mermaid-svg-ur8KW5BiV9VH5pXy .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ur8KW5BiV9VH5pXy #dependencyStart,#mermaid-svg-ur8KW5BiV9VH5pXy .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ur8KW5BiV9VH5pXy #extensionStart,#mermaid-svg-ur8KW5BiV9VH5pXy .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ur8KW5BiV9VH5pXy #extensionEnd,#mermaid-svg-ur8KW5BiV9VH5pXy .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ur8KW5BiV9VH5pXy #aggregationStart,#mermaid-svg-ur8KW5BiV9VH5pXy .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ur8KW5BiV9VH5pXy #aggregationEnd,#mermaid-svg-ur8KW5BiV9VH5pXy .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ur8KW5BiV9VH5pXy .edgeTerminals{font-size:11px;}#mermaid-svg-ur8KW5BiV9VH5pXy :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 1 n A B classDiagram A"1"--|>"n"B 5.6.类的注释 可以用特定的标记文本来注释类，就像类的元数据一样，清楚地表明其性质。一些常见的注释实例如下： <<Interface>>表示一个接口类<<abstract>>表示抽象类<<Service>>表示一个服务器<<enumeration>>表示一个举例类 用法如下例： #mermaid-svg-VYCsDfORAltAdYk8 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-VYCsDfORAltAdYk8 .error-icon{fill:#552222;}#mermaid-svg-VYCsDfORAltAdYk8 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-VYCsDfORAltAdYk8 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-VYCsDfORAltAdYk8 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-VYCsDfORAltAdYk8 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-VYCsDfORAltAdYk8 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-VYCsDfORAltAdYk8 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-VYCsDfORAltAdYk8 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-VYCsDfORAltAdYk8 .marker.cross{stroke:#333333;}#mermaid-svg-VYCsDfORAltAdYk8 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-VYCsDfORAltAdYk8 g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-VYCsDfORAltAdYk8 g.classGroup text .title{font-weight:bolder;}#mermaid-svg-VYCsDfORAltAdYk8 .nodeLabel,#mermaid-svg-VYCsDfORAltAdYk8 .edgeLabel{color:#131300;}#mermaid-svg-VYCsDfORAltAdYk8 .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-VYCsDfORAltAdYk8 .label text{fill:#131300;}#mermaid-svg-VYCsDfORAltAdYk8 .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-VYCsDfORAltAdYk8 .classTitle{font-weight:bolder;}#mermaid-svg-VYCsDfORAltAdYk8 .node rect,#mermaid-svg-VYCsDfORAltAdYk8 .node circle,#mermaid-svg-VYCsDfORAltAdYk8 .node ellipse,#mermaid-svg-VYCsDfORAltAdYk8 .node polygon,#mermaid-svg-VYCsDfORAltAdYk8 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-VYCsDfORAltAdYk8 .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-VYCsDfORAltAdYk8 g.clickable{cursor:pointer;}#mermaid-svg-VYCsDfORAltAdYk8 g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-VYCsDfORAltAdYk8 g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-VYCsDfORAltAdYk8 .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-VYCsDfORAltAdYk8 .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-VYCsDfORAltAdYk8 .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-VYCsDfORAltAdYk8 .dashed-line{stroke-dasharray:3;}#mermaid-svg-VYCsDfORAltAdYk8 #compositionStart,#mermaid-svg-VYCsDfORAltAdYk8 position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-VYCsDfORAltAdYk8 #compositionEnd,#mermaid-svg-VYCsDfORAltAdYk8 position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-VYCsDfORAltAdYk8 #dependencyStart,#mermaid-svg-VYCsDfORAltAdYk8 .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-VYCsDfORAltAdYk8 #dependencyStart,#mermaid-svg-VYCsDfORAltAdYk8 .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-VYCsDfORAltAdYk8 #extensionStart,#mermaid-svg-VYCsDfORAltAdYk8 .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-VYCsDfORAltAdYk8 #extensionEnd,#mermaid-svg-VYCsDfORAltAdYk8 .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-VYCsDfORAltAdYk8 #aggregationStart,#mermaid-svg-VYCsDfORAltAdYk8 .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-VYCsDfORAltAdYk8 #aggregationEnd,#mermaid-svg-VYCsDfORAltAdYk8 .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-VYCsDfORAltAdYk8 .edgeTerminals{font-size:11px;}#mermaid-svg-VYCsDfORAltAdYk8 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} «interface» ClassName Element! Element!() classDiagram class ClassName <<interface>> ClassName ClassName : Element! ClassName : Element!()

这是一个比较复杂的用法，下面来一个简单的：

#mermaid-svg-8WmLuodoDLbnUtOz {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8WmLuodoDLbnUtOz .error-icon{fill:#552222;}#mermaid-svg-8WmLuodoDLbnUtOz .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-8WmLuodoDLbnUtOz .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-8WmLuodoDLbnUtOz .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-8WmLuodoDLbnUtOz .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-8WmLuodoDLbnUtOz .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-8WmLuodoDLbnUtOz .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-8WmLuodoDLbnUtOz .marker{fill:#333333;stroke:#333333;}#mermaid-svg-8WmLuodoDLbnUtOz .marker.cross{stroke:#333333;}#mermaid-svg-8WmLuodoDLbnUtOz svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-8WmLuodoDLbnUtOz g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-8WmLuodoDLbnUtOz g.classGroup text .title{font-weight:bolder;}#mermaid-svg-8WmLuodoDLbnUtOz .nodeLabel,#mermaid-svg-8WmLuodoDLbnUtOz .edgeLabel{color:#131300;}#mermaid-svg-8WmLuodoDLbnUtOz .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-8WmLuodoDLbnUtOz .label text{fill:#131300;}#mermaid-svg-8WmLuodoDLbnUtOz .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-8WmLuodoDLbnUtOz .classTitle{font-weight:bolder;}#mermaid-svg-8WmLuodoDLbnUtOz .node rect,#mermaid-svg-8WmLuodoDLbnUtOz .node circle,#mermaid-svg-8WmLuodoDLbnUtOz .node ellipse,#mermaid-svg-8WmLuodoDLbnUtOz .node polygon,#mermaid-svg-8WmLuodoDLbnUtOz .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-8WmLuodoDLbnUtOz .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-8WmLuodoDLbnUtOz g.clickable{cursor:pointer;}#mermaid-svg-8WmLuodoDLbnUtOz g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-8WmLuodoDLbnUtOz g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-8WmLuodoDLbnUtOz .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-8WmLuodoDLbnUtOz .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-8WmLuodoDLbnUtOz .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-8WmLuodoDLbnUtOz .dashed-line{stroke-dasharray:3;}#mermaid-svg-8WmLuodoDLbnUtOz #compositionStart,#mermaid-svg-8WmLuodoDLbnUtOz position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8WmLuodoDLbnUtOz #compositionEnd,#mermaid-svg-8WmLuodoDLbnUtOz position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8WmLuodoDLbnUtOz #dependencyStart,#mermaid-svg-8WmLuodoDLbnUtOz .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8WmLuodoDLbnUtOz #dependencyStart,#mermaid-svg-8WmLuodoDLbnUtOz .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8WmLuodoDLbnUtOz #extensionStart,#mermaid-svg-8WmLuodoDLbnUtOz .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8WmLuodoDLbnUtOz #extensionEnd,#mermaid-svg-8WmLuodoDLbnUtOz .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8WmLuodoDLbnUtOz #aggregationStart,#mermaid-svg-8WmLuodoDLbnUtOz .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8WmLuodoDLbnUtOz #aggregationEnd,#mermaid-svg-8WmLuodoDLbnUtOz .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8WmLuodoDLbnUtOz .edgeTerminals{font-size:11px;}#mermaid-svg-8WmLuodoDLbnUtOz :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} «interface» ClassName element! element!() classDiagram class ClassName{ <<interface>> element! element!() } 代码的注释：用%%进行注释，例如下： #mermaid-svg-csgS7QUJ62MUaD8F {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-csgS7QUJ62MUaD8F .error-icon{fill:#552222;}#mermaid-svg-csgS7QUJ62MUaD8F .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-csgS7QUJ62MUaD8F .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-csgS7QUJ62MUaD8F .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-csgS7QUJ62MUaD8F .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-csgS7QUJ62MUaD8F .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-csgS7QUJ62MUaD8F .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-csgS7QUJ62MUaD8F .marker{fill:#333333;stroke:#333333;}#mermaid-svg-csgS7QUJ62MUaD8F .marker.cross{stroke:#333333;}#mermaid-svg-csgS7QUJ62MUaD8F svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-csgS7QUJ62MUaD8F g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-csgS7QUJ62MUaD8F g.classGroup text .title{font-weight:bolder;}#mermaid-svg-csgS7QUJ62MUaD8F .nodeLabel,#mermaid-svg-csgS7QUJ62MUaD8F .edgeLabel{color:#131300;}#mermaid-svg-csgS7QUJ62MUaD8F .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-csgS7QUJ62MUaD8F .label text{fill:#131300;}#mermaid-svg-csgS7QUJ62MUaD8F .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-csgS7QUJ62MUaD8F .classTitle{font-weight:bolder;}#mermaid-svg-csgS7QUJ62MUaD8F .node rect,#mermaid-svg-csgS7QUJ62MUaD8F .node circle,#mermaid-svg-csgS7QUJ62MUaD8F .node ellipse,#mermaid-svg-csgS7QUJ62MUaD8F .node polygon,#mermaid-svg-csgS7QUJ62MUaD8F .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-csgS7QUJ62MUaD8F .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-csgS7QUJ62MUaD8F g.clickable{cursor:pointer;}#mermaid-svg-csgS7QUJ62MUaD8F g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-csgS7QUJ62MUaD8F g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-csgS7QUJ62MUaD8F .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-csgS7QUJ62MUaD8F .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-csgS7QUJ62MUaD8F .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-csgS7QUJ62MUaD8F .dashed-line{stroke-dasharray:3;}#mermaid-svg-csgS7QUJ62MUaD8F #compositionStart,#mermaid-svg-csgS7QUJ62MUaD8F position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-csgS7QUJ62MUaD8F #compositionEnd,#mermaid-svg-csgS7QUJ62MUaD8F position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-csgS7QUJ62MUaD8F #dependencyStart,#mermaid-svg-csgS7QUJ62MUaD8F .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-csgS7QUJ62MUaD8F #dependencyStart,#mermaid-svg-csgS7QUJ62MUaD8F .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-csgS7QUJ62MUaD8F #extensionStart,#mermaid-svg-csgS7QUJ62MUaD8F .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-csgS7QUJ62MUaD8F #extensionEnd,#mermaid-svg-csgS7QUJ62MUaD8F .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-csgS7QUJ62MUaD8F #aggregationStart,#mermaid-svg-csgS7QUJ62MUaD8F .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-csgS7QUJ62MUaD8F #aggregationEnd,#mermaid-svg-csgS7QUJ62MUaD8F .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-csgS7QUJ62MUaD8F .edgeTerminals{font-size:11px;}#mermaid-svg-csgS7QUJ62MUaD8F :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} ClassName red blue() classDiagram %% class Classname{ %%red %%blue() %%} class ClassName{ red blue() } 5.7.设置图表的方向 我们可以很清楚的看出，类图中是包含有方向的，所以我们可以设置类图的方向： #mermaid-svg-N2yOXQobLme8tIXZ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-N2yOXQobLme8tIXZ .error-icon{fill:#552222;}#mermaid-svg-N2yOXQobLme8tIXZ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-N2yOXQobLme8tIXZ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-N2yOXQobLme8tIXZ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-N2yOXQobLme8tIXZ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-N2yOXQobLme8tIXZ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-N2yOXQobLme8tIXZ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-N2yOXQobLme8tIXZ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-N2yOXQobLme8tIXZ .marker.cross{stroke:#333333;}#mermaid-svg-N2yOXQobLme8tIXZ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-N2yOXQobLme8tIXZ g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-N2yOXQobLme8tIXZ g.classGroup text .title{font-weight:bolder;}#mermaid-svg-N2yOXQobLme8tIXZ .nodeLabel,#mermaid-svg-N2yOXQobLme8tIXZ .edgeLabel{color:#131300;}#mermaid-svg-N2yOXQobLme8tIXZ .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-N2yOXQobLme8tIXZ .label text{fill:#131300;}#mermaid-svg-N2yOXQobLme8tIXZ .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-N2yOXQobLme8tIXZ .classTitle{font-weight:bolder;}#mermaid-svg-N2yOXQobLme8tIXZ .node rect,#mermaid-svg-N2yOXQobLme8tIXZ .node circle,#mermaid-svg-N2yOXQobLme8tIXZ .node ellipse,#mermaid-svg-N2yOXQobLme8tIXZ .node polygon,#mermaid-svg-N2yOXQobLme8tIXZ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-N2yOXQobLme8tIXZ .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-N2yOXQobLme8tIXZ g.clickable{cursor:pointer;}#mermaid-svg-N2yOXQobLme8tIXZ g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-N2yOXQobLme8tIXZ g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-N2yOXQobLme8tIXZ .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-N2yOXQobLme8tIXZ .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-N2yOXQobLme8tIXZ .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-N2yOXQobLme8tIXZ .dashed-line{stroke-dasharray:3;}#mermaid-svg-N2yOXQobLme8tIXZ #compositionStart,#mermaid-svg-N2yOXQobLme8tIXZ position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-N2yOXQobLme8tIXZ #compositionEnd,#mermaid-svg-N2yOXQobLme8tIXZ position{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-N2yOXQobLme8tIXZ #dependencyStart,#mermaid-svg-N2yOXQobLme8tIXZ .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-N2yOXQobLme8tIXZ #dependencyStart,#mermaid-svg-N2yOXQobLme8tIXZ .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-N2yOXQobLme8tIXZ #extensionStart,#mermaid-svg-N2yOXQobLme8tIXZ .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-N2yOXQobLme8tIXZ #extensionEnd,#mermaid-svg-N2yOXQobLme8tIXZ .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-N2yOXQobLme8tIXZ #aggregationStart,#mermaid-svg-N2yOXQobLme8tIXZ .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-N2yOXQobLme8tIXZ #aggregationEnd,#mermaid-svg-N2yOXQobLme8tIXZ .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-N2yOXQobLme8tIXZ .edgeTerminals{font-size:11px;}#mermaid-svg-N2yOXQobLme8tIXZ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} comment comment Student -idCard:IdCard +id() IdCard -id : int -name : string +id() Bike -id : int -name : String +id() classDiagram class Student{ -idCard:IdCard +id() } class IdCard{ -id : int -name : string +id() } class Bike{ -id : int -name : String +id() } Student --o IdCard : comment Bike --o IdCard : comment 6.状态图 状态图是一种在计算机科学和相关领域中用于描述系统行为的图。状态图要求所描述的系统由有限数量的状态组成；有时情况确实如此，而在其他情况下有时这是一个合理的抽象。Mermaid 可以渲染状态图。语法大体与plantUml 中使用的语法保持一致，因为这将使用户更容易在mermaid 和plantUml 之间共享图表。

例如下：

#mermaid-svg-IMIvN3HlBDEWeXzm {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-IMIvN3HlBDEWeXzm .error-icon{fill:#552222;}#mermaid-svg-IMIvN3HlBDEWeXzm .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-IMIvN3HlBDEWeXzm .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-IMIvN3HlBDEWeXzm .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-IMIvN3HlBDEWeXzm .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-IMIvN3HlBDEWeXzm .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-IMIvN3HlBDEWeXzm .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-IMIvN3HlBDEWeXzm .marker{fill:#333333;stroke:#333333;}#mermaid-svg-IMIvN3HlBDEWeXzm .marker.cross{stroke:#333333;}#mermaid-svg-IMIvN3HlBDEWeXzm svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-IMIvN3HlBDEWeXzm defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-IMIvN3HlBDEWeXzm g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-IMIvN3HlBDEWeXzm g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-IMIvN3HlBDEWeXzm g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-IMIvN3HlBDEWeXzm g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-IMIvN3HlBDEWeXzm g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-IMIvN3HlBDEWeXzm .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-IMIvN3HlBDEWeXzm .stateGroup posit{fill:white;border-bottom:1px;}#mermaid-svg-IMIvN3HlBDEWeXzm .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-IMIvN3HlBDEWeXzm .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-IMIvN3HlBDEWeXzm .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-IMIvN3HlBDEWeXzm .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-IMIvN3HlBDEWeXzm .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-IMIvN3HlBDEWeXzm .edgeLabel .label text{fill:#333;}#mermaid-svg-IMIvN3HlBDEWeXzm .label div .edgeLabel{color:#333;}#mermaid-svg-IMIvN3HlBDEWeXzm .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-IMIvN3HlBDEWeXzm .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-IMIvN3HlBDEWeXzm .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-IMIvN3HlBDEWeXzm .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-IMIvN3HlBDEWeXzm .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-IMIvN3HlBDEWeXzm .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-IMIvN3HlBDEWeXzm .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-IMIvN3HlBDEWeXzm #statediagram-barbEnd{fill:#333333;}#mermaid-svg-IMIvN3HlBDEWeXzm .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-IMIvN3HlBDEWeXzm .cluster-label,#mermaid-svg-IMIvN3HlBDEWeXzm .nodeLabel{color:#131300;}#mermaid-svg-IMIvN3HlBDEWeXzm .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-IMIvN3HlBDEWeXzm .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-IMIvN3HlBDEWeXzm .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-IMIvN3HlBDEWeXzm .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-IMIvN3HlBDEWeXzm .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-IMIvN3HlBDEWeXzm .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-IMIvN3HlBDEWeXzm .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-IMIvN3HlBDEWeXzm .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-IMIvN3HlBDEWeXzm .note-edge{stroke-dasharray:5;}#mermaid-svg-IMIvN3HlBDEWeXzm .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-IMIvN3HlBDEWeXzm .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-IMIvN3HlBDEWeXzm .statediagram-note text{fill:black;}#mermaid-svg-IMIvN3HlBDEWeXzm .statediagram-note .nodeLabel{color:black;}#mermaid-svg-IMIvN3HlBDEWeXzm .statediagram .edgeLabel{color:red;}#mermaid-svg-IMIvN3HlBDEWeXzm #dependencyStart,#mermaid-svg-IMIvN3HlBDEWeXzm #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-IMIvN3HlBDEWeXzm :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Still Moving Crash stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

比较旧的渲染器：

stateDiagram [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*] 幸运的是，Typora能够兼容两者的渲染 6.1.状态 一个状态能够以多种方式去声明，最简单的一种声明方式就是单独作为一个id描述： #mermaid-svg-DL7eC2vqXUplVMpW {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-DL7eC2vqXUplVMpW .error-icon{fill:#552222;}#mermaid-svg-DL7eC2vqXUplVMpW .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-DL7eC2vqXUplVMpW .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-DL7eC2vqXUplVMpW .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-DL7eC2vqXUplVMpW .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-DL7eC2vqXUplVMpW .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-DL7eC2vqXUplVMpW .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-DL7eC2vqXUplVMpW .marker{fill:#333333;stroke:#333333;}#mermaid-svg-DL7eC2vqXUplVMpW .marker.cross{stroke:#333333;}#mermaid-svg-DL7eC2vqXUplVMpW svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-DL7eC2vqXUplVMpW defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-DL7eC2vqXUplVMpW g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-DL7eC2vqXUplVMpW g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-DL7eC2vqXUplVMpW g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-DL7eC2vqXUplVMpW g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-DL7eC2vqXUplVMpW g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-DL7eC2vqXUplVMpW .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-DL7eC2vqXUplVMpW .stateGroup posit{fill:white;border-bottom:1px;}#mermaid-svg-DL7eC2vqXUplVMpW .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-DL7eC2vqXUplVMpW .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-DL7eC2vqXUplVMpW .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-DL7eC2vqXUplVMpW .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-DL7eC2vqXUplVMpW .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-DL7eC2vqXUplVMpW .edgeLabel .label text{fill:#333;}#mermaid-svg-DL7eC2vqXUplVMpW .label div .edgeLabel{color:#333;}#mermaid-svg-DL7eC2vqXUplVMpW .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-DL7eC2vqXUplVMpW .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-DL7eC2vqXUplVMpW .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-DL7eC2vqXUplVMpW .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-DL7eC2vqXUplVMpW .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-DL7eC2vqXUplVMpW .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-DL7eC2vqXUplVMpW .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-DL7eC2vqXUplVMpW #statediagram-barbEnd{fill:#333333;}#mermaid-svg-DL7eC2vqXUplVMpW .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-DL7eC2vqXUplVMpW .cluster-label,#mermaid-svg-DL7eC2vqXUplVMpW .nodeLabel{color:#131300;}#mermaid-svg-DL7eC2vqXUplVMpW .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-DL7eC2vqXUplVMpW .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-DL7eC2vqXUplVMpW .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-DL7eC2vqXUplVMpW .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-DL7eC2vqXUplVMpW .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-DL7eC2vqXUplVMpW .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-DL7eC2vqXUplVMpW .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-DL7eC2vqXUplVMpW .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-DL7eC2vqXUplVMpW .note-edge{stroke-dasharray:5;}#mermaid-svg-DL7eC2vqXUplVMpW .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-DL7eC2vqXUplVMpW .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-DL7eC2vqXUplVMpW .statediagram-note text{fill:black;}#mermaid-svg-DL7eC2vqXUplVMpW .statediagram-note .nodeLabel{color:black;}#mermaid-svg-DL7eC2vqXUplVMpW .statediagram .edgeLabel{color:red;}#mermaid-svg-DL7eC2vqXUplVMpW #dependencyStart,#mermaid-svg-DL7eC2vqXUplVMpW #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-DL7eC2vqXUplVMpW :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} s1 stateDiagram-v2 s1 另外一种方式就是用一个描述来简化id： #mermaid-svg-sKMygEPAE3sJGrYn {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-sKMygEPAE3sJGrYn .error-icon{fill:#552222;}#mermaid-svg-sKMygEPAE3sJGrYn .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-sKMygEPAE3sJGrYn .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-sKMygEPAE3sJGrYn .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-sKMygEPAE3sJGrYn .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-sKMygEPAE3sJGrYn .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-sKMygEPAE3sJGrYn .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-sKMygEPAE3sJGrYn .marker{fill:#333333;stroke:#333333;}#mermaid-svg-sKMygEPAE3sJGrYn .marker.cross{stroke:#333333;}#mermaid-svg-sKMygEPAE3sJGrYn svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-sKMygEPAE3sJGrYn defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-sKMygEPAE3sJGrYn g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-sKMygEPAE3sJGrYn g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-sKMygEPAE3sJGrYn g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-sKMygEPAE3sJGrYn g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-sKMygEPAE3sJGrYn g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-sKMygEPAE3sJGrYn .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-sKMygEPAE3sJGrYn .stateGroup posit{fill:white;border-bottom:1px;}#mermaid-svg-sKMygEPAE3sJGrYn .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-sKMygEPAE3sJGrYn .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-sKMygEPAE3sJGrYn .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-sKMygEPAE3sJGrYn .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-sKMygEPAE3sJGrYn .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-sKMygEPAE3sJGrYn .edgeLabel .label text{fill:#333;}#mermaid-svg-sKMygEPAE3sJGrYn .label div .edgeLabel{color:#333;}#mermaid-svg-sKMygEPAE3sJGrYn .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-sKMygEPAE3sJGrYn .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-sKMygEPAE3sJGrYn .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-sKMygEPAE3sJGrYn .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-sKMygEPAE3sJGrYn .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-sKMygEPAE3sJGrYn .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-sKMygEPAE3sJGrYn .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-sKMygEPAE3sJGrYn #statediagram-barbEnd{fill:#333333;}#mermaid-svg-sKMygEPAE3sJGrYn .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-sKMygEPAE3sJGrYn .cluster-label,#mermaid-svg-sKMygEPAE3sJGrYn .nodeLabel{color:#131300;}#mermaid-svg-sKMygEPAE3sJGrYn .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-sKMygEPAE3sJGrYn .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-sKMygEPAE3sJGrYn .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-sKMygEPAE3sJGrYn .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-sKMygEPAE3sJGrYn .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-sKMygEPAE3sJGrYn .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-sKMygEPAE3sJGrYn .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-sKMygEPAE3sJGrYn .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-sKMygEPAE3sJGrYn .note-edge{stroke-dasharray:5;}#mermaid-svg-sKMygEPAE3sJGrYn .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-sKMygEPAE3sJGrYn .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-sKMygEPAE3sJGrYn .statediagram-note text{fill:black;}#mermaid-svg-sKMygEPAE3sJGrYn .statediagram-note .nodeLabel{color:black;}#mermaid-svg-sKMygEPAE3sJGrYn .statediagram .edgeLabel{color:red;}#mermaid-svg-sKMygEPAE3sJGrYn #dependencyStart,#mermaid-svg-sKMygEPAE3sJGrYn #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-sKMygEPAE3sJGrYn :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} This is a state description stateDiagram-v2 state "This is a state description" as s2 再或者我们可以用：来引出id: #mermaid-svg-8VoVeBy1ky9oJspv {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8VoVeBy1ky9oJspv .error-icon{fill:#552222;}#mermaid-svg-8VoVeBy1ky9oJspv .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-8VoVeBy1ky9oJspv .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-8VoVeBy1ky9oJspv .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-8VoVeBy1ky9oJspv .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-8VoVeBy1ky9oJspv .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-8VoVeBy1ky9oJspv .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-8VoVeBy1ky9oJspv .marker{fill:#333333;stroke:#333333;}#mermaid-svg-8VoVeBy1ky9oJspv .marker.cross{stroke:#333333;}#mermaid-svg-8VoVeBy1ky9oJspv svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-8VoVeBy1ky9oJspv defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-8VoVeBy1ky9oJspv g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-8VoVeBy1ky9oJspv g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-8VoVeBy1ky9oJspv g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-8VoVeBy1ky9oJspv g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-8VoVeBy1ky9oJspv g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-8VoVeBy1ky9oJspv .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-8VoVeBy1ky9oJspv .stateGroup posit{fill:white;border-bottom:1px;}#mermaid-svg-8VoVeBy1ky9oJspv .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-8VoVeBy1ky9oJspv .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-8VoVeBy1ky9oJspv .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-8VoVeBy1ky9oJspv .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-8VoVeBy1ky9oJspv .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-8VoVeBy1ky9oJspv .edgeLabel .label text{fill:#333;}#mermaid-svg-8VoVeBy1ky9oJspv .label div .edgeLabel{color:#333;}#mermaid-svg-8VoVeBy1ky9oJspv .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-8VoVeBy1ky9oJspv .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-8VoVeBy1ky9oJspv .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-8VoVeBy1ky9oJspv .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-8VoVeBy1ky9oJspv .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-8VoVeBy1ky9oJspv .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-8VoVeBy1ky9oJspv .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-8VoVeBy1ky9oJspv #statediagram-barbEnd{fill:#333333;}#mermaid-svg-8VoVeBy1ky9oJspv .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-8VoVeBy1ky9oJspv .cluster-label,#mermaid-svg-8VoVeBy1ky9oJspv .nodeLabel{color:#131300;}#mermaid-svg-8VoVeBy1ky9oJspv .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-8VoVeBy1ky9oJspv .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-8VoVeBy1ky9oJspv .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-8VoVeBy1ky9oJspv .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-8VoVeBy1ky9oJspv .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-8VoVeBy1ky9oJspv .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-8VoVeBy1ky9oJspv .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-8VoVeBy1ky9oJspv .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-8VoVeBy1ky9oJspv .note-edge{stroke-dasharray:5;}#mermaid-svg-8VoVeBy1ky9oJspv .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-8VoVeBy1ky9oJspv .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-8VoVeBy1ky9oJspv .statediagram-note text{fill:black;}#mermaid-svg-8VoVeBy1ky9oJspv .statediagram-note .nodeLabel{color:black;}#mermaid-svg-8VoVeBy1ky9oJspv .statediagram .edgeLabel{color:red;}#mermaid-svg-8VoVeBy1ky9oJspv #dependencyStart,#mermaid-svg-8VoVeBy1ky9oJspv #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-8VoVeBy1ky9oJspv :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} This is a state description stateDiagram-v2 s2:This is a state description 6.2.状态转换 我们通常用-->来作为状态转换的语法，当我们要定义两个状态之间的转换时： #mermaid-svg-drL6BafOoqDqBdRR {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-drL6BafOoqDqBdRR .error-icon{fill:#552222;}#mermaid-svg-drL6BafOoqDqBdRR .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-drL6BafOoqDqBdRR .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-drL6BafOoqDqBdRR .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-drL6BafOoqDqBdRR .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-drL6BafOoqDqBdRR .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-drL6BafOoqDqBdRR .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-drL6BafOoqDqBdRR .marker{fill:#333333;stroke:#333333;}#mermaid-svg-drL6BafOoqDqBdRR .marker.cross{stroke:#333333;}#mermaid-svg-drL6BafOoqDqBdRR svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-drL6BafOoqDqBdRR defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-drL6BafOoqDqBdRR g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-drL6BafOoqDqBdRR g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-drL6BafOoqDqBdRR g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-drL6BafOoqDqBdRR g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-drL6BafOoqDqBdRR g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-drL6BafOoqDqBdRR .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-drL6BafOoqDqBdRR .stateGroup posit{fill:white;border-bottom:1px;}#mermaid-svg-drL6BafOoqDqBdRR .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-drL6BafOoqDqBdRR .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-drL6BafOoqDqBdRR .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-drL6BafOoqDqBdRR .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-drL6BafOoqDqBdRR .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-drL6BafOoqDqBdRR .edgeLabel .label text{fill:#333;}#mermaid-svg-drL6BafOoqDqBdRR .label div .edgeLabel{color:#333;}#mermaid-svg-drL6BafOoqDqBdRR .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-drL6BafOoqDqBdRR .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-drL6BafOoqDqBdRR .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-drL6BafOoqDqBdRR .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-drL6BafOoqDqBdRR .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-drL6BafOoqDqBdRR .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-drL6BafOoqDqBdRR .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-drL6BafOoqDqBdRR #statediagram-barbEnd{fill:#333333;}#mermaid-svg-drL6BafOoqDqBdRR .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-drL6BafOoqDqBdRR .cluster-label,#mermaid-svg-drL6BafOoqDqBdRR .nodeLabel{color:#131300;}#mermaid-svg-drL6BafOoqDqBdRR .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-drL6BafOoqDqBdRR .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-drL6BafOoqDqBdRR .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-drL6BafOoqDqBdRR .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-drL6BafOoqDqBdRR .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-drL6BafOoqDqBdRR .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-drL6BafOoqDqBdRR .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-drL6BafOoqDqBdRR .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-drL6BafOoqDqBdRR .note-edge{stroke-dasharray:5;}#mermaid-svg-drL6BafOoqDqBdRR .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-drL6BafOoqDqBdRR .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-drL6BafOoqDqBdRR .statediagram-note text{fill:black;}#mermaid-svg-drL6BafOoqDqBdRR .statediagram-note .nodeLabel{color:black;}#mermaid-svg-drL6BafOoqDqBdRR .statediagram .edgeLabel{color:red;}#mermaid-svg-drL6BafOoqDqBdRR #dependencyStart,#mermaid-svg-drL6BafOoqDqBdRR #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-drL6BafOoqDqBdRR :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} s1 s2 stateDiagram-v2 s1-->s2 我们也可以在状态转换的同时添加一个描述： #mermaid-svg-325A4CAJQHeXA3cl {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-325A4CAJQHeXA3cl .error-icon{fill:#552222;}#mermaid-svg-325A4CAJQHeXA3cl .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-325A4CAJQHeXA3cl .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-325A4CAJQHeXA3cl .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-325A4CAJQHeXA3cl .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-325A4CAJQHeXA3cl .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-325A4CAJQHeXA3cl .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-325A4CAJQHeXA3cl .marker{fill:#333333;stroke:#333333;}#mermaid-svg-325A4CAJQHeXA3cl .marker.cross{stroke:#333333;}#mermaid-svg-325A4CAJQHeXA3cl svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-325A4CAJQHeXA3cl defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-325A4CAJQHeXA3cl g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-325A4CAJQHeXA3cl g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-325A4CAJQHeXA3cl g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-325A4CAJQHeXA3cl g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-325A4CAJQHeXA3cl g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-325A4CAJQHeXA3cl .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-325A4CAJQHeXA3cl .stateGroup posit{fill:white;border-bottom:1px;}#mermaid-svg-325A4CAJQHeXA3cl .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-325A4CAJQHeXA3cl .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-325A4CAJQHeXA3cl .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-325A4CAJQHeXA3cl .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-325A4CAJQHeXA3cl .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-325A4CAJQHeXA3cl .edgeLabel .label text{fill:#333;}#mermaid-svg-325A4CAJQHeXA3cl .label div .edgeLabel{color:#333;}#mermaid-svg-325A4CAJQHeXA3cl .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-325A4CAJQHeXA3cl .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-325A4CAJQHeXA3cl .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-325A4CAJQHeXA3cl .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-325A4CAJQHeXA3cl .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-325A4CAJQHeXA3cl .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-325A4CAJQHeXA3cl .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-325A4CAJQHeXA3cl #statediagram-barbEnd{fill:#333333;}#mermaid-svg-325A4CAJQHeXA3cl .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-325A4CAJQHeXA3cl .cluster-label,#mermaid-svg-325A4CAJQHeXA3cl .nodeLabel{color:#131300;}#mermaid-svg-325A4CAJQHeXA3cl .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-325A4CAJQHeXA3cl .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-325A4CAJQHeXA3cl .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-325A4CAJQHeXA3cl .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-325A4CAJQHeXA3cl .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-325A4CAJQHeXA3cl .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-325A4CAJQHeXA3cl .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-325A4CAJQHeXA3cl .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-325A4CAJQHeXA3cl .note-edge{stroke-dasharray:5;}#mermaid-svg-325A4CAJQHeXA3cl .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-325A4CAJQHeXA3cl .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-325A4CAJQHeXA3cl .statediagram-note text{fill:black;}#mermaid-svg-325A4CAJQHeXA3cl .statediagram-note .nodeLabel{color:black;}#mermaid-svg-325A4CAJQHeXA3cl .statediagram .edgeLabel{color:red;}#mermaid-svg-325A4CAJQHeXA3cl #dependencyStart,#mermaid-svg-325A4CAJQHeXA3cl #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-325A4CAJQHeXA3cl :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} This is a transition s1 s2 stateDiagram-v2 s1-->s2:This is a transition 6.3.开始和结束 在Mermaid里面有两个特殊的状态——开始和结束，我们通常用[*]来表示它们： #mermaid-svg-31zrFzC8ZMCrfyes {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-31zrFzC8ZMCrfyes .error-icon{fill:#552222;}#mermaid-svg-31zrFzC8ZMCrfyes .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-31zrFzC8ZMCrfyes .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-31zrFzC8ZMCrfyes .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-31zrFzC8ZMCrfyes .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-31zrFzC8ZMCrfyes .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-31zrFzC8ZMCrfyes .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-31zrFzC8ZMCrfyes .marker{fill:#333333;stroke:#333333;}#mermaid-svg-31zrFzC8ZMCrfyes .marker.cross{stroke:#333333;}#mermaid-svg-31zrFzC8ZMCrfyes svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-31zrFzC8ZMCrfyes defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-31zrFzC8ZMCrfyes g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-31zrFzC8ZMCrfyes g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-31zrFzC8ZMCrfyes g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-31zrFzC8ZMCrfyes g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-31zrFzC8ZMCrfyes g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-31zrFzC8ZMCrfyes .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-31zrFzC8ZMCrfyes .stateGroup posit{fill:white;border-bottom:1px;}#mermaid-svg-31zrFzC8ZMCrfyes .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-31zrFzC8ZMCrfyes .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-31zrFzC8ZMCrfyes .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-31zrFzC8ZMCrfyes .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-31zrFzC8ZMCrfyes .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-31zrFzC8ZMCrfyes .edgeLabel .label text{fill:#333;}#mermaid-svg-31zrFzC8ZMCrfyes .label div .edgeLabel{color:#333;}#mermaid-svg-31zrFzC8ZMCrfyes .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-31zrFzC8ZMCrfyes .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-31zrFzC8ZMCrfyes .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-31zrFzC8ZMCrfyes .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-31zrFzC8ZMCrfyes .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-31zrFzC8ZMCrfyes .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-31zrFzC8ZMCrfyes .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-31zrFzC8ZMCrfyes #statediagram-barbEnd{fill:#333333;}#mermaid-svg-31zrFzC8ZMCrfyes .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-31zrFzC8ZMCrfyes .cluster-label,#mermaid-svg-31zrFzC8ZMCrfyes .nodeLabel{color:#131300;}#mermaid-svg-31zrFzC8ZMCrfyes .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-31zrFzC8ZMCrfyes .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-31zrFzC8ZMCrfyes .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-31zrFzC8ZMCrfyes .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-31zrFzC8ZMCrfyes .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-31zrFzC8ZMCrfyes .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-31zrFzC8ZMCrfyes .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-31zrFzC8ZMCrfyes .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-31zrFzC8ZMCrfyes .note-edge{stroke-dasharray:5;}#mermaid-svg-31zrFzC8ZMCrfyes .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-31zrFzC8ZMCrfyes .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-31zrFzC8ZMCrfyes .statediagram-note text{fill:black;}#mermaid-svg-31zrFzC8ZMCrfyes .statediagram-note .nodeLabel{color:black;}#mermaid-svg-31zrFzC8ZMCrfyes .statediagram .edgeLabel{color:red;}#mermaid-svg-31zrFzC8ZMCrfyes #dependencyStart,#mermaid-svg-31zrFzC8ZMCrfyes #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-31zrFzC8ZMCrfyes :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} A stateDiagram-v2 [*]-->A A-->[*] 6.4.嵌套状态 在实际生活中，我们经常运用多维的状态图来描述一个系统内部的状态关系，为了定义复合状态，我们需要使用到一个state关键字，后面跟一个id和{}，例如下： #mermaid-svg-iHcOYLNAcPwWMS7g {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-iHcOYLNAcPwWMS7g .error-icon{fill:#552222;}#mermaid-svg-iHcOYLNAcPwWMS7g .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-iHcOYLNAcPwWMS7g .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-iHcOYLNAcPwWMS7g .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-iHcOYLNAcPwWMS7g .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-iHcOYLNAcPwWMS7g .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-iHcOYLNAcPwWMS7g .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-iHcOYLNAcPwWMS7g .marker{fill:#333333;stroke:#333333;}#mermaid-svg-iHcOYLNAcPwWMS7g .marker.cross{stroke:#333333;}#mermaid-svg-iHcOYLNAcPwWMS7g svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-iHcOYLNAcPwWMS7g defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-iHcOYLNAcPwWMS7g g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-iHcOYLNAcPwWMS7g g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-iHcOYLNAcPwWMS7g g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-iHcOYLNAcPwWMS7g g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-iHcOYLNAcPwWMS7g g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-iHcOYLNAcPwWMS7g .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-iHcOYLNAcPwWMS7g .stateGroup posit{fill:white;border-bottom:1px;}#mermaid-svg-iHcOYLNAcPwWMS7g .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-iHcOYLNAcPwWMS7g .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-iHcOYLNAcPwWMS7g .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-iHcOYLNAcPwWMS7g .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-iHcOYLNAcPwWMS7g .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-iHcOYLNAcPwWMS7g .edgeLabel .label text{fill:#333;}#mermaid-svg-iHcOYLNAcPwWMS7g .label div .edgeLabel{color:#333;}#mermaid-svg-iHcOYLNAcPwWMS7g .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-iHcOYLNAcPwWMS7g .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-iHcOYLNAcPwWMS7g .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-iHcOYLNAcPwWMS7g .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-iHcOYLNAcPwWMS7g .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-iHcOYLNAcPwWMS7g .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-iHcOYLNAcPwWMS7g .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-iHcOYLNAcPwWMS7g #statediagram-barbEnd{fill:#333333;}#mermaid-svg-iHcOYLNAcPwWMS7g .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-iHcOYLNAcPwWMS7g .cluster-label,#mermaid-svg-iHcOYLNAcPwWMS7g .nodeLabel{color:#131300;}#mermaid-svg-iHcOYLNAcPwWMS7g .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-iHcOYLNAcPwWMS7g .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-iHcOYLNAcPwWMS7g .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-iHcOYLNAcPwWMS7g .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-iHcOYLNAcPwWMS7g .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-iHcOYLNAcPwWMS7g .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-iHcOYLNAcPwWMS7g .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-iHcOYLNAcPwWMS7g .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-iHcOYLNAcPwWMS7g .note-edge{stroke-dasharray:5;}#mermaid-svg-iHcOYLNAcPwWMS7g .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-iHcOYLNAcPwWMS7g .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-iHcOYLNAcPwWMS7g .statediagram-note text{fill:black;}#mermaid-svg-iHcOYLNAcPwWMS7g .statediagram-note .nodeLabel{color:black;}#mermaid-svg-iHcOYLNAcPwWMS7g .statediagram .edgeLabel{color:red;}#mermaid-svg-iHcOYLNAcPwWMS7g #dependencyStart,#mermaid-svg-iHcOYLNAcPwWMS7g #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-iHcOYLNAcPwWMS7g :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} A S1 S2 stateDiagram-v2 [*]-->A state A{ [*]-->S1 S1-->S2 S2-->[*] } 我们在来一个多层嵌套： #mermaid-svg-K7B01eOnMyJZAuPl {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-K7B01eOnMyJZAuPl .error-icon{fill:#552222;}#mermaid-svg-K7B01eOnMyJZAuPl .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-K7B01eOnMyJZAuPl .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-K7B01eOnMyJZAuPl .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-K7B01eOnMyJZAuPl .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-K7B01eOnMyJZAuPl .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-K7B01eOnMyJZAuPl .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-K7B01eOnMyJZAuPl .marker{fill:#333333;stroke:#333333;}#mermaid-svg-K7B01eOnMyJZAuPl .marker.cross{stroke:#333333;}#mermaid-svg-K7B01eOnMyJZAuPl svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-K7B01eOnMyJZAuPl defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-K7B01eOnMyJZAuPl g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-K7B01eOnMyJZAuPl g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-K7B01eOnMyJZAuPl g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-K7B01eOnMyJZAuPl g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-K7B01eOnMyJZAuPl g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-K7B01eOnMyJZAuPl .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-K7B01eOnMyJZAuPl .stateGroup posit{fill:white;border-bottom:1px;}#mermaid-svg-K7B01eOnMyJZAuPl .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-K7B01eOnMyJZAuPl .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-K7B01eOnMyJZAuPl .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-K7B01eOnMyJZAuPl .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-K7B01eOnMyJZAuPl .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-K7B01eOnMyJZAuPl .edgeLabel .label text{fill:#333;}#mermaid-svg-K7B01eOnMyJZAuPl .label div .edgeLabel{color:#333;}#mermaid-svg-K7B01eOnMyJZAuPl .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-K7B01eOnMyJZAuPl .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-K7B01eOnMyJZAuPl .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-K7B01eOnMyJZAuPl .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-K7B01eOnMyJZAuPl .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-K7B01eOnMyJZAuPl .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-K7B01eOnMyJZAuPl .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-K7B01eOnMyJZAuPl #statediagram-barbEnd{fill:#333333;}#mermaid-svg-K7B01eOnMyJZAuPl .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-K7B01eOnMyJZAuPl .cluster-label,#mermaid-svg-K7B01eOnMyJZAuPl .nodeLabel{color:#131300;}#mermaid-svg-K7B01eOnMyJZAuPl .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-K7B01eOnMyJZAuPl .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-K7B01eOnMyJZAuPl .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-K7B01eOnMyJZAuPl .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-K7B01eOnMyJZAuPl .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-K7B01eOnMyJZAuPl .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-K7B01eOnMyJZAuPl .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-K7B01eOnMyJZAuPl .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-K7B01eOnMyJZAuPl .note-edge{stroke-dasharray:5;}#mermaid-svg-K7B01eOnMyJZAuPl .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-K7B01eOnMyJZAuPl .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-K7B01eOnMyJZAuPl .statediagram-note text{fill:black;}#mermaid-svg-K7B01eOnMyJZAuPl .statediagram-note .nodeLabel{color:black;}#mermaid-svg-K7B01eOnMyJZAuPl .statediagram .edgeLabel{color:red;}#mermaid-svg-K7B01eOnMyJZAuPl #dependencyStart,#mermaid-svg-K7B01eOnMyJZAuPl #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-K7B01eOnMyJZAuPl :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} A B C D E stateDiagram-v2 [*]-->A state A { [*]-->B state B { [*]-->C state C { [*]-->D state D { [*]-->E E-->[*] } } } } 我么还可以对其进行分支描述： #mermaid-svg-wBtudyzNeNw9lzW1 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-wBtudyzNeNw9lzW1 .error-icon{fill:#552222;}#mermaid-svg-wBtudyzNeNw9lzW1 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-wBtudyzNeNw9lzW1 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-wBtudyzNeNw9lzW1 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-wBtudyzNeNw9lzW1 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-wBtudyzNeNw9lzW1 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-wBtudyzNeNw9lzW1 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-wBtudyzNeNw9lzW1 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-wBtudyzNeNw9lzW1 .marker.cross{stroke:#333333;}#mermaid-svg-wBtudyzNeNw9lzW1 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-wBtudyzNeNw9lzW1 defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-wBtudyzNeNw9lzW1 g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-wBtudyzNeNw9lzW1 g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-wBtudyzNeNw9lzW1 g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-wBtudyzNeNw9lzW1 g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-wBtudyzNeNw9lzW1 g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-wBtudyzNeNw9lzW1 .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-wBtudyzNeNw9lzW1 .stateGroup posit{fill:white;border-bottom:1px;}#mermaid-svg-wBtudyzNeNw9lzW1 .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-wBtudyzNeNw9lzW1 .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-wBtudyzNeNw9lzW1 .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-wBtudyzNeNw9lzW1 .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-wBtudyzNeNw9lzW1 .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-wBtudyzNeNw9lzW1 .edgeLabel .label text{fill:#333;}#mermaid-svg-wBtudyzNeNw9lzW1 .label div .edgeLabel{color:#333;}#mermaid-svg-wBtudyzNeNw9lzW1 .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-wBtudyzNeNw9lzW1 .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-wBtudyzNeNw9lzW1 .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-wBtudyzNeNw9lzW1 .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-wBtudyzNeNw9lzW1 .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-wBtudyzNeNw9lzW1 .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-wBtudyzNeNw9lzW1 .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-wBtudyzNeNw9lzW1 #statediagram-barbEnd{fill:#333333;}#mermaid-svg-wBtudyzNeNw9lzW1 .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-wBtudyzNeNw9lzW1 .cluster-label,#mermaid-svg-wBtudyzNeNw9lzW1 .nodeLabel{color:#131300;}#mermaid-svg-wBtudyzNeNw9lzW1 .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-wBtudyzNeNw9lzW1 .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-wBtudyzNeNw9lzW1 .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-wBtudyzNeNw9lzW1 .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-wBtudyzNeNw9lzW1 .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-wBtudyzNeNw9lzW1 .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-wBtudyzNeNw9lzW1 .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-wBtudyzNeNw9lzW1 .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-wBtudyzNeNw9lzW1 .note-edge{stroke-dasharray:5;}#mermaid-svg-wBtudyzNeNw9lzW1 .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-wBtudyzNeNw9lzW1 .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-wBtudyzNeNw9lzW1 .statediagram-note text{fill:black;}#mermaid-svg-wBtudyzNeNw9lzW1 .statediagram-note .nodeLabel{color:black;}#mermaid-svg-wBtudyzNeNw9lzW1 .statediagram .edgeLabel{color:red;}#mermaid-svg-wBtudyzNeNw9lzW1 #dependencyStart,#mermaid-svg-wBtudyzNeNw9lzW1 #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-wBtudyzNeNw9lzW1 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} First F Second S Third T stateDiagram-v2 [*]-->First state First { [*]-->F F-->[*] } First-->Second state Second { [*]-->S S-->[*] } First-->Third state Third { [*]-->T T-->[*] } Second-->[*] Third-->[*] 6.5.选择分支 实际生活当中我们经常运用状态图中的选择分支来描述问题，例如下： #mermaid-svg-uGt92qzNIzjN00LP {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-uGt92qzNIzjN00LP .error-icon{fill:#552222;}#mermaid-svg-uGt92qzNIzjN00LP .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-uGt92qzNIzjN00LP .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-uGt92qzNIzjN00LP .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-uGt92qzNIzjN00LP .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-uGt92qzNIzjN00LP .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-uGt92qzNIzjN00LP .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-uGt92qzNIzjN00LP .marker{fill:#333333;stroke:#333333;}#mermaid-svg-uGt92qzNIzjN00LP .marker.cross{stroke:#333333;}#mermaid-svg-uGt92qzNIzjN00LP svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-uGt92qzNIzjN00LP defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-uGt92qzNIzjN00LP g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-uGt92qzNIzjN00LP g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-uGt92qzNIzjN00LP g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-uGt92qzNIzjN00LP g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-uGt92qzNIzjN00LP g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-uGt92qzNIzjN00LP .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-uGt92qzNIzjN00LP .stateGroup posit{fill:white;border-bottom:1px;}#mermaid-svg-uGt92qzNIzjN00LP .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-uGt92qzNIzjN00LP .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-uGt92qzNIzjN00LP .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-uGt92qzNIzjN00LP .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-uGt92qzNIzjN00LP .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-uGt92qzNIzjN00LP .edgeLabel .label text{fill:#333;}#mermaid-svg-uGt92qzNIzjN00LP .label div .edgeLabel{color:#333;}#mermaid-svg-uGt92qzNIzjN00LP .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-uGt92qzNIzjN00LP .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-uGt92qzNIzjN00LP .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-uGt92qzNIzjN00LP .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-uGt92qzNIzjN00LP .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-uGt92qzNIzjN00LP .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-uGt92qzNIzjN00LP .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-uGt92qzNIzjN00LP #statediagram-barbEnd{fill:#333333;}#mermaid-svg-uGt92qzNIzjN00LP .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-uGt92qzNIzjN00LP .cluster-label,#mermaid-svg-uGt92qzNIzjN00LP .nodeLabel{color:#131300;}#mermaid-svg-uGt92qzNIzjN00LP .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-uGt92qzNIzjN00LP .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-uGt92qzNIzjN00LP .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-uGt92qzNIzjN00LP .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-uGt92qzNIzjN00LP .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-uGt92qzNIzjN00LP .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-uGt92qzNIzjN00LP .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-uGt92qzNIzjN00LP .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-uGt92qzNIzjN00LP .note-edge{stroke-dasharray:5;}#mermaid-svg-uGt92qzNIzjN00LP .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-uGt92qzNIzjN00LP .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-uGt92qzNIzjN00LP .statediagram-note text{fill:black;}#mermaid-svg-uGt92qzNIzjN00LP .statediagram-note .nodeLabel{color:black;}#mermaid-svg-uGt92qzNIzjN00LP .statediagram .edgeLabel{color:red;}#mermaid-svg-uGt92qzNIzjN00LP #dependencyStart,#mermaid-svg-uGt92qzNIzjN00LP #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-uGt92qzNIzjN00LP :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} if n<0 if n>=0 IsPositive if_else False True stateDiagram-v2 [*] --> IsPositive IsPositive --> if_else if_else --> False: if n<0 if_else --> True: if n>=0 6.6.叉 可以使用 <<fork>> <<join>> 在图中指定一个叉： #mermaid-svg-hJ8nnNxW9TKrUwTb {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-hJ8nnNxW9TKrUwTb .error-icon{fill:#552222;}#mermaid-svg-hJ8nnNxW9TKrUwTb .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-hJ8nnNxW9TKrUwTb .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-hJ8nnNxW9TKrUwTb .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-hJ8nnNxW9TKrUwTb .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-hJ8nnNxW9TKrUwTb .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-hJ8nnNxW9TKrUwTb .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-hJ8nnNxW9TKrUwTb .marker{fill:#333333;stroke:#333333;}#mermaid-svg-hJ8nnNxW9TKrUwTb .marker.cross{stroke:#333333;}#mermaid-svg-hJ8nnNxW9TKrUwTb svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-hJ8nnNxW9TKrUwTb defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-hJ8nnNxW9TKrUwTb g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-hJ8nnNxW9TKrUwTb g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-hJ8nnNxW9TKrUwTb g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-hJ8nnNxW9TKrUwTb g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-hJ8nnNxW9TKrUwTb g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-hJ8nnNxW9TKrUwTb .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-hJ8nnNxW9TKrUwTb .stateGroup posit{fill:white;border-bottom:1px;}#mermaid-svg-hJ8nnNxW9TKrUwTb .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-hJ8nnNxW9TKrUwTb .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-hJ8nnNxW9TKrUwTb .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-hJ8nnNxW9TKrUwTb .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-hJ8nnNxW9TKrUwTb .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-hJ8nnNxW9TKrUwTb .edgeLabel .label text{fill:#333;}#mermaid-svg-hJ8nnNxW9TKrUwTb .label div .edgeLabel{color:#333;}#mermaid-svg-hJ8nnNxW9TKrUwTb .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-hJ8nnNxW9TKrUwTb .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-hJ8nnNxW9TKrUwTb .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-hJ8nnNxW9TKrUwTb .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-hJ8nnNxW9TKrUwTb .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-hJ8nnNxW9TKrUwTb .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-hJ8nnNxW9TKrUwTb .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-hJ8nnNxW9TKrUwTb #statediagram-barbEnd{fill:#333333;}#mermaid-svg-hJ8nnNxW9TKrUwTb .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-hJ8nnNxW9TKrUwTb .cluster-label,#mermaid-svg-hJ8nnNxW9TKrUwTb .nodeLabel{color:#131300;}#mermaid-svg-hJ8nnNxW9TKrUwTb .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-hJ8nnNxW9TKrUwTb .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-hJ8nnNxW9TKrUwTb .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-hJ8nnNxW9TKrUwTb .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-hJ8nnNxW9TKrUwTb .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-hJ8nnNxW9TKrUwTb .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-hJ8nnNxW9TKrUwTb .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-hJ8nnNxW9TKrUwTb .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-hJ8nnNxW9TKrUwTb .note-edge{stroke-dasharray:5;}#mermaid-svg-hJ8nnNxW9TKrUwTb .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-hJ8nnNxW9TKrUwTb .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-hJ8nnNxW9TKrUwTb .statediagram-note text{fill:black;}#mermaid-svg-hJ8nnNxW9TKrUwTb .statediagram-note .nodeLabel{color:black;}#mermaid-svg-hJ8nnNxW9TKrUwTb .statediagram .edgeLabel{color:red;}#mermaid-svg-hJ8nnNxW9TKrUwTb #dependencyStart,#mermaid-svg-hJ8nnNxW9TKrUwTb #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-hJ8nnNxW9TKrUwTb :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} State2 State3 State4 stateDiagram-v2 state fork_state <<fork>> [*] --> fork_state fork_state --> State2 fork_state --> State3 state join_state <<join>> State2 --> join_state State3 --> join_state join_state --> State4 State4 --> [*] 6.7.添加笔记 #mermaid-svg-53MGrMF4G6d7Y7Tg {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-53MGrMF4G6d7Y7Tg .error-icon{fill:#552222;}#mermaid-svg-53MGrMF4G6d7Y7Tg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-53MGrMF4G6d7Y7Tg .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-53MGrMF4G6d7Y7Tg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-53MGrMF4G6d7Y7Tg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-53MGrMF4G6d7Y7Tg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-53MGrMF4G6d7Y7Tg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-53MGrMF4G6d7Y7Tg .marker{fill:#333333;stroke:#333333;}#mermaid-svg-53MGrMF4G6d7Y7Tg .marker.cross{stroke:#333333;}#mermaid-svg-53MGrMF4G6d7Y7Tg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-53MGrMF4G6d7Y7Tg defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-53MGrMF4G6d7Y7Tg g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-53MGrMF4G6d7Y7Tg g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-53MGrMF4G6d7Y7Tg g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-53MGrMF4G6d7Y7Tg g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-53MGrMF4G6d7Y7Tg g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-53MGrMF4G6d7Y7Tg .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-53MGrMF4G6d7Y7Tg .stateGroup posit{fill:white;border-bottom:1px;}#mermaid-svg-53MGrMF4G6d7Y7Tg .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-53MGrMF4G6d7Y7Tg .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-53MGrMF4G6d7Y7Tg .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-53MGrMF4G6d7Y7Tg .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-53MGrMF4G6d7Y7Tg .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-53MGrMF4G6d7Y7Tg .edgeLabel .label text{fill:#333;}#mermaid-svg-53MGrMF4G6d7Y7Tg .label div .edgeLabel{color:#333;}#mermaid-svg-53MGrMF4G6d7Y7Tg .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-53MGrMF4G6d7Y7Tg .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-53MGrMF4G6d7Y7Tg .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-53MGrMF4G6d7Y7Tg .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-53MGrMF4G6d7Y7Tg .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-53MGrMF4G6d7Y7Tg .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-53MGrMF4G6d7Y7Tg .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-53MGrMF4G6d7Y7Tg #statediagram-barbEnd{fill:#333333;}#mermaid-svg-53MGrMF4G6d7Y7Tg .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-53MGrMF4G6d7Y7Tg .cluster-label,#mermaid-svg-53MGrMF4G6d7Y7Tg .nodeLabel{color:#131300;}#mermaid-svg-53MGrMF4G6d7Y7Tg .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-53MGrMF4G6d7Y7Tg .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-53MGrMF4G6d7Y7Tg .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-53MGrMF4G6d7Y7Tg .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-53MGrMF4G6d7Y7Tg .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-53MGrMF4G6d7Y7Tg .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-53MGrMF4G6d7Y7Tg .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-53MGrMF4G6d7Y7Tg .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-53MGrMF4G6d7Y7Tg .note-edge{stroke-dasharray:5;}#mermaid-svg-53MGrMF4G6d7Y7Tg .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-53MGrMF4G6d7Y7Tg .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-53MGrMF4G6d7Y7Tg .statediagram-note text{fill:black;}#mermaid-svg-53MGrMF4G6d7Y7Tg .statediagram-note .nodeLabel{color:black;}#mermaid-svg-53MGrMF4G6d7Y7Tg .statediagram .edgeLabel{color:red;}#mermaid-svg-53MGrMF4G6d7Y7Tg #dependencyStart,#mermaid-svg-53MGrMF4G6d7Y7Tg #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-53MGrMF4G6d7Y7Tg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} The state with a note Important information! You can write notes. State2 This is the note to the left. stateDiagram-v2 State1: The state with a note %%第一种方法 note right of State1 Important information! You can write notes. end note %%第一种方法 State1 --> State2 %%第二种方法 note left of State2 : This is the note to the left. %%第二种方法 6.8.并发 #mermaid-svg-znwSz9LgedeKWZhX {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-znwSz9LgedeKWZhX .error-icon{fill:#552222;}#mermaid-svg-znwSz9LgedeKWZhX .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-znwSz9LgedeKWZhX .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-znwSz9LgedeKWZhX .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-znwSz9LgedeKWZhX .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-znwSz9LgedeKWZhX .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-znwSz9LgedeKWZhX .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-znwSz9LgedeKWZhX .marker{fill:#333333;stroke:#333333;}#mermaid-svg-znwSz9LgedeKWZhX .marker.cross{stroke:#333333;}#mermaid-svg-znwSz9LgedeKWZhX svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-znwSz9LgedeKWZhX defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-znwSz9LgedeKWZhX g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-znwSz9LgedeKWZhX g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-znwSz9LgedeKWZhX g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-znwSz9LgedeKWZhX g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-znwSz9LgedeKWZhX g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-znwSz9LgedeKWZhX .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-znwSz9LgedeKWZhX .stateGroup posit{fill:white;border-bottom:1px;}#mermaid-svg-znwSz9LgedeKWZhX .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-znwSz9LgedeKWZhX .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-znwSz9LgedeKWZhX .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-znwSz9LgedeKWZhX .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-znwSz9LgedeKWZhX .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-znwSz9LgedeKWZhX .edgeLabel .label text{fill:#333;}#mermaid-svg-znwSz9LgedeKWZhX .label div .edgeLabel{color:#333;}#mermaid-svg-znwSz9LgedeKWZhX .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-znwSz9LgedeKWZhX .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-znwSz9LgedeKWZhX .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-znwSz9LgedeKWZhX .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-znwSz9LgedeKWZhX .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-znwSz9LgedeKWZhX .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-znwSz9LgedeKWZhX .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-znwSz9LgedeKWZhX #statediagram-barbEnd{fill:#333333;}#mermaid-svg-znwSz9LgedeKWZhX .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-znwSz9LgedeKWZhX .cluster-label,#mermaid-svg-znwSz9LgedeKWZhX .nodeLabel{color:#131300;}#mermaid-svg-znwSz9LgedeKWZhX .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-znwSz9LgedeKWZhX .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-znwSz9LgedeKWZhX .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-znwSz9LgedeKWZhX .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-znwSz9LgedeKWZhX .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-znwSz9LgedeKWZhX .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-znwSz9LgedeKWZhX .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-znwSz9LgedeKWZhX .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-znwSz9LgedeKWZhX .note-edge{stroke-dasharray:5;}#mermaid-svg-znwSz9LgedeKWZhX .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-znwSz9LgedeKWZhX .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-znwSz9LgedeKWZhX .statediagram-note text{fill:black;}#mermaid-svg-znwSz9LgedeKWZhX .statediagram-note .nodeLabel{color:black;}#mermaid-svg-znwSz9LgedeKWZhX .statediagram .edgeLabel{color:red;}#mermaid-svg-znwSz9LgedeKWZhX #dependencyStart,#mermaid-svg-znwSz9LgedeKWZhX #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-znwSz9LgedeKWZhX :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Active 123 123 A B 456 456 C D 789 789 E F stateDiagram-v2 [*] --> Active state Active { [*] --> A A --> B : 123 B --> A : 123 -- [*] --> C C --> D : 456 D --> C : 456 -- [*] --> E E --> F : 789 F --> E : 789 } 6.9.注释 和以前介绍的一样，我们在Mermaid里面用%%来进行语句的注释。 7.实体关系图 ER 建模的从业者几乎总是将实体类型简称为实体。例如，CUSTOMER实体类型将简称为CUSTOMER实体。但从技术上讲，实体是实体类型的抽象实例，这就是 ER 图所显示的 - 抽象实例，以及它们之间的关系。例如下： #mermaid-svg-7OCVyJoYqCoCLRZZ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-7OCVyJoYqCoCLRZZ .error-icon{fill:#552222;}#mermaid-svg-7OCVyJoYqCoCLRZZ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-7OCVyJoYqCoCLRZZ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-7OCVyJoYqCoCLRZZ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-7OCVyJoYqCoCLRZZ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-7OCVyJoYqCoCLRZZ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-7OCVyJoYqCoCLRZZ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-7OCVyJoYqCoCLRZZ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-7OCVyJoYqCoCLRZZ .marker.cross{stroke:#333333;}#mermaid-svg-7OCVyJoYqCoCLRZZ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-7OCVyJoYqCoCLRZZ .entityBox{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-7OCVyJoYqCoCLRZZ .attributeBoxOdd{fill:#ffffff;stroke:#9370DB;}#mermaid-svg-7OCVyJoYqCoCLRZZ .attributeBoxEven{fill:#f2f2f2;stroke:#9370DB;}#mermaid-svg-7OCVyJoYqCoCLRZZ .relationshipLabelBox{fill:hsl(80, 100%, 96.2745098039%);opacity:0.7;background-color:hsl(80, 100%, 96.2745098039%);}#mermaid-svg-7OCVyJoYqCoCLRZZ .relationshipLabelBox rect{opacity:0.5;}#mermaid-svg-7OCVyJoYqCoCLRZZ .relationshipLine{stroke:#333333;}#mermaid-svg-7OCVyJoYqCoCLRZZ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} customer order line-item delivery-adderss places contains uses erDiagram customer ||--o{ order : places order ||--|{ line-item : contains customer }|..|{ delivery-adderss : uses 箭头样式： 左箭头右箭头意义`o``o``}oo{零个或者多个（无上限）`}`` 8.生活备忘录 生活备忘录在Mermaid中算是最简单的图了，没有过多的语法，就下面这一个实例就能实现这样一个有趣的图像： #mermaid-svg-E9d5FHjhz2abFHrQ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-E9d5FHjhz2abFHrQ .error-icon{fill:#552222;}#mermaid-svg-E9d5FHjhz2abFHrQ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-E9d5FHjhz2abFHrQ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-E9d5FHjhz2abFHrQ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-E9d5FHjhz2abFHrQ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-E9d5FHjhz2abFHrQ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-E9d5FHjhz2abFHrQ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-E9d5FHjhz2abFHrQ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-E9d5FHjhz2abFHrQ .marker.cross{stroke:#333333;}#mermaid-svg-E9d5FHjhz2abFHrQ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-E9d5FHjhz2abFHrQ .label{font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);color:#333;}#mermaid-svg-E9d5FHjhz2abFHrQ .mouth{stroke:#666;}#mermaid-svg-E9d5FHjhz2abFHrQ line{stroke:#333;}#mermaid-svg-E9d5FHjhz2abFHrQ .legend{fill:#333;}#mermaid-svg-E9d5FHjhz2abFHrQ .label text{fill:#333;}#mermaid-svg-E9d5FHjhz2abFHrQ .label{color:#333;}#mermaid-svg-E9d5FHjhz2abFHrQ .face{fill:#FFF8DC;stroke:#999;}#mermaid-svg-E9d5FHjhz2abFHrQ .node rect,#mermaid-svg-E9d5FHjhz2abFHrQ .node circle,#mermaid-svg-E9d5FHjhz2abFHrQ .node ellipse,#mermaid-svg-E9d5FHjhz2abFHrQ .node polygon,#mermaid-svg-E9d5FHjhz2abFHrQ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-E9d5FHjhz2abFHrQ .node .label{text-align:center;}#mermaid-svg-E9d5FHjhz2abFHrQ .node.clickable{cursor:pointer;}#mermaid-svg-E9d5FHjhz2abFHrQ .arrowheadPath{fill:#333333;}#mermaid-svg-E9d5FHjhz2abFHrQ .edgePath .path{stroke:#333333;stroke-width:1.5px;}#mermaid-svg-E9d5FHjhz2abFHrQ .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-E9d5FHjhz2abFHrQ .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-E9d5FHjhz2abFHrQ .edgeLabel rect{opacity:0.5;}#mermaid-svg-E9d5FHjhz2abFHrQ .cluster text{fill:#333;}#mermaid-svg-E9d5FHjhz2abFHrQ div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-E9d5FHjhz2abFHrQ .task-type-0,#mermaid-svg-E9d5FHjhz2abFHrQ .section-type-0{fill:#ECECFF;}#mermaid-svg-E9d5FHjhz2abFHrQ .task-type-1,#mermaid-svg-E9d5FHjhz2abFHrQ .section-type-1{fill:#ffffde;}#mermaid-svg-E9d5FHjhz2abFHrQ .task-type-2,#mermaid-svg-E9d5FHjhz2abFHrQ .section-type-2{fill:hsl(304, 100%, 96.2745098039%);}#mermaid-svg-E9d5FHjhz2abFHrQ .task-type-3,#mermaid-svg-E9d5FHjhz2abFHrQ .section-type-3{fill:hsl(124, 100%, 93.5294117647%);}#mermaid-svg-E9d5FHjhz2abFHrQ .task-type-4,#mermaid-svg-E9d5FHjhz2abFHrQ .section-type-4{fill:hsl(176, 100%, 96.2745098039%);}#mermaid-svg-E9d5FHjhz2abFHrQ .task-type-5,#mermaid-svg-E9d5FHjhz2abFHrQ .section-type-5{fill:hsl(-4, 100%, 93.5294117647%);}#mermaid-svg-E9d5FHjhz2abFHrQ .task-type-6,#mermaid-svg-E9d5FHjhz2abFHrQ .section-type-6{fill:hsl(8, 100%, 96.2745098039%);}#mermaid-svg-E9d5FHjhz2abFHrQ .task-type-7,#mermaid-svg-E9d5FHjhz2abFHrQ .section-type-7{fill:hsl(188, 100%, 93.5294117647%);}:root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Cat Me Go to work Go to work Me Make tea Make tea Me Go upstairs Go upstairs Me Cat Do work Do work Go home Go home Me Go downstairs Go downstairs Me Sit down Sit down My working day journey title My working day %% section表示选择要做的事情大体方向，其下是事情的各个细节 section Go to work %% Doing : number : poeple (number代表心情，5为满分，0为最低分)(poeple代表人物) Make tea:5:Me Go upstairs:3:Me Do work:1:Me,Cat section Go home Go downstairs:5:Me Sit down:5:Me 9.甘特图 甘特图是一种条形图，由 Karol Adamiecki 于 1896 年首次开发，1910 年代由 Henry Gantt 独立开发，用于说明项目进度和完成任何项目所需的时间。 甘特图说明项目的终端元素和摘要元素的开始日期和完成日期之间的天数。 9.1.简述 甘特图将每个计划任务记录为一个从左向右延伸的连续条。 x 轴代表时间，y 轴记录不同的任务及其完成的顺序。**重要的是要记住，当特定于任务的日期、天数或时间集合被“排除”时，甘特图将通过向右扩展相同的天数来适应这些更改，而不是通过在内部创建间隙任务。 **然而，如果排除的日期在两个设置为连续开始的任务之间，则排除的日期将被图形跳过并留空，并且在排除的日期结束后将开始下一个任务。甘特图可用于跟踪项目完成前所需的时间，但它也可用于以图形方式表示“非工作日”，只需稍作调整。 #mermaid-svg-OVP5LHFVMdjwOc2z {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-OVP5LHFVMdjwOc2z .error-icon{fill:#552222;}#mermaid-svg-OVP5LHFVMdjwOc2z .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-OVP5LHFVMdjwOc2z .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-OVP5LHFVMdjwOc2z .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-OVP5LHFVMdjwOc2z .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-OVP5LHFVMdjwOc2z .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-OVP5LHFVMdjwOc2z .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-OVP5LHFVMdjwOc2z .marker{fill:#333333;stroke:#333333;}#mermaid-svg-OVP5LHFVMdjwOc2z .marker.cross{stroke:#333333;}#mermaid-svg-OVP5LHFVMdjwOc2z svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-OVP5LHFVMdjwOc2z .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-OVP5LHFVMdjwOc2z .exclude-range{fill:#eeeeee;}#mermaid-svg-OVP5LHFVMdjwOc2z .section{stroke:none;opacity:0.2;}#mermaid-svg-OVP5LHFVMdjwOc2z .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-OVP5LHFVMdjwOc2z .section2{fill:#fff400;}#mermaid-svg-OVP5LHFVMdjwOc2z .section1,#mermaid-svg-OVP5LHFVMdjwOc2z .section3{fill:white;opacity:0.2;}#mermaid-svg-OVP5LHFVMdjwOc2z .sectionTitle0{fill:#333;}#mermaid-svg-OVP5LHFVMdjwOc2z .sectionTitle1{fill:#333;}#mermaid-svg-OVP5LHFVMdjwOc2z .sectionTitle2{fill:#333;}#mermaid-svg-OVP5LHFVMdjwOc2z .sectionTitle3{fill:#333;}#mermaid-svg-OVP5LHFVMdjwOc2z .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-OVP5LHFVMdjwOc2z .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-OVP5LHFVMdjwOc2z .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-OVP5LHFVMdjwOc2z .grid path{stroke-width:0;}#mermaid-svg-OVP5LHFVMdjwOc2z .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-OVP5LHFVMdjwOc2z .task{stroke-width:2;}#mermaid-svg-OVP5LHFVMdjwOc2z .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-OVP5LHFVMdjwOc2z .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-OVP5LHFVMdjwOc2z .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-OVP5LHFVMdjwOc2z .task.clickable{cursor:pointer;}#mermaid-svg-OVP5LHFVMdjwOc2z .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-OVP5LHFVMdjwOc2z .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-OVP5LHFVMdjwOc2z .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-OVP5LHFVMdjwOc2z .taskText0,#mermaid-svg-OVP5LHFVMdjwOc2z .taskText1,#mermaid-svg-OVP5LHFVMdjwOc2z .taskText2,#mermaid-svg-OVP5LHFVMdjwOc2z .taskText3{fill:white;}#mermaid-svg-OVP5LHFVMdjwOc2z .task0,#mermaid-svg-OVP5LHFVMdjwOc2z .task1,#mermaid-svg-OVP5LHFVMdjwOc2z .task2,#mermaid-svg-OVP5LHFVMdjwOc2z .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-OVP5LHFVMdjwOc2z .taskTextOutside0,#mermaid-svg-OVP5LHFVMdjwOc2z .taskTextOutside2{fill:black;}#mermaid-svg-OVP5LHFVMdjwOc2z .taskTextOutside1,#mermaid-svg-OVP5LHFVMdjwOc2z .taskTextOutside3{fill:black;}#mermaid-svg-OVP5LHFVMdjwOc2z .active0,#mermaid-svg-OVP5LHFVMdjwOc2z .active1,#mermaid-svg-OVP5LHFVMdjwOc2z .active2,#mermaid-svg-OVP5LHFVMdjwOc2z .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-OVP5LHFVMdjwOc2z .activeText0,#mermaid-svg-OVP5LHFVMdjwOc2z .activeText1,#mermaid-svg-OVP5LHFVMdjwOc2z .activeText2,#mermaid-svg-OVP5LHFVMdjwOc2z .activeText3{fill:black!important;}#mermaid-svg-OVP5LHFVMdjwOc2z .done0,#mermaid-svg-OVP5LHFVMdjwOc2z .done1,#mermaid-svg-OVP5LHFVMdjwOc2z .done2,#mermaid-svg-OVP5LHFVMdjwOc2z .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-OVP5LHFVMdjwOc2z .doneText0,#mermaid-svg-OVP5LHFVMdjwOc2z .doneText1,#mermaid-svg-OVP5LHFVMdjwOc2z .doneText2,#mermaid-svg-OVP5LHFVMdjwOc2z .doneText3{fill:black!important;}#mermaid-svg-OVP5LHFVMdjwOc2z .crit0,#mermaid-svg-OVP5LHFVMdjwOc2z .crit1,#mermaid-svg-OVP5LHFVMdjwOc2z .crit2,#mermaid-svg-OVP5LHFVMdjwOc2z .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-OVP5LHFVMdjwOc2z .activeCrit0,#mermaid-svg-OVP5LHFVMdjwOc2z .activeCrit1,#mermaid-svg-OVP5LHFVMdjwOc2z .activeCrit2,#mermaid-svg-OVP5LHFVMdjwOc2z .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-OVP5LHFVMdjwOc2z .doneCrit0,#mermaid-svg-OVP5LHFVMdjwOc2z .doneCrit1,#mermaid-svg-OVP5LHFVMdjwOc2z .doneCrit2,#mermaid-svg-OVP5LHFVMdjwOc2z .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-OVP5LHFVMdjwOc2z .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-OVP5LHFVMdjwOc2z .milestoneText{font-style:italic;}#mermaid-svg-OVP5LHFVMdjwOc2z .doneCritText0,#mermaid-svg-OVP5LHFVMdjwOc2z .doneCritText1,#mermaid-svg-OVP5LHFVMdjwOc2z .doneCritText2,#mermaid-svg-OVP5LHFVMdjwOc2z .doneCritText3{fill:black!important;}#mermaid-svg-OVP5LHFVMdjwOc2z .activeCritText0,#mermaid-svg-OVP5LHFVMdjwOc2z .activeCritText1,#mermaid-svg-OVP5LHFVMdjwOc2z .activeCritText2,#mermaid-svg-OVP5LHFVMdjwOc2z .activeCritText3{fill:black!important;}#mermaid-svg-OVP5LHFVMdjwOc2z .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-OVP5LHFVMdjwOc2z :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 2021-01-01 2021-02-01 2021-03-01 2021-04-01 2021-05-01 2021-06-01 A task Another task B task Another task A B A Gantt Diagram gantt title A Gantt Diagram dateFormat YYYY-MM-DD section A A task : a1,2021-01-01,30d Another task : after a1,20d section B B task : 2021-03-21,40d Another task : 40d 9.2.句法 #mermaid-svg-eh7HchkZb5oP8aNQ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-eh7HchkZb5oP8aNQ .error-icon{fill:#552222;}#mermaid-svg-eh7HchkZb5oP8aNQ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-eh7HchkZb5oP8aNQ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-eh7HchkZb5oP8aNQ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-eh7HchkZb5oP8aNQ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-eh7HchkZb5oP8aNQ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-eh7HchkZb5oP8aNQ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-eh7HchkZb5oP8aNQ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-eh7HchkZb5oP8aNQ .marker.cross{stroke:#333333;}#mermaid-svg-eh7HchkZb5oP8aNQ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-eh7HchkZb5oP8aNQ .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-eh7HchkZb5oP8aNQ .exclude-range{fill:#eeeeee;}#mermaid-svg-eh7HchkZb5oP8aNQ .section{stroke:none;opacity:0.2;}#mermaid-svg-eh7HchkZb5oP8aNQ .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-eh7HchkZb5oP8aNQ .section2{fill:#fff400;}#mermaid-svg-eh7HchkZb5oP8aNQ .section1,#mermaid-svg-eh7HchkZb5oP8aNQ .section3{fill:white;opacity:0.2;}#mermaid-svg-eh7HchkZb5oP8aNQ .sectionTitle0{fill:#333;}#mermaid-svg-eh7HchkZb5oP8aNQ .sectionTitle1{fill:#333;}#mermaid-svg-eh7HchkZb5oP8aNQ .sectionTitle2{fill:#333;}#mermaid-svg-eh7HchkZb5oP8aNQ .sectionTitle3{fill:#333;}#mermaid-svg-eh7HchkZb5oP8aNQ .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-eh7HchkZb5oP8aNQ .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-eh7HchkZb5oP8aNQ .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-eh7HchkZb5oP8aNQ .grid path{stroke-width:0;}#mermaid-svg-eh7HchkZb5oP8aNQ .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-eh7HchkZb5oP8aNQ .task{stroke-width:2;}#mermaid-svg-eh7HchkZb5oP8aNQ .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-eh7HchkZb5oP8aNQ .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-eh7HchkZb5oP8aNQ .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-eh7HchkZb5oP8aNQ .task.clickable{cursor:pointer;}#mermaid-svg-eh7HchkZb5oP8aNQ .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-eh7HchkZb5oP8aNQ .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-eh7HchkZb5oP8aNQ .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-eh7HchkZb5oP8aNQ .taskText0,#mermaid-svg-eh7HchkZb5oP8aNQ .taskText1,#mermaid-svg-eh7HchkZb5oP8aNQ .taskText2,#mermaid-svg-eh7HchkZb5oP8aNQ .taskText3{fill:white;}#mermaid-svg-eh7HchkZb5oP8aNQ .task0,#mermaid-svg-eh7HchkZb5oP8aNQ .task1,#mermaid-svg-eh7HchkZb5oP8aNQ .task2,#mermaid-svg-eh7HchkZb5oP8aNQ .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-eh7HchkZb5oP8aNQ .taskTextOutside0,#mermaid-svg-eh7HchkZb5oP8aNQ .taskTextOutside2{fill:black;}#mermaid-svg-eh7HchkZb5oP8aNQ .taskTextOutside1,#mermaid-svg-eh7HchkZb5oP8aNQ .taskTextOutside3{fill:black;}#mermaid-svg-eh7HchkZb5oP8aNQ .active0,#mermaid-svg-eh7HchkZb5oP8aNQ .active1,#mermaid-svg-eh7HchkZb5oP8aNQ .active2,#mermaid-svg-eh7HchkZb5oP8aNQ .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-eh7HchkZb5oP8aNQ .activeText0,#mermaid-svg-eh7HchkZb5oP8aNQ .activeText1,#mermaid-svg-eh7HchkZb5oP8aNQ .activeText2,#mermaid-svg-eh7HchkZb5oP8aNQ .activeText3{fill:black!important;}#mermaid-svg-eh7HchkZb5oP8aNQ .done0,#mermaid-svg-eh7HchkZb5oP8aNQ .done1,#mermaid-svg-eh7HchkZb5oP8aNQ .done2,#mermaid-svg-eh7HchkZb5oP8aNQ .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-eh7HchkZb5oP8aNQ .doneText0,#mermaid-svg-eh7HchkZb5oP8aNQ .doneText1,#mermaid-svg-eh7HchkZb5oP8aNQ .doneText2,#mermaid-svg-eh7HchkZb5oP8aNQ .doneText3{fill:black!important;}#mermaid-svg-eh7HchkZb5oP8aNQ .crit0,#mermaid-svg-eh7HchkZb5oP8aNQ .crit1,#mermaid-svg-eh7HchkZb5oP8aNQ .crit2,#mermaid-svg-eh7HchkZb5oP8aNQ .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-eh7HchkZb5oP8aNQ .activeCrit0,#mermaid-svg-eh7HchkZb5oP8aNQ .activeCrit1,#mermaid-svg-eh7HchkZb5oP8aNQ .activeCrit2,#mermaid-svg-eh7HchkZb5oP8aNQ .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-eh7HchkZb5oP8aNQ .doneCrit0,#mermaid-svg-eh7HchkZb5oP8aNQ .doneCrit1,#mermaid-svg-eh7HchkZb5oP8aNQ .doneCrit2,#mermaid-svg-eh7HchkZb5oP8aNQ .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-eh7HchkZb5oP8aNQ .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-eh7HchkZb5oP8aNQ .milestoneText{font-style:italic;}#mermaid-svg-eh7HchkZb5oP8aNQ .doneCritText0,#mermaid-svg-eh7HchkZb5oP8aNQ .doneCritText1,#mermaid-svg-eh7HchkZb5oP8aNQ .doneCritText2,#mermaid-svg-eh7HchkZb5oP8aNQ .doneCritText3{fill:black!important;}#mermaid-svg-eh7HchkZb5oP8aNQ .activeCritText0,#mermaid-svg-eh7HchkZb5oP8aNQ .activeCritText1,#mermaid-svg-eh7HchkZb5oP8aNQ .activeCritText2,#mermaid-svg-eh7HchkZb5oP8aNQ .activeCritText3{fill:black!important;}#mermaid-svg-eh7HchkZb5oP8aNQ .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-eh7HchkZb5oP8aNQ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 2014-01-07 2014-01-09 2014-01-11 2014-01-13 2014-01-15 2014-01-17 2014-01-19 2014-01-21 2014-01-23 2014-01-25 2014-01-27 Completed task Completed task in the critical line Implement parser and jison Describe gantt syntax Active task Create tests for parser Add gantt diagram to demo page Add another diagram to demo page Future task Future task in critical line Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page Future task2 Create tests for renderer Add to mermaid Functionality added A section Critical tasks Documentation Last section Adding GANTT diagram functionality to mermaid gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid excludes weekends %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".) section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d Functionality added :milestone, 2014-01-25, 0d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page :20h Add another diagram to demo page :48h 我们也可以在已经有计划的项目过程中加入其他的项目： #mermaid-svg-BvlyZFWmdUwvlglG {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-BvlyZFWmdUwvlglG .error-icon{fill:#552222;}#mermaid-svg-BvlyZFWmdUwvlglG .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-BvlyZFWmdUwvlglG .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-BvlyZFWmdUwvlglG .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-BvlyZFWmdUwvlglG .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-BvlyZFWmdUwvlglG .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-BvlyZFWmdUwvlglG .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-BvlyZFWmdUwvlglG .marker{fill:#333333;stroke:#333333;}#mermaid-svg-BvlyZFWmdUwvlglG .marker.cross{stroke:#333333;}#mermaid-svg-BvlyZFWmdUwvlglG svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-BvlyZFWmdUwvlglG .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-BvlyZFWmdUwvlglG .exclude-range{fill:#eeeeee;}#mermaid-svg-BvlyZFWmdUwvlglG .section{stroke:none;opacity:0.2;}#mermaid-svg-BvlyZFWmdUwvlglG .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-BvlyZFWmdUwvlglG .section2{fill:#fff400;}#mermaid-svg-BvlyZFWmdUwvlglG .section1,#mermaid-svg-BvlyZFWmdUwvlglG .section3{fill:white;opacity:0.2;}#mermaid-svg-BvlyZFWmdUwvlglG .sectionTitle0{fill:#333;}#mermaid-svg-BvlyZFWmdUwvlglG .sectionTitle1{fill:#333;}#mermaid-svg-BvlyZFWmdUwvlglG .sectionTitle2{fill:#333;}#mermaid-svg-BvlyZFWmdUwvlglG .sectionTitle3{fill:#333;}#mermaid-svg-BvlyZFWmdUwvlglG .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-BvlyZFWmdUwvlglG .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-BvlyZFWmdUwvlglG .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-BvlyZFWmdUwvlglG .grid path{stroke-width:0;}#mermaid-svg-BvlyZFWmdUwvlglG .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-BvlyZFWmdUwvlglG .task{stroke-width:2;}#mermaid-svg-BvlyZFWmdUwvlglG .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-BvlyZFWmdUwvlglG .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-BvlyZFWmdUwvlglG .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-BvlyZFWmdUwvlglG .task.clickable{cursor:pointer;}#mermaid-svg-BvlyZFWmdUwvlglG .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-BvlyZFWmdUwvlglG .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-BvlyZFWmdUwvlglG .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-BvlyZFWmdUwvlglG .taskText0,#mermaid-svg-BvlyZFWmdUwvlglG .taskText1,#mermaid-svg-BvlyZFWmdUwvlglG .taskText2,#mermaid-svg-BvlyZFWmdUwvlglG .taskText3{fill:white;}#mermaid-svg-BvlyZFWmdUwvlglG .task0,#mermaid-svg-BvlyZFWmdUwvlglG .task1,#mermaid-svg-BvlyZFWmdUwvlglG .task2,#mermaid-svg-BvlyZFWmdUwvlglG .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-BvlyZFWmdUwvlglG .taskTextOutside0,#mermaid-svg-BvlyZFWmdUwvlglG .taskTextOutside2{fill:black;}#mermaid-svg-BvlyZFWmdUwvlglG .taskTextOutside1,#mermaid-svg-BvlyZFWmdUwvlglG .taskTextOutside3{fill:black;}#mermaid-svg-BvlyZFWmdUwvlglG .active0,#mermaid-svg-BvlyZFWmdUwvlglG .active1,#mermaid-svg-BvlyZFWmdUwvlglG .active2,#mermaid-svg-BvlyZFWmdUwvlglG .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-BvlyZFWmdUwvlglG .activeText0,#mermaid-svg-BvlyZFWmdUwvlglG .activeText1,#mermaid-svg-BvlyZFWmdUwvlglG .activeText2,#mermaid-svg-BvlyZFWmdUwvlglG .activeText3{fill:black!important;}#mermaid-svg-BvlyZFWmdUwvlglG .done0,#mermaid-svg-BvlyZFWmdUwvlglG .done1,#mermaid-svg-BvlyZFWmdUwvlglG .done2,#mermaid-svg-BvlyZFWmdUwvlglG .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-BvlyZFWmdUwvlglG .doneText0,#mermaid-svg-BvlyZFWmdUwvlglG .doneText1,#mermaid-svg-BvlyZFWmdUwvlglG .doneText2,#mermaid-svg-BvlyZFWmdUwvlglG .doneText3{fill:black!important;}#mermaid-svg-BvlyZFWmdUwvlglG .crit0,#mermaid-svg-BvlyZFWmdUwvlglG .crit1,#mermaid-svg-BvlyZFWmdUwvlglG .crit2,#mermaid-svg-BvlyZFWmdUwvlglG .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-BvlyZFWmdUwvlglG .activeCrit0,#mermaid-svg-BvlyZFWmdUwvlglG .activeCrit1,#mermaid-svg-BvlyZFWmdUwvlglG .activeCrit2,#mermaid-svg-BvlyZFWmdUwvlglG .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-BvlyZFWmdUwvlglG .doneCrit0,#mermaid-svg-BvlyZFWmdUwvlglG .doneCrit1,#mermaid-svg-BvlyZFWmdUwvlglG .doneCrit2,#mermaid-svg-BvlyZFWmdUwvlglG .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-BvlyZFWmdUwvlglG .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-BvlyZFWmdUwvlglG .milestoneText{font-style:italic;}#mermaid-svg-BvlyZFWmdUwvlglG .doneCritText0,#mermaid-svg-BvlyZFWmdUwvlglG .doneCritText1,#mermaid-svg-BvlyZFWmdUwvlglG .doneCritText2,#mermaid-svg-BvlyZFWmdUwvlglG .doneCritText3{fill:black!important;}#mermaid-svg-BvlyZFWmdUwvlglG .activeCritText0,#mermaid-svg-BvlyZFWmdUwvlglG .activeCritText1,#mermaid-svg-BvlyZFWmdUwvlglG .activeCritText2,#mermaid-svg-BvlyZFWmdUwvlglG .activeCritText3{fill:black!important;}#mermaid-svg-BvlyZFWmdUwvlglG .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-BvlyZFWmdUwvlglG :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 2021-01-01 2021-01-03 2021-01-05 2021-01-07 2021-01-09 2021-01-11 2021-01-13 2021-01-15 2021-01-17 2021-01-19 2021-01-21 2021-01-23 2021-01-25 2021-01-27 2021-01-29 2021-01-31 2021-02-01 2021-02-03 2021-02-05 2021-02-07 apple banana dog cherry gantt apple : a,2021-01-01,30d banana : crit,b,2021-01-04,4d cherry : active,c,after a,7d dog : d,after b,3d 标题：关键字——title您可以将图表分成不同的部分，例如将项目的不同部分（如开发和文档）分开。为此，请以section关键字开始一行并为其命名。（请注意，与整个图表的标题)不同，此名称是必需的。关键节点：我们还可以在图表里添加关键节点，类似于里程碑，他们表示单一的时刻，用关键字milestone来表示： milestone_name milestone : milestone, m, BeginTime, KeepingTime 如上例，关键节点的确切时间就是：

T I M E = B e g i n T i m e + K e e p i n g T i m e 2 TIME=\frac{BeginTime+KeepingTime}{2} TIME=2BeginTime+KeepingTime​

实例如下： #mermaid-svg-WMzM1U6huBxeq7AB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-WMzM1U6huBxeq7AB .error-icon{fill:#552222;}#mermaid-svg-WMzM1U6huBxeq7AB .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-WMzM1U6huBxeq7AB .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-WMzM1U6huBxeq7AB .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-WMzM1U6huBxeq7AB .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-WMzM1U6huBxeq7AB .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-WMzM1U6huBxeq7AB .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-WMzM1U6huBxeq7AB .marker{fill:#333333;stroke:#333333;}#mermaid-svg-WMzM1U6huBxeq7AB .marker.cross{stroke:#333333;}#mermaid-svg-WMzM1U6huBxeq7AB svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-WMzM1U6huBxeq7AB .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-WMzM1U6huBxeq7AB .exclude-range{fill:#eeeeee;}#mermaid-svg-WMzM1U6huBxeq7AB .section{stroke:none;opacity:0.2;}#mermaid-svg-WMzM1U6huBxeq7AB .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-WMzM1U6huBxeq7AB .section2{fill:#fff400;}#mermaid-svg-WMzM1U6huBxeq7AB .section1,#mermaid-svg-WMzM1U6huBxeq7AB .section3{fill:white;opacity:0.2;}#mermaid-svg-WMzM1U6huBxeq7AB .sectionTitle0{fill:#333;}#mermaid-svg-WMzM1U6huBxeq7AB .sectionTitle1{fill:#333;}#mermaid-svg-WMzM1U6huBxeq7AB .sectionTitle2{fill:#333;}#mermaid-svg-WMzM1U6huBxeq7AB .sectionTitle3{fill:#333;}#mermaid-svg-WMzM1U6huBxeq7AB .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-WMzM1U6huBxeq7AB .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-WMzM1U6huBxeq7AB .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-WMzM1U6huBxeq7AB .grid path{stroke-width:0;}#mermaid-svg-WMzM1U6huBxeq7AB .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-WMzM1U6huBxeq7AB .task{stroke-width:2;}#mermaid-svg-WMzM1U6huBxeq7AB .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-WMzM1U6huBxeq7AB .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-WMzM1U6huBxeq7AB .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-WMzM1U6huBxeq7AB .task.clickable{cursor:pointer;}#mermaid-svg-WMzM1U6huBxeq7AB .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-WMzM1U6huBxeq7AB .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-WMzM1U6huBxeq7AB .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-WMzM1U6huBxeq7AB .taskText0,#mermaid-svg-WMzM1U6huBxeq7AB .taskText1,#mermaid-svg-WMzM1U6huBxeq7AB .taskText2,#mermaid-svg-WMzM1U6huBxeq7AB .taskText3{fill:white;}#mermaid-svg-WMzM1U6huBxeq7AB .task0,#mermaid-svg-WMzM1U6huBxeq7AB .task1,#mermaid-svg-WMzM1U6huBxeq7AB .task2,#mermaid-svg-WMzM1U6huBxeq7AB .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-WMzM1U6huBxeq7AB .taskTextOutside0,#mermaid-svg-WMzM1U6huBxeq7AB .taskTextOutside2{fill:black;}#mermaid-svg-WMzM1U6huBxeq7AB .taskTextOutside1,#mermaid-svg-WMzM1U6huBxeq7AB .taskTextOutside3{fill:black;}#mermaid-svg-WMzM1U6huBxeq7AB .active0,#mermaid-svg-WMzM1U6huBxeq7AB .active1,#mermaid-svg-WMzM1U6huBxeq7AB .active2,#mermaid-svg-WMzM1U6huBxeq7AB .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-WMzM1U6huBxeq7AB .activeText0,#mermaid-svg-WMzM1U6huBxeq7AB .activeText1,#mermaid-svg-WMzM1U6huBxeq7AB .activeText2,#mermaid-svg-WMzM1U6huBxeq7AB .activeText3{fill:black!important;}#mermaid-svg-WMzM1U6huBxeq7AB .done0,#mermaid-svg-WMzM1U6huBxeq7AB .done1,#mermaid-svg-WMzM1U6huBxeq7AB .done2,#mermaid-svg-WMzM1U6huBxeq7AB .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-WMzM1U6huBxeq7AB .doneText0,#mermaid-svg-WMzM1U6huBxeq7AB .doneText1,#mermaid-svg-WMzM1U6huBxeq7AB .doneText2,#mermaid-svg-WMzM1U6huBxeq7AB .doneText3{fill:black!important;}#mermaid-svg-WMzM1U6huBxeq7AB .crit0,#mermaid-svg-WMzM1U6huBxeq7AB .crit1,#mermaid-svg-WMzM1U6huBxeq7AB .crit2,#mermaid-svg-WMzM1U6huBxeq7AB .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-WMzM1U6huBxeq7AB .activeCrit0,#mermaid-svg-WMzM1U6huBxeq7AB .activeCrit1,#mermaid-svg-WMzM1U6huBxeq7AB .activeCrit2,#mermaid-svg-WMzM1U6huBxeq7AB .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-WMzM1U6huBxeq7AB .doneCrit0,#mermaid-svg-WMzM1U6huBxeq7AB .doneCrit1,#mermaid-svg-WMzM1U6huBxeq7AB .doneCrit2,#mermaid-svg-WMzM1U6huBxeq7AB .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-WMzM1U6huBxeq7AB .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-WMzM1U6huBxeq7AB .milestoneText{font-style:italic;}#mermaid-svg-WMzM1U6huBxeq7AB .doneCritText0,#mermaid-svg-WMzM1U6huBxeq7AB .doneCritText1,#mermaid-svg-WMzM1U6huBxeq7AB .doneCritText2,#mermaid-svg-WMzM1U6huBxeq7AB .doneCritText3{fill:black!important;}#mermaid-svg-WMzM1U6huBxeq7AB .activeCritText0,#mermaid-svg-WMzM1U6huBxeq7AB .activeCritText1,#mermaid-svg-WMzM1U6huBxeq7AB .activeCritText2,#mermaid-svg-WMzM1U6huBxeq7AB .activeCritText3{fill:black!important;}#mermaid-svg-WMzM1U6huBxeq7AB .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-WMzM1U6huBxeq7AB :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 17:50 17:55 18:00 18:05 18:10 18:15 Initial milestone taska2 taska3 Final milestone gantt dateFormat HH:mm axisFormat %H:%M Initial milestone : milestone, m1, 17:49,2min taska2 : 10min taska3 : 5min Final milestone : milestone, m2, 18:14, 2min 9.3.设置时间 默认格式：dateFormat YYYY-MM-DD其他Mermaid支持的格式如下： 输入样例描述YYYY2021四位数年份YY21两位数年份Q1……4季度M MM1……12月份（数字）MMM MMMMJanuary……Dec月份（英文）D DD1……31日（月中）Do1st……31st日（英文缩写排序）DDD DDDD1……365日（年中）X1410715640.579Unix 时间戳x1410715640579Unix ms 时间戳H HH0……23小时（24时制）h hh1……12小时（12时制，和a、A搭配使用）a Aam pm上、下午m mm0……59分钟s ss0……59秒S0……9分秒SS0……99厘秒SSS0……999毫秒Z ZZ+12:00时差 时间的格式化输出： axisFormat %Y-%m-%d 其他Mermaid所支持的格式化输出： %a - 缩写的工作日名称。 %A - 完整的工作日名称。 %b - 缩写的月份名称。 %B - 完整的月份名称。 %c - 日期和时间，如“%a %b %e %H:%M:%S %Y”。 %d - 十进制数 [01,31] 月份的零填充日期。 %e - 十进制数 [1,31] 的月份中以空格填充的日期；相当于 %_d。 %H - 小时（24 小时制），十进制数 [00,23]。 %I - 小时（12 小时制）作为十进制数 [01,12]。 %j - 以十进制数表示的一年中的第几天 [001,366]。 %m - 十进制数的月份 [01,12]。 %M - 十进制数 [00,59] 的分钟。 %L - 十进制数的毫秒数 [000, 999]。 %p - 上午或下午。 %S - 秒为十进制数 [00,61]。 %U - 一年中的周数（星期日作为一周的第一天）作为十进制数 [00,53]。 %w - 工作日为十进制数 [0(Sunday),6]。 %W - 一年中的周数（星期一作为一周的第一天）作为十进制数 [00,53]。 %x - 日期，如“%m/%d/%Y”。 %X - 时间，如“%H:%M:%S”。 %y - 没有世纪的年份，十进制数 [00,99]。 %Y - 以世纪为十进制数的年份。 %Z - 时区偏移量，例如“-0700”。 %% - 文字“%”字符。 10.饼状图(Pie) 饼图（或圆图）是一种圆形统计图形，它被分成多个切片来说明数字比例。 在饼图中，每个切片的弧长（及其中心角和面积）与其代表的数量成正比。 虽然它因其类似于切片的馅饼而得名，但它的呈现方式有多种变化。如下例： #mermaid-svg-A5tez03kU0fRRAGl {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-A5tez03kU0fRRAGl .error-icon{fill:#552222;}#mermaid-svg-A5tez03kU0fRRAGl .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-A5tez03kU0fRRAGl .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-A5tez03kU0fRRAGl .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-A5tez03kU0fRRAGl .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-A5tez03kU0fRRAGl .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-A5tez03kU0fRRAGl .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-A5tez03kU0fRRAGl .marker{fill:#333333;stroke:#333333;}#mermaid-svg-A5tez03kU0fRRAGl .marker.cross{stroke:#333333;}#mermaid-svg-A5tez03kU0fRRAGl svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-A5tez03kU0fRRAGl .pieCircle{stroke:black;stroke-width:2px;opacity:0.7;}#mermaid-svg-A5tez03kU0fRRAGl .pieTitleText{text-anchor:middle;font-size:25px;fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-A5tez03kU0fRRAGl .slice{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;font-size:17px;}#mermaid-svg-A5tez03kU0fRRAGl .legend text{fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:17px;}#mermaid-svg-A5tez03kU0fRRAGl :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 50% 40% 10% pie_title A B C pie title pie_title "A":50 "B":40 "C":10 10.1.句法 在Mermaid中画一个饼图是非常容易的：

关键字以pie开始，随后设置标题title，然后将每个标签Label用引号" "括起来，随后跟上冒号:，最后写上该标签所占比例即可。

pie titie TitleName "ElementA":numberA "ElementB":numberB ··· 10.2.例子 #mermaid-svg-0EpIREfaZTuS0vDY {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-0EpIREfaZTuS0vDY .error-icon{fill:#552222;}#mermaid-svg-0EpIREfaZTuS0vDY .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-0EpIREfaZTuS0vDY .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-0EpIREfaZTuS0vDY .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-0EpIREfaZTuS0vDY .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-0EpIREfaZTuS0vDY .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-0EpIREfaZTuS0vDY .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-0EpIREfaZTuS0vDY .marker{fill:#333333;stroke:#333333;}#mermaid-svg-0EpIREfaZTuS0vDY .marker.cross{stroke:#333333;}#mermaid-svg-0EpIREfaZTuS0vDY svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-0EpIREfaZTuS0vDY .pieCircle{stroke:black;stroke-width:2px;opacity:0.7;}#mermaid-svg-0EpIREfaZTuS0vDY .pieTitleText{text-anchor:middle;font-size:25px;fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-0EpIREfaZTuS0vDY .slice{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;font-size:17px;}#mermaid-svg-0EpIREfaZTuS0vDY .legend text{fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:17px;}#mermaid-svg-0EpIREfaZTuS0vDY :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 18% 14% 10% 7% 8% 43% Mobile Phone Sumsung Apple Xiaomi Vivo OPPO Others pie title Mobile Phone "Sumsung":18.4 "Apple":13.6 "Xiaomi":9.9 "Vivo":7.4 "OPPO":8.0 "Others":42.6