您当前的位置: 首页 >  ar

Kevin-Dev

暂无认证

  • 0浏览

    0关注

    544博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

【Android -- 写作工具】Markdown 类图

Kevin-Dev 发布时间:2020-06-02 22:02:22 ,浏览量:0

在这里插入图片描述

1. 前言

Markdown 的原生语法不支持绘制图形,但通过扩展模块,我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、”饼图” 等。

本节将重点介绍如何通过 Mermaid 绘制「类图」。

类图(Class diagrams)用来描述系统中静态对象的内容和关系。

类图是一种面向对象的建模形式。它是应用系统结构的概念模型,通常与开发时的代码有严格的对应关系。类视图也可以用于数据建模。

2. 语法详解

类图的核心要素有类和关系。

2.1 类图的「类」 类是类图中的核心组成,类的成员包括属性和方法,以及一些扩展信息。在类图中,一个类实例由三层组成:

  • 类名称,在类图的最顶端;
  • 类属性,在类图的中间层;
  • 类方法,在类图的最下层。

实例 1:

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

2.1.1 类的定义 类的定义有两种方式,第一种是形如 class Animal 这样的直接描述,另一种是通过关系来定义类,如 Vehicle 依赖关系..虚线连接

实例 6:

各种连线类型展示。

#mermaid-svg-vdwRFN43oMCA295g {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-vdwRFN43oMCA295g .error-icon{fill:#552222;}#mermaid-svg-vdwRFN43oMCA295g .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-vdwRFN43oMCA295g .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-vdwRFN43oMCA295g .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-vdwRFN43oMCA295g .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-vdwRFN43oMCA295g .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-vdwRFN43oMCA295g .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-vdwRFN43oMCA295g .marker{fill:#333333;stroke:#333333;}#mermaid-svg-vdwRFN43oMCA295g .marker.cross{stroke:#333333;}#mermaid-svg-vdwRFN43oMCA295g svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-vdwRFN43oMCA295g g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-vdwRFN43oMCA295g g.classGroup text .title{font-weight:bolder;}#mermaid-svg-vdwRFN43oMCA295g .nodeLabel,#mermaid-svg-vdwRFN43oMCA295g .edgeLabel{color:#131300;}#mermaid-svg-vdwRFN43oMCA295g .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-vdwRFN43oMCA295g .label text{fill:#131300;}#mermaid-svg-vdwRFN43oMCA295g .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-vdwRFN43oMCA295g .classTitle{font-weight:bolder;}#mermaid-svg-vdwRFN43oMCA295g .node rect,#mermaid-svg-vdwRFN43oMCA295g .node circle,#mermaid-svg-vdwRFN43oMCA295g .node ellipse,#mermaid-svg-vdwRFN43oMCA295g .node polygon,#mermaid-svg-vdwRFN43oMCA295g .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-vdwRFN43oMCA295g .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-vdwRFN43oMCA295g g.clickable{cursor:pointer;}#mermaid-svg-vdwRFN43oMCA295g g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-vdwRFN43oMCA295g g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-vdwRFN43oMCA295g .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-vdwRFN43oMCA295g .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-vdwRFN43oMCA295g .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-vdwRFN43oMCA295g .dashed-line{stroke-dasharray:3;}#mermaid-svg-vdwRFN43oMCA295g #compositionStart,#mermaid-svg-vdwRFN43oMCA295g .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vdwRFN43oMCA295g #compositionEnd,#mermaid-svg-vdwRFN43oMCA295g .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vdwRFN43oMCA295g #dependencyStart,#mermaid-svg-vdwRFN43oMCA295g .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vdwRFN43oMCA295g #dependencyStart,#mermaid-svg-vdwRFN43oMCA295g .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vdwRFN43oMCA295g #extensionStart,#mermaid-svg-vdwRFN43oMCA295g .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vdwRFN43oMCA295g #extensionEnd,#mermaid-svg-vdwRFN43oMCA295g .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vdwRFN43oMCA295g #aggregationStart,#mermaid-svg-vdwRFN43oMCA295g .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vdwRFN43oMCA295g #aggregationEnd,#mermaid-svg-vdwRFN43oMCA295g .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vdwRFN43oMCA295g .edgeTerminals{font-size:11px;}#mermaid-svg-vdwRFN43oMCA295g :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

实例 7:

在类图连接线上增加标签。

