Markdown流程图

1. 前言

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

本节将重点介绍如何通过 Mermaid 绘制「类图」。
类图(Class diagrams)用来描述系统中静态对象的内容和关系。
类图是一种面对对象的建模形式。它是应用系统结构的概念模型，通常与开发时的代码有严格的对应关系。类视图也可以用于数据建模。

2. 语法详解

2.1 类图的[类]

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

• 类名称，在类图的最顶端；
• 类属性，在类图的中间层；
• 类方法，在类图的最下层；
  实例一：
  代码：

```mermaid
classDiagram
	class 动物
	动物 : string 标签
	动物 : 吃()
``

渲染：

2.1.1类的定义
类的定义方式由两种方式，第一种是形如class Animal这样的直接描述，另一种是通过关系来定义类，如Vehicle <|-- Car
实例二：
代码：

```mermaid
classDiagram
class 动物
交通工具 <|-- 小汽车
``

渲染：

2.1.2类成员的定义
类成员包含属性，方法；区分属性和方法的语法以来于是否以()结尾，没有括号的成员会被解释为属性，有括号的成员会被解释为方法。
类成员有两种定义方法。

实例三：
使用:声明类成员
代码：

```mermaid
classDiagram
  class 银行账户
  银行账户 : +String 户主
  银行账户 : +BigDecimal 余额
  银行账户 : +存(数量)
  银行账户 : +取(数量)
``

渲染：

实例四：
使用{}大括号确定类对象的成员描述。

```mermaid
classDiagram
  class 银行账户 {
 +String 户主
 +BigDecimal 余额
 +存(数量) bool
 +取(数量)
  }
``

渲染：

对于CSDN编辑器{}不支持这种写法所以没有改变。
成员的作用域作为可选项，定义是在成员的开头，有以下四种：

• +Public
• -Private
• #Protected
• ~Package/Internal
  除此之外，通过在()后面增加*和$，可以用来描述方法成员的抽象或静态属性。

2.2 类图中的关系

类图中类之间的逻辑关系由连接线表示，定义的形式如：[类A][箭头][类B]:标签文字。
不同的逻辑关系定义如下：

实例五：
代码：

```mermaid
classDiagram
  classA <|-- classB
  classC *-- classD
  classE o-- classF
  classG <-- classH
  classI -- classJ
  classK <.. classL
  classM <|.. classN
  classO .. classP
``

渲染：

还可以加上关系标签
实例六：
代码：

​```mermaid
classDiagram
  classA --|> classB : 继承
  classC --* classD : 组成
  classE --o classF : 集合
  classG --> classH : 关联
  classI -- classJ : 实线连接
  classK ..> classL : 依赖
  classM ..|> classN : 实现
  classO .. classP : 虚线连接
​``

渲染：

实例七：
不同基数关系的定义
代码：

​```mermaid
classDiagram
 顾客 "1" --> "\*" 票据
 学生 "1" --> "1..\*" 课程
 银河 --> "many" 星星 : 包含
​``

渲染：

2.3 类修饰符

我们可以通过标签文本描述类的元数据，例如：抽象类、接口、服务、枚举等。
元数据的通过<< >>定义，由两种写法

实例九：
在类名称下面另起一行
代码：

​```mermaid
classDiagram
  class 形状
  <<interface>> 形状
​``

渲染：

使用场景及实例

类图主要用于为系统建模

实例十：
一个关于动物的类图。
代码：

​```mermaid
classDiagram
 鸟 --|> 动物 : 继承
  翅膀 "2" --> "1" 鸟 : 组合
  动物 ..> 氧气 : 依赖
  动物 ..> 水 : 依赖
  
 class 动物 {
 <<interface>>
 +有生命
 +新陈代谢(氧气, 水)
 +繁殖()
 }
    
 class 鸟 {
 +羽毛
 +有角质喙没有牙齿
 +下蛋()
 }
 class 鸟 {
 +羽毛
 +有角质喙没有牙齿
 +下蛋()
 }
​``

渲染：

注意

代码中：最后的[``]应为[```]，自己复制的时候注意加上。

小结

如果对您有帮助，请您点赞、收藏、关注、转发，让更多的人看到。

其他文章

点击此处查看

👉Markdown段落的空行缩进用法
👉Markdown表格的使用
👉Markdown语法字体字号讲解
👉Markdown语法字体字号讲解
👉Markdown如何填充前景色、背景色
👉Markdown代码块，超链接，图片的插入
👉Markdown如何添加任务列表-复选框的添加
👉Markdown中特殊符号的使用
👉Markdown实现代码高亮，注释代码
👉Markdown注释的用法

快来试试吧🥰