序

Mermaid(中译为美人鱼，就好比一条美人鱼在流动构成了各种的图),是一种在MarkDown中以特定格式的文字生成各种图示的方法。

接着之前写过的MarkDown中写UML图的方法这篇博客,这篇博客将为大家介绍如何绘制E-R图、甘特图以及饼图。

E-R 图

E-R图也叫做实体-关系图(Entity Relationship Diagram)，是一种表示实体类型、属性和关系的方法，用来描述现实世界的概念模型。

E-R图的构成

E-R图由以下3个要素构成：

• 实体（Entity）：数据模型中的数据对象（即数据表），用长方体来表示，每个实体都有自己的实体成员（entity member）或者说实体对象（entity instance），如学生实体里包括张三、李四等。
• 属性（Attribute）：实体所具有的属性，如学生具有姓名、学号、年级等属性，用椭圆形表示，属性分为唯一属性（ Unique Attribute）和非唯一属性，唯一属性指的是唯一可用来标识该实体实例或者成员的属性，用下划线表示，一般来说实体至少有一个唯一属性。
• 关系（Relationship）：用于表现实体与实体之间的联系，如学生的实体和成绩表的实体之间有一定的联系，每个学生都有自己的成绩表，这就是一种关系，关系用菱形来表示。

关系的类型

关系有如下3种类型：

• 1:1：1对1关系。指对于实体集A与实体集B，A中的每一个实体至多与B中一个实体有关系；反之，在实体集B中的每个实体至多与实体集A中一个实体有关系。
• 1:N：1对多关系。指实体集A与实体集B中至少有N(N>0)个实体有关系；并且实体集B中每一个实体至多与实体集A中一个实体有关系。
• M:N：多对多关系。多对多关系是指实体集A中的每一个实体与实体集B中至少有M(M>0)个实体有关系，并且实体集B中的每一个实体与实体集A中的至少N（N>0）个实体有关系。

关系的存在性

关系的存在性用最小基数来表示，即一个实体在一个联系中的存在性。存在性在转换成逻辑模式后表现为某个属性是否可以为空值，空值为不明确的值，在数据库管理系统中用 NULL 表示。
一般地，关系有如下几种存在性：

• 强制存在：连线上划“1”，表示最小的基数为1。如果联系一端的实体的实例对于该联系的其他实体的实例必须存在，则称该实体为强制的。
• 可选存在：连线上划“0”，表示最小基数为0。如果联系一端的实体的实例对于该联系的其他实体的实例不要求一定存在，则称该实体为可选的。
• 未知存在：连线上不划“1”或“0”，表示目前不知道是强制还是可选的。

关系的语法

每一个语句的关系都可以拆解为如下的3个部分：

• 第一个实体相对于第二个实体的基数；
• 这种关系是否赋予了实体的“孩子”身份；
• 第二个实体相对于第一个实体的基数。

基数的表示用两个符号来表示，外侧的符号表示最大值，里侧的符号表示最小值。基数的表示如下表所示：