#mermaid-svg-HU5mhkOILs5D3fYT {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-HU5mhkOILs5D3fYT .error-icon{fill:#552222;}#mermaid-svg-HU5mhkOILs5D3fYT .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-HU5mhkOILs5D3fYT .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-HU5mhkOILs5D3fYT .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-HU5mhkOILs5D3fYT .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-HU5mhkOILs5D3fYT .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-HU5mhkOILs5D3fYT .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-HU5mhkOILs5D3fYT .marker{fill:#333333;stroke:#333333;}#mermaid-svg-HU5mhkOILs5D3fYT .marker.cross{stroke:#333333;}#mermaid-svg-HU5mhkOILs5D3fYT svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-HU5mhkOILs5D3fYT g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-HU5mhkOILs5D3fYT g.classGroup text .title{font-weight:bolder;}#mermaid-svg-HU5mhkOILs5D3fYT .nodeLabel,#mermaid-svg-HU5mhkOILs5D3fYT .edgeLabel{color:#131300;}#mermaid-svg-HU5mhkOILs5D3fYT .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-HU5mhkOILs5D3fYT .label text{fill:#131300;}#mermaid-svg-HU5mhkOILs5D3fYT .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-HU5mhkOILs5D3fYT .classTitle{font-weight:bolder;}#mermaid-svg-HU5mhkOILs5D3fYT .node rect,#mermaid-svg-HU5mhkOILs5D3fYT .node circle,#mermaid-svg-HU5mhkOILs5D3fYT .node ellipse,#mermaid-svg-HU5mhkOILs5D3fYT .node polygon,#mermaid-svg-HU5mhkOILs5D3fYT .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-HU5mhkOILs5D3fYT .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-HU5mhkOILs5D3fYT g.clickable{cursor:pointer;}#mermaid-svg-HU5mhkOILs5D3fYT g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-HU5mhkOILs5D3fYT g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-HU5mhkOILs5D3fYT .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-HU5mhkOILs5D3fYT .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-HU5mhkOILs5D3fYT .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-HU5mhkOILs5D3fYT .dashed-line{stroke-dasharray:3;}#mermaid-svg-HU5mhkOILs5D3fYT #compositionStart,#mermaid-svg-HU5mhkOILs5D3fYT .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HU5mhkOILs5D3fYT #compositionEnd,#mermaid-svg-HU5mhkOILs5D3fYT .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HU5mhkOILs5D3fYT #dependencyStart,#mermaid-svg-HU5mhkOILs5D3fYT .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HU5mhkOILs5D3fYT #dependencyStart,#mermaid-svg-HU5mhkOILs5D3fYT .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HU5mhkOILs5D3fYT #extensionStart,#mermaid-svg-HU5mhkOILs5D3fYT .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HU5mhkOILs5D3fYT #extensionEnd,#mermaid-svg-HU5mhkOILs5D3fYT .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HU5mhkOILs5D3fYT #aggregationStart,#mermaid-svg-HU5mhkOILs5D3fYT .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HU5mhkOILs5D3fYT #aggregationEnd,#mermaid-svg-HU5mhkOILs5D3fYT .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-HU5mhkOILs5D3fYT .edgeTerminals{font-size:11px;}#mermaid-svg-HU5mhkOILs5D3fYT :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

实例 8:

不同基数关系的定义。

#mermaid-svg-3EMEZgLS8C4kdvTU {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3EMEZgLS8C4kdvTU .error-icon{fill:#552222;}#mermaid-svg-3EMEZgLS8C4kdvTU .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-3EMEZgLS8C4kdvTU .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-3EMEZgLS8C4kdvTU .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-3EMEZgLS8C4kdvTU .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-3EMEZgLS8C4kdvTU .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-3EMEZgLS8C4kdvTU .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-3EMEZgLS8C4kdvTU .marker{fill:#333333;stroke:#333333;}#mermaid-svg-3EMEZgLS8C4kdvTU .marker.cross{stroke:#333333;}#mermaid-svg-3EMEZgLS8C4kdvTU svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-3EMEZgLS8C4kdvTU g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-3EMEZgLS8C4kdvTU g.classGroup text .title{font-weight:bolder;}#mermaid-svg-3EMEZgLS8C4kdvTU .nodeLabel,#mermaid-svg-3EMEZgLS8C4kdvTU .edgeLabel{color:#131300;}#mermaid-svg-3EMEZgLS8C4kdvTU .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-3EMEZgLS8C4kdvTU .label text{fill:#131300;}#mermaid-svg-3EMEZgLS8C4kdvTU .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-3EMEZgLS8C4kdvTU .classTitle{font-weight:bolder;}#mermaid-svg-3EMEZgLS8C4kdvTU .node rect,#mermaid-svg-3EMEZgLS8C4kdvTU .node circle,#mermaid-svg-3EMEZgLS8C4kdvTU .node ellipse,#mermaid-svg-3EMEZgLS8C4kdvTU .node polygon,#mermaid-svg-3EMEZgLS8C4kdvTU .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-3EMEZgLS8C4kdvTU .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-3EMEZgLS8C4kdvTU g.clickable{cursor:pointer;}#mermaid-svg-3EMEZgLS8C4kdvTU g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-3EMEZgLS8C4kdvTU g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-3EMEZgLS8C4kdvTU .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-3EMEZgLS8C4kdvTU .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-3EMEZgLS8C4kdvTU .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-3EMEZgLS8C4kdvTU .dashed-line{stroke-dasharray:3;}#mermaid-svg-3EMEZgLS8C4kdvTU #compositionStart,#mermaid-svg-3EMEZgLS8C4kdvTU .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-3EMEZgLS8C4kdvTU #compositionEnd,#mermaid-svg-3EMEZgLS8C4kdvTU .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-3EMEZgLS8C4kdvTU #dependencyStart,#mermaid-svg-3EMEZgLS8C4kdvTU .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-3EMEZgLS8C4kdvTU #dependencyStart,#mermaid-svg-3EMEZgLS8C4kdvTU .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-3EMEZgLS8C4kdvTU #extensionStart,#mermaid-svg-3EMEZgLS8C4kdvTU .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-3EMEZgLS8C4kdvTU #extensionEnd,#mermaid-svg-3EMEZgLS8C4kdvTU .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-3EMEZgLS8C4kdvTU #aggregationStart,#mermaid-svg-3EMEZgLS8C4kdvTU .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-3EMEZgLS8C4kdvTU #aggregationEnd,#mermaid-svg-3EMEZgLS8C4kdvTU .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-3EMEZgLS8C4kdvTU .edgeTerminals{font-size:11px;}#mermaid-svg-3EMEZgLS8C4kdvTU :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
1
*
1
1..*
包含
many
顾客
票据
学生
课程
银河
星星

