做海报可以借鉴的网站,网站流量统计怎么做的,本地网站建设需要什么,沈阳网页建站模板✍️作者简介#xff1a;小北编程#xff08;专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向#xff09; #x1f433;博客主页#xff1a; 开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN #x1f514;如果文章对您有一定的帮助请#x1f… ✍️作者简介小北编程专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向 博客主页 开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN 如果文章对您有一定的帮助请关注✨、点赞、收藏、评论。 如需转载请参考【转载须知】 文章目录 一、前言二、基本语法类图的「类」 三、定义一个类四、定义类的成员返回类型泛型返回类型可见性 五、定义关系关系标签双向关系 六、关系上的基数/多重性七、类的注解八、注释九、设置图的方向十、交互十一、使用场景实例十二、总结 一、前言
Markdown 的原生语法不支持绘制图形但通过扩展模块我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、“饼图” 等。
本节将重点介绍如何通过 Mermaid 绘制「类图」。
类图Class diagrams用来描述系统中静态对象的内容和关系。
类图是一种面向对象的建模形式。它是应用系统结构的概念模型通常与开发时的代码有严格的对应关系。类视图也可以用于数据建模。
二、基本语法
类图的「类」
在软件工程中统一建模语言 (UML) 中的类图Class Diagram是一种静态结构图它通过显示系统的类、它们的属性、操作 (或方法) 以及对象之间的关系来描述系统的结构。
类是类图中的核心组成类的成员包括属性和方法以及一些扩展信息。在类图中一个类实例由三层组成
UML提供了表示类成员的机制例如属性和方法以及关于它们的附加信息。
图中类的单个实例包含三个部分compartment
顶部部分包含类名称。它以粗体和居中显示第一个字母大写。它还可以包含描述类性质的可选注释文本。中间部分包含类的属性。左对齐第一个字母小写。底部部分包含类可以执行的操作。左对齐第一个字母小写。
语法示例
mermaid
classDiagramclass 动物动物 : String 标签动物 : 吃()效果如下
#mermaid-svg-Vc4bKlhR2BnH9joT {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Vc4bKlhR2BnH9joT .error-icon{fill:#552222;}#mermaid-svg-Vc4bKlhR2BnH9joT .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Vc4bKlhR2BnH9joT .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-Vc4bKlhR2BnH9joT .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Vc4bKlhR2BnH9joT .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Vc4bKlhR2BnH9joT .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Vc4bKlhR2BnH9joT .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Vc4bKlhR2BnH9joT .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Vc4bKlhR2BnH9joT .marker.cross{stroke:#333333;}#mermaid-svg-Vc4bKlhR2BnH9joT svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Vc4bKlhR2BnH9joT g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-Vc4bKlhR2BnH9joT g.classGroup text .title{font-weight:bolder;}#mermaid-svg-Vc4bKlhR2BnH9joT .nodeLabel,#mermaid-svg-Vc4bKlhR2BnH9joT .edgeLabel{color:#131300;}#mermaid-svg-Vc4bKlhR2BnH9joT .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-Vc4bKlhR2BnH9joT .label text{fill:#131300;}#mermaid-svg-Vc4bKlhR2BnH9joT .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-Vc4bKlhR2BnH9joT .classTitle{font-weight:bolder;}#mermaid-svg-Vc4bKlhR2BnH9joT .node rect,#mermaid-svg-Vc4bKlhR2BnH9joT .node circle,#mermaid-svg-Vc4bKlhR2BnH9joT .node ellipse,#mermaid-svg-Vc4bKlhR2BnH9joT .node polygon,#mermaid-svg-Vc4bKlhR2BnH9joT .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Vc4bKlhR2BnH9joT .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-Vc4bKlhR2BnH9joT g.clickable{cursor:pointer;}#mermaid-svg-Vc4bKlhR2BnH9joT g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-Vc4bKlhR2BnH9joT g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-Vc4bKlhR2BnH9joT .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-Vc4bKlhR2BnH9joT .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-Vc4bKlhR2BnH9joT .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-Vc4bKlhR2BnH9joT .dashed-line{stroke-dasharray:3;}#mermaid-svg-Vc4bKlhR2BnH9joT #compositionStart,#mermaid-svg-Vc4bKlhR2BnH9joT .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-Vc4bKlhR2BnH9joT #compositionEnd,#mermaid-svg-Vc4bKlhR2BnH9joT .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-Vc4bKlhR2BnH9joT #dependencyStart,#mermaid-svg-Vc4bKlhR2BnH9joT .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-Vc4bKlhR2BnH9joT #dependencyStart,#mermaid-svg-Vc4bKlhR2BnH9joT .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-Vc4bKlhR2BnH9joT #extensionStart,#mermaid-svg-Vc4bKlhR2BnH9joT .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-Vc4bKlhR2BnH9joT #extensionEnd,#mermaid-svg-Vc4bKlhR2BnH9joT .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-Vc4bKlhR2BnH9joT #aggregationStart,#mermaid-svg-Vc4bKlhR2BnH9joT .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-Vc4bKlhR2BnH9joT #aggregationEnd,#mermaid-svg-Vc4bKlhR2BnH9joT .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-Vc4bKlhR2BnH9joT .edgeTerminals{font-size:11px;}#mermaid-svg-Vc4bKlhR2BnH9joT :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 动物 String 标签 吃() 三、定义一个类
两种方式定义类
使用像诸如class Animal这样的关键字显式定义类。通过对象之间的关系定义两个类Vehicle |-- Car这条语句定义了两个类分别是车辆和汽车及其从属关系。
语法示例
mermaid
classDiagramclass 动物交通工具 |-- 小汽车效果如下 #mermaid-svg-5d3rq9Cm5DahWeVO {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-5d3rq9Cm5DahWeVO .error-icon{fill:#552222;}#mermaid-svg-5d3rq9Cm5DahWeVO .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-5d3rq9Cm5DahWeVO .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-5d3rq9Cm5DahWeVO .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-5d3rq9Cm5DahWeVO .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-5d3rq9Cm5DahWeVO .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-5d3rq9Cm5DahWeVO .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-5d3rq9Cm5DahWeVO .marker{fill:#333333;stroke:#333333;}#mermaid-svg-5d3rq9Cm5DahWeVO .marker.cross{stroke:#333333;}#mermaid-svg-5d3rq9Cm5DahWeVO svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-5d3rq9Cm5DahWeVO g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-5d3rq9Cm5DahWeVO g.classGroup text .title{font-weight:bolder;}#mermaid-svg-5d3rq9Cm5DahWeVO .nodeLabel,#mermaid-svg-5d3rq9Cm5DahWeVO .edgeLabel{color:#131300;}#mermaid-svg-5d3rq9Cm5DahWeVO .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-5d3rq9Cm5DahWeVO .label text{fill:#131300;}#mermaid-svg-5d3rq9Cm5DahWeVO .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-5d3rq9Cm5DahWeVO .classTitle{font-weight:bolder;}#mermaid-svg-5d3rq9Cm5DahWeVO .node rect,#mermaid-svg-5d3rq9Cm5DahWeVO .node circle,#mermaid-svg-5d3rq9Cm5DahWeVO .node ellipse,#mermaid-svg-5d3rq9Cm5DahWeVO .node polygon,#mermaid-svg-5d3rq9Cm5DahWeVO .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-5d3rq9Cm5DahWeVO .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-5d3rq9Cm5DahWeVO g.clickable{cursor:pointer;}#mermaid-svg-5d3rq9Cm5DahWeVO g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-5d3rq9Cm5DahWeVO g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-5d3rq9Cm5DahWeVO .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-5d3rq9Cm5DahWeVO .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-5d3rq9Cm5DahWeVO .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-5d3rq9Cm5DahWeVO .dashed-line{stroke-dasharray:3;}#mermaid-svg-5d3rq9Cm5DahWeVO #compositionStart,#mermaid-svg-5d3rq9Cm5DahWeVO .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-5d3rq9Cm5DahWeVO #compositionEnd,#mermaid-svg-5d3rq9Cm5DahWeVO .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-5d3rq9Cm5DahWeVO #dependencyStart,#mermaid-svg-5d3rq9Cm5DahWeVO .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-5d3rq9Cm5DahWeVO #dependencyStart,#mermaid-svg-5d3rq9Cm5DahWeVO .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-5d3rq9Cm5DahWeVO #extensionStart,#mermaid-svg-5d3rq9Cm5DahWeVO .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-5d3rq9Cm5DahWeVO #extensionEnd,#mermaid-svg-5d3rq9Cm5DahWeVO .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-5d3rq9Cm5DahWeVO #aggregationStart,#mermaid-svg-5d3rq9Cm5DahWeVO .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-5d3rq9Cm5DahWeVO #aggregationEnd,#mermaid-svg-5d3rq9Cm5DahWeVO .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-5d3rq9Cm5DahWeVO .edgeTerminals{font-size:11px;}#mermaid-svg-5d3rq9Cm5DahWeVO :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 动物 交通工具 小汽车 命名约定类名应由字母数字 (允许使用unicode) 和下划线字符组成。 四、定义类的成员
UML提供了表示类成员的机制例如属性和方法以及关于它们的附加信息。
Mermaid根据括号 () 是否存在来区分属性和函数/方法。带有 () 的被视为函数/方法其他被视为属性。
定义类的成员有两种方法无论使用哪种语法来定义成员输出都是相同的。两种不同的方式是
使用 : 关联类的成员在后面跟随成员名称用于一次定义一个成员。例如
mermaid
classDiagram
class BankAccount
BankAccount : String owner
BankAccount : BigDecimal balance
BankAccount : deposit(amount)
BankAccount : withdrawal(amount)#mermaid-svg-iw55JAD04gbeFGBZ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-iw55JAD04gbeFGBZ .error-icon{fill:#552222;}#mermaid-svg-iw55JAD04gbeFGBZ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-iw55JAD04gbeFGBZ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-iw55JAD04gbeFGBZ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-iw55JAD04gbeFGBZ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-iw55JAD04gbeFGBZ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-iw55JAD04gbeFGBZ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-iw55JAD04gbeFGBZ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-iw55JAD04gbeFGBZ .marker.cross{stroke:#333333;}#mermaid-svg-iw55JAD04gbeFGBZ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-iw55JAD04gbeFGBZ g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-iw55JAD04gbeFGBZ g.classGroup text .title{font-weight:bolder;}#mermaid-svg-iw55JAD04gbeFGBZ .nodeLabel,#mermaid-svg-iw55JAD04gbeFGBZ .edgeLabel{color:#131300;}#mermaid-svg-iw55JAD04gbeFGBZ .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-iw55JAD04gbeFGBZ .label text{fill:#131300;}#mermaid-svg-iw55JAD04gbeFGBZ .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-iw55JAD04gbeFGBZ .classTitle{font-weight:bolder;}#mermaid-svg-iw55JAD04gbeFGBZ .node rect,#mermaid-svg-iw55JAD04gbeFGBZ .node circle,#mermaid-svg-iw55JAD04gbeFGBZ .node ellipse,#mermaid-svg-iw55JAD04gbeFGBZ .node polygon,#mermaid-svg-iw55JAD04gbeFGBZ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-iw55JAD04gbeFGBZ .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-iw55JAD04gbeFGBZ g.clickable{cursor:pointer;}#mermaid-svg-iw55JAD04gbeFGBZ g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-iw55JAD04gbeFGBZ g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-iw55JAD04gbeFGBZ .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-iw55JAD04gbeFGBZ .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-iw55JAD04gbeFGBZ .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-iw55JAD04gbeFGBZ .dashed-line{stroke-dasharray:3;}#mermaid-svg-iw55JAD04gbeFGBZ #compositionStart,#mermaid-svg-iw55JAD04gbeFGBZ .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-iw55JAD04gbeFGBZ #compositionEnd,#mermaid-svg-iw55JAD04gbeFGBZ .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-iw55JAD04gbeFGBZ #dependencyStart,#mermaid-svg-iw55JAD04gbeFGBZ .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-iw55JAD04gbeFGBZ #dependencyStart,#mermaid-svg-iw55JAD04gbeFGBZ .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-iw55JAD04gbeFGBZ #extensionStart,#mermaid-svg-iw55JAD04gbeFGBZ .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-iw55JAD04gbeFGBZ #extensionEnd,#mermaid-svg-iw55JAD04gbeFGBZ .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-iw55JAD04gbeFGBZ #aggregationStart,#mermaid-svg-iw55JAD04gbeFGBZ .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-iw55JAD04gbeFGBZ #aggregationEnd,#mermaid-svg-iw55JAD04gbeFGBZ .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-iw55JAD04gbeFGBZ .edgeTerminals{font-size:11px;}#mermaid-svg-iw55JAD04gbeFGBZ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} BankAccount String owner BigDecimal balance deposit(amount) withdrawal(amount) 使用{}关联类的成员成员被分组在花括号中。适用于一次定义多个成员。例如
mermaid
classDiagram
class BankAccount{String ownerBigDecimal balancedeposit(amount)withdrawl(amount)
}#mermaid-svg-8CHZbI2cPwyFg4KA {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8CHZbI2cPwyFg4KA .error-icon{fill:#552222;}#mermaid-svg-8CHZbI2cPwyFg4KA .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-8CHZbI2cPwyFg4KA .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-8CHZbI2cPwyFg4KA .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-8CHZbI2cPwyFg4KA .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-8CHZbI2cPwyFg4KA .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-8CHZbI2cPwyFg4KA .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-8CHZbI2cPwyFg4KA .marker{fill:#333333;stroke:#333333;}#mermaid-svg-8CHZbI2cPwyFg4KA .marker.cross{stroke:#333333;}#mermaid-svg-8CHZbI2cPwyFg4KA svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-8CHZbI2cPwyFg4KA g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-8CHZbI2cPwyFg4KA g.classGroup text .title{font-weight:bolder;}#mermaid-svg-8CHZbI2cPwyFg4KA .nodeLabel,#mermaid-svg-8CHZbI2cPwyFg4KA .edgeLabel{color:#131300;}#mermaid-svg-8CHZbI2cPwyFg4KA .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-8CHZbI2cPwyFg4KA .label text{fill:#131300;}#mermaid-svg-8CHZbI2cPwyFg4KA .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-8CHZbI2cPwyFg4KA .classTitle{font-weight:bolder;}#mermaid-svg-8CHZbI2cPwyFg4KA .node rect,#mermaid-svg-8CHZbI2cPwyFg4KA .node circle,#mermaid-svg-8CHZbI2cPwyFg4KA .node ellipse,#mermaid-svg-8CHZbI2cPwyFg4KA .node polygon,#mermaid-svg-8CHZbI2cPwyFg4KA .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-8CHZbI2cPwyFg4KA .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-8CHZbI2cPwyFg4KA g.clickable{cursor:pointer;}#mermaid-svg-8CHZbI2cPwyFg4KA g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-8CHZbI2cPwyFg4KA g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-8CHZbI2cPwyFg4KA .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-8CHZbI2cPwyFg4KA .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-8CHZbI2cPwyFg4KA .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-8CHZbI2cPwyFg4KA .dashed-line{stroke-dasharray:3;}#mermaid-svg-8CHZbI2cPwyFg4KA #compositionStart,#mermaid-svg-8CHZbI2cPwyFg4KA .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8CHZbI2cPwyFg4KA #compositionEnd,#mermaid-svg-8CHZbI2cPwyFg4KA .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8CHZbI2cPwyFg4KA #dependencyStart,#mermaid-svg-8CHZbI2cPwyFg4KA .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8CHZbI2cPwyFg4KA #dependencyStart,#mermaid-svg-8CHZbI2cPwyFg4KA .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8CHZbI2cPwyFg4KA #extensionStart,#mermaid-svg-8CHZbI2cPwyFg4KA .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8CHZbI2cPwyFg4KA #extensionEnd,#mermaid-svg-8CHZbI2cPwyFg4KA .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8CHZbI2cPwyFg4KA #aggregationStart,#mermaid-svg-8CHZbI2cPwyFg4KA .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8CHZbI2cPwyFg4KA #aggregationEnd,#mermaid-svg-8CHZbI2cPwyFg4KA .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8CHZbI2cPwyFg4KA .edgeTerminals{font-size:11px;}#mermaid-svg-8CHZbI2cPwyFg4KA :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} BankAccount String owner BigDecimal balance deposit(amount) withdrawl(amount) 返回类型
可选地您可以在定义结束时设定返回的数据类型 注意最终的方法定义和返回类型之间必须有一个空格来结束方法/函数定义示例
mermaid
classDiagram
class BankAccount{String ownerBigDecimal balancedeposit(amount) boolwithdrawl(amount) int
}#mermaid-svg-Sguil6no9oNNwAjQ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Sguil6no9oNNwAjQ .error-icon{fill:#552222;}#mermaid-svg-Sguil6no9oNNwAjQ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Sguil6no9oNNwAjQ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-Sguil6no9oNNwAjQ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Sguil6no9oNNwAjQ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Sguil6no9oNNwAjQ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Sguil6no9oNNwAjQ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Sguil6no9oNNwAjQ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Sguil6no9oNNwAjQ .marker.cross{stroke:#333333;}#mermaid-svg-Sguil6no9oNNwAjQ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Sguil6no9oNNwAjQ g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-Sguil6no9oNNwAjQ g.classGroup text .title{font-weight:bolder;}#mermaid-svg-Sguil6no9oNNwAjQ .nodeLabel,#mermaid-svg-Sguil6no9oNNwAjQ .edgeLabel{color:#131300;}#mermaid-svg-Sguil6no9oNNwAjQ .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-Sguil6no9oNNwAjQ .label text{fill:#131300;}#mermaid-svg-Sguil6no9oNNwAjQ .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-Sguil6no9oNNwAjQ .classTitle{font-weight:bolder;}#mermaid-svg-Sguil6no9oNNwAjQ .node rect,#mermaid-svg-Sguil6no9oNNwAjQ .node circle,#mermaid-svg-Sguil6no9oNNwAjQ .node ellipse,#mermaid-svg-Sguil6no9oNNwAjQ .node polygon,#mermaid-svg-Sguil6no9oNNwAjQ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Sguil6no9oNNwAjQ .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-Sguil6no9oNNwAjQ g.clickable{cursor:pointer;}#mermaid-svg-Sguil6no9oNNwAjQ g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-Sguil6no9oNNwAjQ g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-Sguil6no9oNNwAjQ .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-Sguil6no9oNNwAjQ .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-Sguil6no9oNNwAjQ .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-Sguil6no9oNNwAjQ .dashed-line{stroke-dasharray:3;}#mermaid-svg-Sguil6no9oNNwAjQ #compositionStart,#mermaid-svg-Sguil6no9oNNwAjQ .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-Sguil6no9oNNwAjQ #compositionEnd,#mermaid-svg-Sguil6no9oNNwAjQ .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-Sguil6no9oNNwAjQ #dependencyStart,#mermaid-svg-Sguil6no9oNNwAjQ .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-Sguil6no9oNNwAjQ #dependencyStart,#mermaid-svg-Sguil6no9oNNwAjQ .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-Sguil6no9oNNwAjQ #extensionStart,#mermaid-svg-Sguil6no9oNNwAjQ .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-Sguil6no9oNNwAjQ #extensionEnd,#mermaid-svg-Sguil6no9oNNwAjQ .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-Sguil6no9oNNwAjQ #aggregationStart,#mermaid-svg-Sguil6no9oNNwAjQ .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-Sguil6no9oNNwAjQ #aggregationEnd,#mermaid-svg-Sguil6no9oNNwAjQ .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-Sguil6no9oNNwAjQ .edgeTerminals{font-size:11px;}#mermaid-svg-Sguil6no9oNNwAjQ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} BankAccount String owner BigDecimal balance deposit(amount) : bool withdrawl(amount) : int 泛型
可以使用通用类型例如Listint对于字段、参数和返回类型方法是将类型封装在~波浪号中。注意当前不支持嵌套类型声明例如ListListint。
这可以作为任何一个类定义方法的一部分来完成
mermaid
classDiagram
class Square~Shape~{int idList~int~ positionsetPoints(List~int~ points)getPoints() List~int~
}Square : -List~string~ messages
Square : setMessages(List~string~ messages)
Square : getMessages() List~string~#mermaid-svg-kAGbbg0BVUsRr3gy {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-kAGbbg0BVUsRr3gy .error-icon{fill:#552222;}#mermaid-svg-kAGbbg0BVUsRr3gy .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-kAGbbg0BVUsRr3gy .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-kAGbbg0BVUsRr3gy .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-kAGbbg0BVUsRr3gy .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-kAGbbg0BVUsRr3gy .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-kAGbbg0BVUsRr3gy .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-kAGbbg0BVUsRr3gy .marker{fill:#333333;stroke:#333333;}#mermaid-svg-kAGbbg0BVUsRr3gy .marker.cross{stroke:#333333;}#mermaid-svg-kAGbbg0BVUsRr3gy svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-kAGbbg0BVUsRr3gy g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-kAGbbg0BVUsRr3gy g.classGroup text .title{font-weight:bolder;}#mermaid-svg-kAGbbg0BVUsRr3gy .nodeLabel,#mermaid-svg-kAGbbg0BVUsRr3gy .edgeLabel{color:#131300;}#mermaid-svg-kAGbbg0BVUsRr3gy .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-kAGbbg0BVUsRr3gy .label text{fill:#131300;}#mermaid-svg-kAGbbg0BVUsRr3gy .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-kAGbbg0BVUsRr3gy .classTitle{font-weight:bolder;}#mermaid-svg-kAGbbg0BVUsRr3gy .node rect,#mermaid-svg-kAGbbg0BVUsRr3gy .node circle,#mermaid-svg-kAGbbg0BVUsRr3gy .node ellipse,#mermaid-svg-kAGbbg0BVUsRr3gy .node polygon,#mermaid-svg-kAGbbg0BVUsRr3gy .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-kAGbbg0BVUsRr3gy .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-kAGbbg0BVUsRr3gy g.clickable{cursor:pointer;}#mermaid-svg-kAGbbg0BVUsRr3gy g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-kAGbbg0BVUsRr3gy g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-kAGbbg0BVUsRr3gy .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-kAGbbg0BVUsRr3gy .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-kAGbbg0BVUsRr3gy .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-kAGbbg0BVUsRr3gy .dashed-line{stroke-dasharray:3;}#mermaid-svg-kAGbbg0BVUsRr3gy #compositionStart,#mermaid-svg-kAGbbg0BVUsRr3gy .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-kAGbbg0BVUsRr3gy #compositionEnd,#mermaid-svg-kAGbbg0BVUsRr3gy .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-kAGbbg0BVUsRr3gy #dependencyStart,#mermaid-svg-kAGbbg0BVUsRr3gy .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-kAGbbg0BVUsRr3gy #dependencyStart,#mermaid-svg-kAGbbg0BVUsRr3gy .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-kAGbbg0BVUsRr3gy #extensionStart,#mermaid-svg-kAGbbg0BVUsRr3gy .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-kAGbbg0BVUsRr3gy #extensionEnd,#mermaid-svg-kAGbbg0BVUsRr3gy .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-kAGbbg0BVUsRr3gy #aggregationStart,#mermaid-svg-kAGbbg0BVUsRr3gy .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-kAGbbg0BVUsRr3gy #aggregationEnd,#mermaid-svg-kAGbbg0BVUsRr3gy .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-kAGbbg0BVUsRr3gy .edgeTerminals{font-size:11px;}#mermaid-svg-kAGbbg0BVUsRr3gy :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} SquareShape int id Listint position -Liststring messages setPoints(Listint points) getPoints() : Listint setMessages(Liststring messages) getMessages() : Liststring 返回类型
(可选) 您可以使用返回类型来结束方法/函数的定义。
可见性
要指定类成员即任何属性或方法的可见性可以将这些符号放在成员名称之前可选 公共Public- 私有Private# 保护Protected~ 包/内部Package/Internal 注意您还可以通过在方法的末尾添加以下符号来将其他分类器包含到方法定义中例如在 () 之后 * Abstract 例如someAbstractMethod()*$ Static例如someStaticMethod()$ 注意您还可以通过在字段名称的末尾添加以下符号来将其他分类器包含到字段定义中 $ Static 例如String someField$ 五、定义关系
关系是一个通用术语涵盖在类和对象图上找到的特定类型的逻辑关系。
类图中「类」之间的逻辑关系由连接线表示定义的形式如[类A][箭头][类B]:标签文字。
不同的逻辑关系定义如下
类型定义|--继承\*--.组合o--.聚合--.关联--.连接实线...依赖..|实现...连接虚线
mermaid
classDiagramclassA |-- classBclassC *-- classDclassE o-- classFclassG -- classHclassI -- classJclassK .. classLclassM |.. classNclassO .. classP#mermaid-svg-0FwHH2ibCVXBFjWW {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-0FwHH2ibCVXBFjWW .error-icon{fill:#552222;}#mermaid-svg-0FwHH2ibCVXBFjWW .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-0FwHH2ibCVXBFjWW .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-0FwHH2ibCVXBFjWW .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-0FwHH2ibCVXBFjWW .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-0FwHH2ibCVXBFjWW .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-0FwHH2ibCVXBFjWW .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-0FwHH2ibCVXBFjWW .marker{fill:#333333;stroke:#333333;}#mermaid-svg-0FwHH2ibCVXBFjWW .marker.cross{stroke:#333333;}#mermaid-svg-0FwHH2ibCVXBFjWW svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-0FwHH2ibCVXBFjWW g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-0FwHH2ibCVXBFjWW g.classGroup text .title{font-weight:bolder;}#mermaid-svg-0FwHH2ibCVXBFjWW .nodeLabel,#mermaid-svg-0FwHH2ibCVXBFjWW .edgeLabel{color:#131300;}#mermaid-svg-0FwHH2ibCVXBFjWW .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-0FwHH2ibCVXBFjWW .label text{fill:#131300;}#mermaid-svg-0FwHH2ibCVXBFjWW .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-0FwHH2ibCVXBFjWW .classTitle{font-weight:bolder;}#mermaid-svg-0FwHH2ibCVXBFjWW .node rect,#mermaid-svg-0FwHH2ibCVXBFjWW .node circle,#mermaid-svg-0FwHH2ibCVXBFjWW .node ellipse,#mermaid-svg-0FwHH2ibCVXBFjWW .node polygon,#mermaid-svg-0FwHH2ibCVXBFjWW .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-0FwHH2ibCVXBFjWW .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-0FwHH2ibCVXBFjWW g.clickable{cursor:pointer;}#mermaid-svg-0FwHH2ibCVXBFjWW g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-0FwHH2ibCVXBFjWW g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-0FwHH2ibCVXBFjWW .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-0FwHH2ibCVXBFjWW .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-0FwHH2ibCVXBFjWW .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-0FwHH2ibCVXBFjWW .dashed-line{stroke-dasharray:3;}#mermaid-svg-0FwHH2ibCVXBFjWW #compositionStart,#mermaid-svg-0FwHH2ibCVXBFjWW .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-0FwHH2ibCVXBFjWW #compositionEnd,#mermaid-svg-0FwHH2ibCVXBFjWW .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-0FwHH2ibCVXBFjWW #dependencyStart,#mermaid-svg-0FwHH2ibCVXBFjWW .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-0FwHH2ibCVXBFjWW #dependencyStart,#mermaid-svg-0FwHH2ibCVXBFjWW .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-0FwHH2ibCVXBFjWW #extensionStart,#mermaid-svg-0FwHH2ibCVXBFjWW .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-0FwHH2ibCVXBFjWW #extensionEnd,#mermaid-svg-0FwHH2ibCVXBFjWW .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-0FwHH2ibCVXBFjWW #aggregationStart,#mermaid-svg-0FwHH2ibCVXBFjWW .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-0FwHH2ibCVXBFjWW #aggregationEnd,#mermaid-svg-0FwHH2ibCVXBFjWW .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-0FwHH2ibCVXBFjWW .edgeTerminals{font-size:11px;}#mermaid-svg-0FwHH2ibCVXBFjWW :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 mermaid
classDiagramclassA --| classB : InheritanceclassC --* classD : CompositionclassE --o classF : AggregationclassG -- classH : AssociationclassI -- classJ : Link(Solid)classK .. classL : DependencyclassM ..| classN : RealizationclassO .. classP : Link(Dashed)#mermaid-svg-HI5iJLvFlcHcE4vb {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-HI5iJLvFlcHcE4vb .error-icon{fill:#552222;}#mermaid-svg-HI5iJLvFlcHcE4vb .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-HI5iJLvFlcHcE4vb .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-HI5iJLvFlcHcE4vb .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-HI5iJLvFlcHcE4vb .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-HI5iJLvFlcHcE4vb .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-HI5iJLvFlcHcE4vb .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-HI5iJLvFlcHcE4vb .marker{fill:#333333;stroke:#333333;}#mermaid-svg-HI5iJLvFlcHcE4vb .marker.cross{stroke:#333333;}#mermaid-svg-HI5iJLvFlcHcE4vb svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-HI5iJLvFlcHcE4vb g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-HI5iJLvFlcHcE4vb g.classGroup text .title{font-weight:bolder;}#mermaid-svg-HI5iJLvFlcHcE4vb .nodeLabel,#mermaid-svg-HI5iJLvFlcHcE4vb .edgeLabel{color:#131300;}#mermaid-svg-HI5iJLvFlcHcE4vb .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-HI5iJLvFlcHcE4vb .label text{fill:#131300;}#mermaid-svg-HI5iJLvFlcHcE4vb .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-HI5iJLvFlcHcE4vb .classTitle{font-weight:bolder;}#mermaid-svg-HI5iJLvFlcHcE4vb .node rect,#mermaid-svg-HI5iJLvFlcHcE4vb .node circle,#mermaid-svg-HI5iJLvFlcHcE4vb .node ellipse,#mermaid-svg-HI5iJLvFlcHcE4vb .node polygon,#mermaid-svg-HI5iJLvFlcHcE4vb .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-HI5iJLvFlcHcE4vb .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-HI5iJLvFlcHcE4vb g.clickable{cursor:pointer;}#mermaid-svg-HI5iJLvFlcHcE4vb g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-HI5iJLvFlcHcE4vb g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-HI5iJLvFlcHcE4vb .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-HI5iJLvFlcHcE4vb .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-HI5iJLvFlcHcE4vb .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-HI5iJLvFlcHcE4vb .dashed-line{stroke-dasharray:3;}#mermaid-svg-HI5iJLvFlcHcE4vb #compositionStart,#mermaid-svg-HI5iJLvFlcHcE4vb .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HI5iJLvFlcHcE4vb #compositionEnd,#mermaid-svg-HI5iJLvFlcHcE4vb .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HI5iJLvFlcHcE4vb #dependencyStart,#mermaid-svg-HI5iJLvFlcHcE4vb .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HI5iJLvFlcHcE4vb #dependencyStart,#mermaid-svg-HI5iJLvFlcHcE4vb .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HI5iJLvFlcHcE4vb #extensionStart,#mermaid-svg-HI5iJLvFlcHcE4vb .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HI5iJLvFlcHcE4vb #extensionEnd,#mermaid-svg-HI5iJLvFlcHcE4vb .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HI5iJLvFlcHcE4vb #aggregationStart,#mermaid-svg-HI5iJLvFlcHcE4vb .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HI5iJLvFlcHcE4vb #aggregationEnd,#mermaid-svg-HI5iJLvFlcHcE4vb .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HI5iJLvFlcHcE4vb .edgeTerminals{font-size:11px;}#mermaid-svg-HI5iJLvFlcHcE4vb :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 关系标签
可以将标签式的文本添加到关系上
[classA][Arrow][ClassB]:LabelTextmermaid
classDiagram类A |-- 类B : 实现类C *-- 类D : 组合类E o-- 类F : 聚合#mermaid-svg-yTdId9V8ZeaZtUJY {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-yTdId9V8ZeaZtUJY .error-icon{fill:#552222;}#mermaid-svg-yTdId9V8ZeaZtUJY .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-yTdId9V8ZeaZtUJY .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-yTdId9V8ZeaZtUJY .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-yTdId9V8ZeaZtUJY .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-yTdId9V8ZeaZtUJY .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-yTdId9V8ZeaZtUJY .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-yTdId9V8ZeaZtUJY .marker{fill:#333333;stroke:#333333;}#mermaid-svg-yTdId9V8ZeaZtUJY .marker.cross{stroke:#333333;}#mermaid-svg-yTdId9V8ZeaZtUJY svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-yTdId9V8ZeaZtUJY g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-yTdId9V8ZeaZtUJY g.classGroup text .title{font-weight:bolder;}#mermaid-svg-yTdId9V8ZeaZtUJY .nodeLabel,#mermaid-svg-yTdId9V8ZeaZtUJY .edgeLabel{color:#131300;}#mermaid-svg-yTdId9V8ZeaZtUJY .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-yTdId9V8ZeaZtUJY .label text{fill:#131300;}#mermaid-svg-yTdId9V8ZeaZtUJY .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-yTdId9V8ZeaZtUJY .classTitle{font-weight:bolder;}#mermaid-svg-yTdId9V8ZeaZtUJY .node rect,#mermaid-svg-yTdId9V8ZeaZtUJY .node circle,#mermaid-svg-yTdId9V8ZeaZtUJY .node ellipse,#mermaid-svg-yTdId9V8ZeaZtUJY .node polygon,#mermaid-svg-yTdId9V8ZeaZtUJY .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-yTdId9V8ZeaZtUJY .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-yTdId9V8ZeaZtUJY g.clickable{cursor:pointer;}#mermaid-svg-yTdId9V8ZeaZtUJY g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-yTdId9V8ZeaZtUJY g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-yTdId9V8ZeaZtUJY .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-yTdId9V8ZeaZtUJY .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-yTdId9V8ZeaZtUJY .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-yTdId9V8ZeaZtUJY .dashed-line{stroke-dasharray:3;}#mermaid-svg-yTdId9V8ZeaZtUJY #compositionStart,#mermaid-svg-yTdId9V8ZeaZtUJY .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-yTdId9V8ZeaZtUJY #compositionEnd,#mermaid-svg-yTdId9V8ZeaZtUJY .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-yTdId9V8ZeaZtUJY #dependencyStart,#mermaid-svg-yTdId9V8ZeaZtUJY .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-yTdId9V8ZeaZtUJY #dependencyStart,#mermaid-svg-yTdId9V8ZeaZtUJY .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-yTdId9V8ZeaZtUJY #extensionStart,#mermaid-svg-yTdId9V8ZeaZtUJY .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-yTdId9V8ZeaZtUJY #extensionEnd,#mermaid-svg-yTdId9V8ZeaZtUJY .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-yTdId9V8ZeaZtUJY #aggregationStart,#mermaid-svg-yTdId9V8ZeaZtUJY .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-yTdId9V8ZeaZtUJY #aggregationEnd,#mermaid-svg-yTdId9V8ZeaZtUJY .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-yTdId9V8ZeaZtUJY .edgeTerminals{font-size:11px;}#mermaid-svg-yTdId9V8ZeaZtUJY :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 实现 组合 聚合 类A 类B 类C 类D 类E 类F 双向关系
关系可以逻辑上表示 N:M 的关联
mermaid
classDiagram动物 |--| 斑马#mermaid-svg-cZI4p7lzXWcFS21x {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-cZI4p7lzXWcFS21x .error-icon{fill:#552222;}#mermaid-svg-cZI4p7lzXWcFS21x .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-cZI4p7lzXWcFS21x .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-cZI4p7lzXWcFS21x .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-cZI4p7lzXWcFS21x .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-cZI4p7lzXWcFS21x .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-cZI4p7lzXWcFS21x .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-cZI4p7lzXWcFS21x .marker{fill:#333333;stroke:#333333;}#mermaid-svg-cZI4p7lzXWcFS21x .marker.cross{stroke:#333333;}#mermaid-svg-cZI4p7lzXWcFS21x svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-cZI4p7lzXWcFS21x g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-cZI4p7lzXWcFS21x g.classGroup text .title{font-weight:bolder;}#mermaid-svg-cZI4p7lzXWcFS21x .nodeLabel,#mermaid-svg-cZI4p7lzXWcFS21x .edgeLabel{color:#131300;}#mermaid-svg-cZI4p7lzXWcFS21x .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-cZI4p7lzXWcFS21x .label text{fill:#131300;}#mermaid-svg-cZI4p7lzXWcFS21x .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-cZI4p7lzXWcFS21x .classTitle{font-weight:bolder;}#mermaid-svg-cZI4p7lzXWcFS21x .node rect,#mermaid-svg-cZI4p7lzXWcFS21x .node circle,#mermaid-svg-cZI4p7lzXWcFS21x .node ellipse,#mermaid-svg-cZI4p7lzXWcFS21x .node polygon,#mermaid-svg-cZI4p7lzXWcFS21x .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-cZI4p7lzXWcFS21x .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-cZI4p7lzXWcFS21x g.clickable{cursor:pointer;}#mermaid-svg-cZI4p7lzXWcFS21x g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-cZI4p7lzXWcFS21x g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-cZI4p7lzXWcFS21x .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-cZI4p7lzXWcFS21x .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-cZI4p7lzXWcFS21x .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-cZI4p7lzXWcFS21x .dashed-line{stroke-dasharray:3;}#mermaid-svg-cZI4p7lzXWcFS21x #compositionStart,#mermaid-svg-cZI4p7lzXWcFS21x .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-cZI4p7lzXWcFS21x #compositionEnd,#mermaid-svg-cZI4p7lzXWcFS21x .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-cZI4p7lzXWcFS21x #dependencyStart,#mermaid-svg-cZI4p7lzXWcFS21x .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-cZI4p7lzXWcFS21x #dependencyStart,#mermaid-svg-cZI4p7lzXWcFS21x .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-cZI4p7lzXWcFS21x #extensionStart,#mermaid-svg-cZI4p7lzXWcFS21x .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-cZI4p7lzXWcFS21x #extensionEnd,#mermaid-svg-cZI4p7lzXWcFS21x .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-cZI4p7lzXWcFS21x #aggregationStart,#mermaid-svg-cZI4p7lzXWcFS21x .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-cZI4p7lzXWcFS21x #aggregationEnd,#mermaid-svg-cZI4p7lzXWcFS21x .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-cZI4p7lzXWcFS21x .edgeTerminals{font-size:11px;}#mermaid-svg-cZI4p7lzXWcFS21x :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 动物 斑马 语法:
[关系类型][链接][关系类型]其中“关系类型”可以是以下之一:
其中Relation Type可以是以下之一
类型说明|.继承\*.组合o.聚合.关联.关联|.实现
以及Link 可以是以下之一
类型说明--实线...虚线
六、关系上的基数/多重性
类图中的多重性或基数表示一个类连接到另一个类的一个实例的实例数。例如一家公司将有一名或多名员工但每个员工只为一家公司工作。
多重性符号放置在关联的末尾。
不同的基数选项有
1 仅1个0..1 0或者1个1..* 1个或多个* 多个n n个n10..n 0-n个n11..n 1-n个n1
通过在给定箭头之前可选和之后可选在 内放置基数文本可以轻松定义基数。
[类A] 基数1 [箭头] 基数2 [类B]:标签文本mermaid
classDiagram
消费者 1 -- * 消费券
学生 1 -- 1…* 课程
星系 -- 许多的 星星 : 包含#mermaid-svg-IwqD0h7iiPuQ0HpD {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-IwqD0h7iiPuQ0HpD .error-icon{fill:#552222;}#mermaid-svg-IwqD0h7iiPuQ0HpD .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-IwqD0h7iiPuQ0HpD .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-IwqD0h7iiPuQ0HpD .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-IwqD0h7iiPuQ0HpD .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-IwqD0h7iiPuQ0HpD .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-IwqD0h7iiPuQ0HpD .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-IwqD0h7iiPuQ0HpD .marker{fill:#333333;stroke:#333333;}#mermaid-svg-IwqD0h7iiPuQ0HpD .marker.cross{stroke:#333333;}#mermaid-svg-IwqD0h7iiPuQ0HpD svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-IwqD0h7iiPuQ0HpD g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-IwqD0h7iiPuQ0HpD g.classGroup text .title{font-weight:bolder;}#mermaid-svg-IwqD0h7iiPuQ0HpD .nodeLabel,#mermaid-svg-IwqD0h7iiPuQ0HpD .edgeLabel{color:#131300;}#mermaid-svg-IwqD0h7iiPuQ0HpD .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-IwqD0h7iiPuQ0HpD .label text{fill:#131300;}#mermaid-svg-IwqD0h7iiPuQ0HpD .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-IwqD0h7iiPuQ0HpD .classTitle{font-weight:bolder;}#mermaid-svg-IwqD0h7iiPuQ0HpD .node rect,#mermaid-svg-IwqD0h7iiPuQ0HpD .node circle,#mermaid-svg-IwqD0h7iiPuQ0HpD .node ellipse,#mermaid-svg-IwqD0h7iiPuQ0HpD .node polygon,#mermaid-svg-IwqD0h7iiPuQ0HpD .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-IwqD0h7iiPuQ0HpD .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-IwqD0h7iiPuQ0HpD g.clickable{cursor:pointer;}#mermaid-svg-IwqD0h7iiPuQ0HpD g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-IwqD0h7iiPuQ0HpD g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-IwqD0h7iiPuQ0HpD .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-IwqD0h7iiPuQ0HpD .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-IwqD0h7iiPuQ0HpD .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-IwqD0h7iiPuQ0HpD .dashed-line{stroke-dasharray:3;}#mermaid-svg-IwqD0h7iiPuQ0HpD #compositionStart,#mermaid-svg-IwqD0h7iiPuQ0HpD .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-IwqD0h7iiPuQ0HpD #compositionEnd,#mermaid-svg-IwqD0h7iiPuQ0HpD .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-IwqD0h7iiPuQ0HpD #dependencyStart,#mermaid-svg-IwqD0h7iiPuQ0HpD .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-IwqD0h7iiPuQ0HpD #dependencyStart,#mermaid-svg-IwqD0h7iiPuQ0HpD .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-IwqD0h7iiPuQ0HpD #extensionStart,#mermaid-svg-IwqD0h7iiPuQ0HpD .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-IwqD0h7iiPuQ0HpD #extensionEnd,#mermaid-svg-IwqD0h7iiPuQ0HpD .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-IwqD0h7iiPuQ0HpD #aggregationStart,#mermaid-svg-IwqD0h7iiPuQ0HpD .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-IwqD0h7iiPuQ0HpD #aggregationEnd,#mermaid-svg-IwqD0h7iiPuQ0HpD .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-IwqD0h7iiPuQ0HpD .edgeTerminals{font-size:11px;}#mermaid-svg-IwqD0h7iiPuQ0HpD :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 1 * 1 1…* 包含 许多的 消费者 消费券 学生 课程 星系 星星 七、类的注解
可以使用标记对类进行说明以提供关于类的其他元数据。这可以更清楚地指示其属性。一些常见的说明包括 Interface 表示接口 Abstract 表示抽象 Service 表示服务 Enumeration 表示枚举 注解在 和 中定义。有两种方法可以向类添加注解无论使用哪种语法输出相同。这两种方式是
在定义类之后的单独行中定义。例如
mermaid
classDiagramclass 形状interface 形状形状 : 顶点数形状 : 绘制()#mermaid-svg-vhYTvne4KyyK9qBU {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-vhYTvne4KyyK9qBU .error-icon{fill:#552222;}#mermaid-svg-vhYTvne4KyyK9qBU .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-vhYTvne4KyyK9qBU .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-vhYTvne4KyyK9qBU .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-vhYTvne4KyyK9qBU .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-vhYTvne4KyyK9qBU .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-vhYTvne4KyyK9qBU .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-vhYTvne4KyyK9qBU .marker{fill:#333333;stroke:#333333;}#mermaid-svg-vhYTvne4KyyK9qBU .marker.cross{stroke:#333333;}#mermaid-svg-vhYTvne4KyyK9qBU svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-vhYTvne4KyyK9qBU g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-vhYTvne4KyyK9qBU g.classGroup text .title{font-weight:bolder;}#mermaid-svg-vhYTvne4KyyK9qBU .nodeLabel,#mermaid-svg-vhYTvne4KyyK9qBU .edgeLabel{color:#131300;}#mermaid-svg-vhYTvne4KyyK9qBU .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-vhYTvne4KyyK9qBU .label text{fill:#131300;}#mermaid-svg-vhYTvne4KyyK9qBU .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-vhYTvne4KyyK9qBU .classTitle{font-weight:bolder;}#mermaid-svg-vhYTvne4KyyK9qBU .node rect,#mermaid-svg-vhYTvne4KyyK9qBU .node circle,#mermaid-svg-vhYTvne4KyyK9qBU .node ellipse,#mermaid-svg-vhYTvne4KyyK9qBU .node polygon,#mermaid-svg-vhYTvne4KyyK9qBU .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-vhYTvne4KyyK9qBU .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-vhYTvne4KyyK9qBU g.clickable{cursor:pointer;}#mermaid-svg-vhYTvne4KyyK9qBU g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-vhYTvne4KyyK9qBU g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-vhYTvne4KyyK9qBU .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-vhYTvne4KyyK9qBU .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-vhYTvne4KyyK9qBU .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-vhYTvne4KyyK9qBU .dashed-line{stroke-dasharray:3;}#mermaid-svg-vhYTvne4KyyK9qBU #compositionStart,#mermaid-svg-vhYTvne4KyyK9qBU .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vhYTvne4KyyK9qBU #compositionEnd,#mermaid-svg-vhYTvne4KyyK9qBU .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vhYTvne4KyyK9qBU #dependencyStart,#mermaid-svg-vhYTvne4KyyK9qBU .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vhYTvne4KyyK9qBU #dependencyStart,#mermaid-svg-vhYTvne4KyyK9qBU .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vhYTvne4KyyK9qBU #extensionStart,#mermaid-svg-vhYTvne4KyyK9qBU .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vhYTvne4KyyK9qBU #extensionEnd,#mermaid-svg-vhYTvne4KyyK9qBU .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vhYTvne4KyyK9qBU #aggregationStart,#mermaid-svg-vhYTvne4KyyK9qBU .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vhYTvne4KyyK9qBU #aggregationEnd,#mermaid-svg-vhYTvne4KyyK9qBU .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vhYTvne4KyyK9qBU .edgeTerminals{font-size:11px;}#mermaid-svg-vhYTvne4KyyK9qBU :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} «interface» 形状 顶点数 绘制() 在类定义的嵌套结构中定义。例如
mermaid
classDiagram
class 形状{接口顶点数绘制()
}
class 颜色{枚举红蓝黄
}#mermaid-svg-7O0Lp1bHN5rGcYtq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-7O0Lp1bHN5rGcYtq .error-icon{fill:#552222;}#mermaid-svg-7O0Lp1bHN5rGcYtq .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-7O0Lp1bHN5rGcYtq .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-7O0Lp1bHN5rGcYtq .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-7O0Lp1bHN5rGcYtq .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-7O0Lp1bHN5rGcYtq .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-7O0Lp1bHN5rGcYtq .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-7O0Lp1bHN5rGcYtq .marker{fill:#333333;stroke:#333333;}#mermaid-svg-7O0Lp1bHN5rGcYtq .marker.cross{stroke:#333333;}#mermaid-svg-7O0Lp1bHN5rGcYtq svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-7O0Lp1bHN5rGcYtq g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-7O0Lp1bHN5rGcYtq g.classGroup text .title{font-weight:bolder;}#mermaid-svg-7O0Lp1bHN5rGcYtq .nodeLabel,#mermaid-svg-7O0Lp1bHN5rGcYtq .edgeLabel{color:#131300;}#mermaid-svg-7O0Lp1bHN5rGcYtq .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-7O0Lp1bHN5rGcYtq .label text{fill:#131300;}#mermaid-svg-7O0Lp1bHN5rGcYtq .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-7O0Lp1bHN5rGcYtq .classTitle{font-weight:bolder;}#mermaid-svg-7O0Lp1bHN5rGcYtq .node rect,#mermaid-svg-7O0Lp1bHN5rGcYtq .node circle,#mermaid-svg-7O0Lp1bHN5rGcYtq .node ellipse,#mermaid-svg-7O0Lp1bHN5rGcYtq .node polygon,#mermaid-svg-7O0Lp1bHN5rGcYtq .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-7O0Lp1bHN5rGcYtq .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-7O0Lp1bHN5rGcYtq g.clickable{cursor:pointer;}#mermaid-svg-7O0Lp1bHN5rGcYtq g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-7O0Lp1bHN5rGcYtq g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-7O0Lp1bHN5rGcYtq .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-7O0Lp1bHN5rGcYtq .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-7O0Lp1bHN5rGcYtq .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-7O0Lp1bHN5rGcYtq .dashed-line{stroke-dasharray:3;}#mermaid-svg-7O0Lp1bHN5rGcYtq #compositionStart,#mermaid-svg-7O0Lp1bHN5rGcYtq .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-7O0Lp1bHN5rGcYtq #compositionEnd,#mermaid-svg-7O0Lp1bHN5rGcYtq .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-7O0Lp1bHN5rGcYtq #dependencyStart,#mermaid-svg-7O0Lp1bHN5rGcYtq .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-7O0Lp1bHN5rGcYtq #dependencyStart,#mermaid-svg-7O0Lp1bHN5rGcYtq .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-7O0Lp1bHN5rGcYtq #extensionStart,#mermaid-svg-7O0Lp1bHN5rGcYtq .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-7O0Lp1bHN5rGcYtq #extensionEnd,#mermaid-svg-7O0Lp1bHN5rGcYtq .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-7O0Lp1bHN5rGcYtq #aggregationStart,#mermaid-svg-7O0Lp1bHN5rGcYtq .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-7O0Lp1bHN5rGcYtq #aggregationEnd,#mermaid-svg-7O0Lp1bHN5rGcYtq .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-7O0Lp1bHN5rGcYtq .edgeTerminals{font-size:11px;}#mermaid-svg-7O0Lp1bHN5rGcYtq :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} «接口» 形状 顶点数 制() «枚举» 颜色 红 蓝 黄 八、注释
注释可以在类图代码中使用解析器将忽略这些注释。注释需要写在单独的一行里并且必须以 %% 开头。注释开始到下一个换行符之后的任何文本都将被视为注释包括任何类图语法。
mermaid
classDiagram
%% 整行都是注释 classDiagram class 形状 接口
class 形状{接口顶点数绘制()
}#mermaid-svg-AbOQjpY1foxJ7wiN {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-AbOQjpY1foxJ7wiN .error-icon{fill:#552222;}#mermaid-svg-AbOQjpY1foxJ7wiN .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-AbOQjpY1foxJ7wiN .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-AbOQjpY1foxJ7wiN .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-AbOQjpY1foxJ7wiN .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-AbOQjpY1foxJ7wiN .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-AbOQjpY1foxJ7wiN .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-AbOQjpY1foxJ7wiN .marker{fill:#333333;stroke:#333333;}#mermaid-svg-AbOQjpY1foxJ7wiN .marker.cross{stroke:#333333;}#mermaid-svg-AbOQjpY1foxJ7wiN svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-AbOQjpY1foxJ7wiN g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-AbOQjpY1foxJ7wiN g.classGroup text .title{font-weight:bolder;}#mermaid-svg-AbOQjpY1foxJ7wiN .nodeLabel,#mermaid-svg-AbOQjpY1foxJ7wiN .edgeLabel{color:#131300;}#mermaid-svg-AbOQjpY1foxJ7wiN .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-AbOQjpY1foxJ7wiN .label text{fill:#131300;}#mermaid-svg-AbOQjpY1foxJ7wiN .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-AbOQjpY1foxJ7wiN .classTitle{font-weight:bolder;}#mermaid-svg-AbOQjpY1foxJ7wiN .node rect,#mermaid-svg-AbOQjpY1foxJ7wiN .node circle,#mermaid-svg-AbOQjpY1foxJ7wiN .node ellipse,#mermaid-svg-AbOQjpY1foxJ7wiN .node polygon,#mermaid-svg-AbOQjpY1foxJ7wiN .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-AbOQjpY1foxJ7wiN .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-AbOQjpY1foxJ7wiN g.clickable{cursor:pointer;}#mermaid-svg-AbOQjpY1foxJ7wiN g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-AbOQjpY1foxJ7wiN g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-AbOQjpY1foxJ7wiN .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-AbOQjpY1foxJ7wiN .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-AbOQjpY1foxJ7wiN .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-AbOQjpY1foxJ7wiN .dashed-line{stroke-dasharray:3;}#mermaid-svg-AbOQjpY1foxJ7wiN #compositionStart,#mermaid-svg-AbOQjpY1foxJ7wiN .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-AbOQjpY1foxJ7wiN #compositionEnd,#mermaid-svg-AbOQjpY1foxJ7wiN .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-AbOQjpY1foxJ7wiN #dependencyStart,#mermaid-svg-AbOQjpY1foxJ7wiN .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-AbOQjpY1foxJ7wiN #dependencyStart,#mermaid-svg-AbOQjpY1foxJ7wiN .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-AbOQjpY1foxJ7wiN #extensionStart,#mermaid-svg-AbOQjpY1foxJ7wiN .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-AbOQjpY1foxJ7wiN #extensionEnd,#mermaid-svg-AbOQjpY1foxJ7wiN .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-AbOQjpY1foxJ7wiN #aggregationStart,#mermaid-svg-AbOQjpY1foxJ7wiN .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-AbOQjpY1foxJ7wiN #aggregationEnd,#mermaid-svg-AbOQjpY1foxJ7wiN .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-AbOQjpY1foxJ7wiN .edgeTerminals{font-size:11px;}#mermaid-svg-AbOQjpY1foxJ7wiN :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} «接口» 形状 顶点数 绘制() 九、设置图的方向
对于类图您可以使用方向语句来设置图将呈现的方向就像本示例中的那样
mermaid
classDiagram
direction RL
class 学生 {-身份证 : 身份证信息
}
class 身份证信息{-序号 : int-名称 : string
}
class 自行车信息{-序号 : int-名称 : string
}
学生 1 --o 1 身份证信息 : 拿
学生 1 --o 1 自行车信息 : 骑#mermaid-svg-K6S0cxet4a87eO0K {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-K6S0cxet4a87eO0K .error-icon{fill:#552222;}#mermaid-svg-K6S0cxet4a87eO0K .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-K6S0cxet4a87eO0K .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-K6S0cxet4a87eO0K .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-K6S0cxet4a87eO0K .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-K6S0cxet4a87eO0K .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-K6S0cxet4a87eO0K .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-K6S0cxet4a87eO0K .marker{fill:#333333;stroke:#333333;}#mermaid-svg-K6S0cxet4a87eO0K .marker.cross{stroke:#333333;}#mermaid-svg-K6S0cxet4a87eO0K svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-K6S0cxet4a87eO0K g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-K6S0cxet4a87eO0K g.classGroup text .title{font-weight:bolder;}#mermaid-svg-K6S0cxet4a87eO0K .nodeLabel,#mermaid-svg-K6S0cxet4a87eO0K .edgeLabel{color:#131300;}#mermaid-svg-K6S0cxet4a87eO0K .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-K6S0cxet4a87eO0K .label text{fill:#131300;}#mermaid-svg-K6S0cxet4a87eO0K .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-K6S0cxet4a87eO0K .classTitle{font-weight:bolder;}#mermaid-svg-K6S0cxet4a87eO0K .node rect,#mermaid-svg-K6S0cxet4a87eO0K .node circle,#mermaid-svg-K6S0cxet4a87eO0K .node ellipse,#mermaid-svg-K6S0cxet4a87eO0K .node polygon,#mermaid-svg-K6S0cxet4a87eO0K .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-K6S0cxet4a87eO0K .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-K6S0cxet4a87eO0K g.clickable{cursor:pointer;}#mermaid-svg-K6S0cxet4a87eO0K g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-K6S0cxet4a87eO0K g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-K6S0cxet4a87eO0K .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-K6S0cxet4a87eO0K .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-K6S0cxet4a87eO0K .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-K6S0cxet4a87eO0K .dashed-line{stroke-dasharray:3;}#mermaid-svg-K6S0cxet4a87eO0K #compositionStart,#mermaid-svg-K6S0cxet4a87eO0K .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-K6S0cxet4a87eO0K #compositionEnd,#mermaid-svg-K6S0cxet4a87eO0K .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-K6S0cxet4a87eO0K #dependencyStart,#mermaid-svg-K6S0cxet4a87eO0K .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-K6S0cxet4a87eO0K #dependencyStart,#mermaid-svg-K6S0cxet4a87eO0K .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-K6S0cxet4a87eO0K #extensionStart,#mermaid-svg-K6S0cxet4a87eO0K .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-K6S0cxet4a87eO0K #extensionEnd,#mermaid-svg-K6S0cxet4a87eO0K .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-K6S0cxet4a87eO0K #aggregationStart,#mermaid-svg-K6S0cxet4a87eO0K .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-K6S0cxet4a87eO0K #aggregationEnd,#mermaid-svg-K6S0cxet4a87eO0K .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-K6S0cxet4a87eO0K .edgeTerminals{font-size:11px;}#mermaid-svg-K6S0cxet4a87eO0K :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 拿 1 1 骑 1 1 学生 -身份证 : 身份证信息 身份证信息 -序号 : int -名称 : string 自行车信息 -序号 : int -名称 : string 十、交互
可以将单击事件绑定到节点单击可以打开链接该链接将在新的浏览器选项卡中打开。
声明所有类后可以另起一行定义这些操作
action className reference tooltip
click className href url tooltipaction可以是linkclassName 是类的名称reference 可以是一个URL链接可选tooltip是一段鼠标悬浮后显示的文本
示例
mermaid
classDiagram
class Shapelink Shape http://www.github.com This is a tooltip for a link
class Shape2click Shape2 href http://www.github.com This is a tooltip for a link#mermaid-svg-GtJDjA1ckeFc1zz7 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GtJDjA1ckeFc1zz7 .error-icon{fill:#552222;}#mermaid-svg-GtJDjA1ckeFc1zz7 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-GtJDjA1ckeFc1zz7 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-GtJDjA1ckeFc1zz7 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-GtJDjA1ckeFc1zz7 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-GtJDjA1ckeFc1zz7 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-GtJDjA1ckeFc1zz7 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-GtJDjA1ckeFc1zz7 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-GtJDjA1ckeFc1zz7 .marker.cross{stroke:#333333;}#mermaid-svg-GtJDjA1ckeFc1zz7 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-GtJDjA1ckeFc1zz7 g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-GtJDjA1ckeFc1zz7 g.classGroup text .title{font-weight:bolder;}#mermaid-svg-GtJDjA1ckeFc1zz7 .nodeLabel,#mermaid-svg-GtJDjA1ckeFc1zz7 .edgeLabel{color:#131300;}#mermaid-svg-GtJDjA1ckeFc1zz7 .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-GtJDjA1ckeFc1zz7 .label text{fill:#131300;}#mermaid-svg-GtJDjA1ckeFc1zz7 .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-GtJDjA1ckeFc1zz7 .classTitle{font-weight:bolder;}#mermaid-svg-GtJDjA1ckeFc1zz7 .node rect,#mermaid-svg-GtJDjA1ckeFc1zz7 .node circle,#mermaid-svg-GtJDjA1ckeFc1zz7 .node ellipse,#mermaid-svg-GtJDjA1ckeFc1zz7 .node polygon,#mermaid-svg-GtJDjA1ckeFc1zz7 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-GtJDjA1ckeFc1zz7 .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-GtJDjA1ckeFc1zz7 g.clickable{cursor:pointer;}#mermaid-svg-GtJDjA1ckeFc1zz7 g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-GtJDjA1ckeFc1zz7 g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-GtJDjA1ckeFc1zz7 .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-GtJDjA1ckeFc1zz7 .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-GtJDjA1ckeFc1zz7 .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-GtJDjA1ckeFc1zz7 .dashed-line{stroke-dasharray:3;}#mermaid-svg-GtJDjA1ckeFc1zz7 #compositionStart,#mermaid-svg-GtJDjA1ckeFc1zz7 .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-GtJDjA1ckeFc1zz7 #compositionEnd,#mermaid-svg-GtJDjA1ckeFc1zz7 .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-GtJDjA1ckeFc1zz7 #dependencyStart,#mermaid-svg-GtJDjA1ckeFc1zz7 .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-GtJDjA1ckeFc1zz7 #dependencyStart,#mermaid-svg-GtJDjA1ckeFc1zz7 .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-GtJDjA1ckeFc1zz7 #extensionStart,#mermaid-svg-GtJDjA1ckeFc1zz7 .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-GtJDjA1ckeFc1zz7 #extensionEnd,#mermaid-svg-GtJDjA1ckeFc1zz7 .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-GtJDjA1ckeFc1zz7 #aggregationStart,#mermaid-svg-GtJDjA1ckeFc1zz7 .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-GtJDjA1ckeFc1zz7 #aggregationEnd,#mermaid-svg-GtJDjA1ckeFc1zz7 .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-GtJDjA1ckeFc1zz7 .edgeTerminals{font-size:11px;}#mermaid-svg-GtJDjA1ckeFc1zz7 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Shape Shape2 您可以使用 note 第一行\n第二行 在图表上添加注释。也可以使用: note for 类名 第一行\n第二行 为特定的类添加注释。 十一、使用场景实例
类图主要用于为系统建模。
示例代码
mermaid
classDiagram鸟 --| 动物 : 继承翅膀 2 --| 1 鸟 : 组合动物 .. 氧气 : 依赖动物 .. 水 : 依赖、class 动物 {interface有生命新陈代谢(氧气, 水)繁殖()}class 鸟 {羽毛有角质喙没有牙齿下蛋()}class 鸟 {羽毛有角质喙没有牙齿下蛋()}#mermaid-svg-HCVEd7VCiG02hBgx {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-HCVEd7VCiG02hBgx .error-icon{fill:#552222;}#mermaid-svg-HCVEd7VCiG02hBgx .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-HCVEd7VCiG02hBgx .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-HCVEd7VCiG02hBgx .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-HCVEd7VCiG02hBgx .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-HCVEd7VCiG02hBgx .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-HCVEd7VCiG02hBgx .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-HCVEd7VCiG02hBgx .marker{fill:#333333;stroke:#333333;}#mermaid-svg-HCVEd7VCiG02hBgx .marker.cross{stroke:#333333;}#mermaid-svg-HCVEd7VCiG02hBgx svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-HCVEd7VCiG02hBgx g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-HCVEd7VCiG02hBgx g.classGroup text .title{font-weight:bolder;}#mermaid-svg-HCVEd7VCiG02hBgx .nodeLabel,#mermaid-svg-HCVEd7VCiG02hBgx .edgeLabel{color:#131300;}#mermaid-svg-HCVEd7VCiG02hBgx .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-HCVEd7VCiG02hBgx .label text{fill:#131300;}#mermaid-svg-HCVEd7VCiG02hBgx .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-HCVEd7VCiG02hBgx .classTitle{font-weight:bolder;}#mermaid-svg-HCVEd7VCiG02hBgx .node rect,#mermaid-svg-HCVEd7VCiG02hBgx .node circle,#mermaid-svg-HCVEd7VCiG02hBgx .node ellipse,#mermaid-svg-HCVEd7VCiG02hBgx .node polygon,#mermaid-svg-HCVEd7VCiG02hBgx .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-HCVEd7VCiG02hBgx .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-HCVEd7VCiG02hBgx g.clickable{cursor:pointer;}#mermaid-svg-HCVEd7VCiG02hBgx g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-HCVEd7VCiG02hBgx g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-HCVEd7VCiG02hBgx .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-HCVEd7VCiG02hBgx .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-HCVEd7VCiG02hBgx .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-HCVEd7VCiG02hBgx .dashed-line{stroke-dasharray:3;}#mermaid-svg-HCVEd7VCiG02hBgx #compositionStart,#mermaid-svg-HCVEd7VCiG02hBgx .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HCVEd7VCiG02hBgx #compositionEnd,#mermaid-svg-HCVEd7VCiG02hBgx .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HCVEd7VCiG02hBgx #dependencyStart,#mermaid-svg-HCVEd7VCiG02hBgx .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HCVEd7VCiG02hBgx #dependencyStart,#mermaid-svg-HCVEd7VCiG02hBgx .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HCVEd7VCiG02hBgx #extensionStart,#mermaid-svg-HCVEd7VCiG02hBgx .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HCVEd7VCiG02hBgx #extensionEnd,#mermaid-svg-HCVEd7VCiG02hBgx .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HCVEd7VCiG02hBgx #aggregationStart,#mermaid-svg-HCVEd7VCiG02hBgx .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HCVEd7VCiG02hBgx #aggregationEnd,#mermaid-svg-HCVEd7VCiG02hBgx .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HCVEd7VCiG02hBgx .edgeTerminals{font-size:11px;}#mermaid-svg-HCVEd7VCiG02hBgx :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 继承 组合 2 1 依赖 依赖、 鸟 羽毛 有角质喙没有牙齿 羽毛 有角质喙没有牙齿 下蛋() 下蛋() «interface» 动物 有生命 新陈代谢(氧气, 水) 繁殖() 翅膀 氧气 水 十二、总结 Mermaid 方法渲染的类图包含图表类型声明、类、关系 Mermaid 类图支持类名、成员的定义并可以为成员声明修饰符及类型元数据 Mermaid 支持多种类型的关系可以为关系增加标签文本可以增加基数描述。 文章写作不易您的支持是我最大的动力请关注✨、点赞、收藏、评论。 无论是哪个阶段坚持努力都是成功的关键。不要停下脚步继续前行即使前路崎岖也请保持乐观和勇气。相信自己的能力你所追求的目标定会在不久的将来实现。加油