左值	右值	说明
|o	o|	0或1
||	||	1
}o	o{	0或更多
}|	|{	1或更多

Mermaid中E-R图的简单例子

样例

在下面这段文字（代码块中）的前面和后面一行各自添加```（键盘左上，与~共用一个键）即可生成如下图的展示结果(注意在使用时需要增加mermaid标识，加在前面那三点的后面)。

erDiagram
	Customer{
        int CustermerID PK
        string name
        string adress
        string tele
    }
    OrderList{
    	int OrderID PK
    	int CustermerID FK
    	int ProductID FK
    	int num
    	datetime Date
    }
    Product{
    	int ProductID PK
    	string name
    	string size
    	float price
    }
    Customer o|--o{ OrderList: Order
    OrderList||--|{ Product : contains

实体与关系的表示

Mermaid中E-R图的语法兼容PlantUML，每个语句都由以下的部分组成：

<实体A> [<关系> <实体B> : <关系上的标签>]

举个例子：

erDiagram
	Student||--|{ Department: study

“系”与“学生”两个实体之间的联系是一对多联系，换句话说“学生”和“系”之间的联系是多对一联系。一个学生必须属于一个系，并且只能属于一个系，不能属于零个系，所以从“学生”实体至“系”实体的基数为“1,1”，从联系的另一方向考虑，一个系可以拥有多个学生，也可以没有任何学生，即零个学生，所以该方向联系的基数就为“0,n”。

属性的表示

对于实体属性的表示，可以在实体名后用{}来包含：

erDiagram
    PERSON {
        string firstName
        string lastName
        int age
    }

特殊约束关系的表示

如果该属性有特殊的约束关系，如PK(主键)、FK(主外键约束)、UK(唯一约束)等，那么在定义好的属性后加一个空格写上即可。如果一个属性同时拥有多个约束，那么使用,分隔。

erDiagram
    Driver{
        int LicenseID PK
        string Name
        string Address
        string Telephone
    }
    Police{
    int PoliceID PK
    string Name
    }
    Vehicle{
    int VehicleID PK
    string Model
    string Producer
    datetime Date
    }
    Citation{
    int CitationID PK
    int LicenseID FK
    int VehicleID FK
    int PoliceID FK
    datetime Date
    string Adress
    string Penalty
    }
    Vehicle ||--o{ Citation:Invove
    Driver ||--o{ Citation:Receive
    Police ||--o{ Citation:Handle

甘特图

甘特图是柱状图的一种，通常用来表示一个项目（任务）的推进进度以及项目（任务）完成所需的时间。

甘特图把每个项目（任务）记录为一个从左到右的连续条形图。其中，X轴表示时间，Y轴用于记录不同任务以及完成任务的顺序。

Mermaid中甘特图的简单例子

样例

在下面这段文字（代码块中）的前面和后面一行各自添加```（键盘左上，与~共用一个键）即可生成如下图的展示结果(注意在使用时需要增加mermaid标识，加在前面那三点的后面)。

gantt
    title 一个甘特图的例子
    dateFormat  YYYY-MM-DD
    section Section
    任务1 :a1, 2023-03-01, 30d
    任务2 :after a1  , 20d
    section Another
    任务3 : 2023-03-12  , 12d
    任务4 : 24d

甘特图的标题

甘特图的标题是可选的，可以用来描述图表的总任务名字。
使用关键字title来定义一个甘特图的标题。

子任务的表示

一个甘特图用于表示一个总任务，而总任务可以划分为若干个子任务。
使用关键字section来标识不同的子任务。

时间格式的表示

关键字dateFormat用来定义输入甘特图的时间格式。而这些时间格式的表现方式由关键字axisFormat来决定。

输入的时间格式如下表所示：

输入	示例	说明
YYYY	2023	4位数的年份
YY	23	2位数的年份
Q	1..4	季度
M MM	1..12	月份
MMM MMMM	January..Dec	英文表示的月份
D DD	1..31	月份的天数
Do	1st..31st	带序数的月份天数
DDD DDDD	1..365	年份的天数
X	1410715640.579	时间戳
x	1410715640579	毫秒时间戳
H HH	0..23	24小时制时间
h hh	1..12	12小时制时间
a A	am pm	午前或午后
m mm	0..59	分钟
s ss	0..59	秒钟

日期格式的输出如下表所示：

格式	含义
%a	工作日简称
%A	工作日全称
%b	月份简称
%B	月份全称
%c	日期和时间，即“%a %b %e %H:%M:%S %Y”
%d	十进制数表达的月份的天数[01,31]
%e	十进制数表达的月份的天数[ 1,31]，相当于%_d
%H	十进制数表达的24小时制[00,23]
%I	十进制数表达的12小时制[01,12]
%j	十进制数表达的一年中的天[001,366]
%m	十进制数表达的月份[01,12]
%M	十进制数表达的分钟[00,59]
%L	十进制数表达的毫秒[000,999]
%p	AM 或 PM
%S	十进制数表达的秒[00,61]
%U	十进制数表达的一年的星期数(周日作为第一天)[00,53]
%w	十进制数表达的工作日[0(周天),6]
%W	十进制数表达的一年的星期数(周一作为第一天)[00,53]
%x	日期，即“%m/%d/%Y”
%X	时间，即“%H:%M:%S”
%y	不能用十进制数表达世纪的年份[00,99]
%Y	可以用十进制数表达世纪的年份
%Z	时区偏移量，如“-0700”
%%	%字符

注：以上的日期格式的输出表在CSDN中的MarkDown不适用（即axisFormat关键字无效），但官网Mermaid语法是支持的。

饼 图

饼图是圆形的统计图，它被分成若干个切片来展示数字的占比。饼图中，每个切片的弧长与它所代表的数量成正比。

Mermaid中饼图的简单例子

样例

在下面这段文字（代码块中）的前面和后面一行各自添加```（键盘左上，与~共用一个键）即可生成如下图的展示结果(注意在使用时需要增加mermaid标识，加在前面那三点的后面)。

pie title 志愿者领养的宠物占比
    "小狗" : 386
    "小猫" : 85
    "仓鼠" : 15

在Mermaid中画饼图非常简单，只需要使用pie关键字作为开始，后面可跟上关键字title定义饼图的标题。

然后，就是将数据以数字或是小数的方式呈现。饼图中，各切片将按照与标签相同的顺序按顺时针的方向排序。

以小数表示占比

上述样例中是以数字作为演示的，接下来的这个例子用小数展示饼图的用法：

其中在关键字pie后使用了showData关键字，这表示在图例中同时也有数据占比的显示。

需要注意的是，如果以百分比来表示数据，那么所有数据加起来需要为1。