2.3 类修饰符 我们可以通过标签文本描述类的元数据,例如:抽象类、接口、服务、枚举等。

元数据的通过「双尖括号」定义,有两种写法:

实例 9:

在类名称下面另起一行:

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

实例 10:

在嵌套结构内的首行定义:

#mermaid-svg-zJossh8pUG6yPbYx {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-zJossh8pUG6yPbYx .error-icon{fill:#552222;}#mermaid-svg-zJossh8pUG6yPbYx .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-zJossh8pUG6yPbYx .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-zJossh8pUG6yPbYx .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-zJossh8pUG6yPbYx .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-zJossh8pUG6yPbYx .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-zJossh8pUG6yPbYx .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-zJossh8pUG6yPbYx .marker{fill:#333333;stroke:#333333;}#mermaid-svg-zJossh8pUG6yPbYx .marker.cross{stroke:#333333;}#mermaid-svg-zJossh8pUG6yPbYx svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-zJossh8pUG6yPbYx g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-zJossh8pUG6yPbYx g.classGroup text .title{font-weight:bolder;}#mermaid-svg-zJossh8pUG6yPbYx .nodeLabel,#mermaid-svg-zJossh8pUG6yPbYx .edgeLabel{color:#131300;}#mermaid-svg-zJossh8pUG6yPbYx .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-zJossh8pUG6yPbYx .label text{fill:#131300;}#mermaid-svg-zJossh8pUG6yPbYx .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-zJossh8pUG6yPbYx .classTitle{font-weight:bolder;}#mermaid-svg-zJossh8pUG6yPbYx .node rect,#mermaid-svg-zJossh8pUG6yPbYx .node circle,#mermaid-svg-zJossh8pUG6yPbYx .node ellipse,#mermaid-svg-zJossh8pUG6yPbYx .node polygon,#mermaid-svg-zJossh8pUG6yPbYx .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-zJossh8pUG6yPbYx .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-zJossh8pUG6yPbYx g.clickable{cursor:pointer;}#mermaid-svg-zJossh8pUG6yPbYx g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-zJossh8pUG6yPbYx g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-zJossh8pUG6yPbYx .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-zJossh8pUG6yPbYx .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-zJossh8pUG6yPbYx .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-zJossh8pUG6yPbYx .dashed-line{stroke-dasharray:3;}#mermaid-svg-zJossh8pUG6yPbYx #compositionStart,#mermaid-svg-zJossh8pUG6yPbYx .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-zJossh8pUG6yPbYx #compositionEnd,#mermaid-svg-zJossh8pUG6yPbYx .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-zJossh8pUG6yPbYx #dependencyStart,#mermaid-svg-zJossh8pUG6yPbYx .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-zJossh8pUG6yPbYx #dependencyStart,#mermaid-svg-zJossh8pUG6yPbYx .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-zJossh8pUG6yPbYx #extensionStart,#mermaid-svg-zJossh8pUG6yPbYx .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-zJossh8pUG6yPbYx #extensionEnd,#mermaid-svg-zJossh8pUG6yPbYx .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-zJossh8pUG6yPbYx #aggregationStart,#mermaid-svg-zJossh8pUG6yPbYx .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-zJossh8pUG6yPbYx #aggregationEnd,#mermaid-svg-zJossh8pUG6yPbYx .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-zJossh8pUG6yPbYx .edgeTerminals{font-size:11px;}#mermaid-svg-zJossh8pUG6yPbYx :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
«interface»
形状
定点数
制()
3. 使用场景及实例

类图主要用于为系统建模。

实例 11:

一个关于动物的类图。

#mermaid-svg-I3RR1YNNqdz4PwJv {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-I3RR1YNNqdz4PwJv .error-icon{fill:#552222;}#mermaid-svg-I3RR1YNNqdz4PwJv .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-I3RR1YNNqdz4PwJv .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-I3RR1YNNqdz4PwJv .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-I3RR1YNNqdz4PwJv .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-I3RR1YNNqdz4PwJv .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-I3RR1YNNqdz4PwJv .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-I3RR1YNNqdz4PwJv .marker{fill:#333333;stroke:#333333;}#mermaid-svg-I3RR1YNNqdz4PwJv .marker.cross{stroke:#333333;}#mermaid-svg-I3RR1YNNqdz4PwJv svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-I3RR1YNNqdz4PwJv g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-I3RR1YNNqdz4PwJv g.classGroup text .title{font-weight:bolder;}#mermaid-svg-I3RR1YNNqdz4PwJv .nodeLabel,#mermaid-svg-I3RR1YNNqdz4PwJv .edgeLabel{color:#131300;}#mermaid-svg-I3RR1YNNqdz4PwJv .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-I3RR1YNNqdz4PwJv .label text{fill:#131300;}#mermaid-svg-I3RR1YNNqdz4PwJv .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-I3RR1YNNqdz4PwJv .classTitle{font-weight:bolder;}#mermaid-svg-I3RR1YNNqdz4PwJv .node rect,#mermaid-svg-I3RR1YNNqdz4PwJv .node circle,#mermaid-svg-I3RR1YNNqdz4PwJv .node ellipse,#mermaid-svg-I3RR1YNNqdz4PwJv .node polygon,#mermaid-svg-I3RR1YNNqdz4PwJv .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-I3RR1YNNqdz4PwJv .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-I3RR1YNNqdz4PwJv g.clickable{cursor:pointer;}#mermaid-svg-I3RR1YNNqdz4PwJv g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-I3RR1YNNqdz4PwJv g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-I3RR1YNNqdz4PwJv .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-I3RR1YNNqdz4PwJv .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-I3RR1YNNqdz4PwJv .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-I3RR1YNNqdz4PwJv .dashed-line{stroke-dasharray:3;}#mermaid-svg-I3RR1YNNqdz4PwJv #compositionStart,#mermaid-svg-I3RR1YNNqdz4PwJv .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-I3RR1YNNqdz4PwJv #compositionEnd,#mermaid-svg-I3RR1YNNqdz4PwJv .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-I3RR1YNNqdz4PwJv #dependencyStart,#mermaid-svg-I3RR1YNNqdz4PwJv .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-I3RR1YNNqdz4PwJv #dependencyStart,#mermaid-svg-I3RR1YNNqdz4PwJv .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-I3RR1YNNqdz4PwJv #extensionStart,#mermaid-svg-I3RR1YNNqdz4PwJv .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-I3RR1YNNqdz4PwJv #extensionEnd,#mermaid-svg-I3RR1YNNqdz4PwJv .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-I3RR1YNNqdz4PwJv #aggregationStart,#mermaid-svg-I3RR1YNNqdz4PwJv .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-I3RR1YNNqdz4PwJv #aggregationEnd,#mermaid-svg-I3RR1YNNqdz4PwJv .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-I3RR1YNNqdz4PwJv .edgeTerminals{font-size:11px;}#mermaid-svg-I3RR1YNNqdz4PwJv :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
继承
组合
2
1
依赖
依赖
+羽毛
+有角质喙没有牙齿
+羽毛
+有角质喙没有牙齿
+下蛋()
+下蛋()
«interface»
动物
+有生命
+新陈代谢(氧气, 水)
+繁殖()
翅膀
氧气
4. 小结
  • Mermaid 方法渲染的类图包含图表类型声明、类、关系;
  • Mermaid 类图支持类名、成员的定义,并可以为成员声明修饰符及类型元数据;
  • Mermaid 支持多种类型的关系,可以为关系增加标签文本,可以增加基数描述。
关注
打赏
1658837700
查看更多评论
立即登录/注册

微信扫码登录

0.0399s