How to write ER charts, Gantt charts, and pie charts in MarkDown

sequence

Mermaid (translated as mermaid in Chinese, like a mermaid flowing to form various diagrams), is a method to generate various diagrams in MarkDown with text in a specific format.

Followed by the blog on how to write UML diagrams in MarkDown that I wrote before , this blog will introduce how to draw ER diagrams, Gantt charts and pie charts.

ER diagram

ER diagram, also known as entity-relationship diagram (Entity Relationship Diagram), is a method of representing entity types, attributes and relationships, and is used to describe the conceptual model of the real world.

The composition of ER diagram

An ER diagram consists of the following three elements:

• 实体（Entity）: Data objects in the data model (that is, data tables), represented by cuboids, each entity has its own entity member (entity member) or entity object (entity instance), such as the student entity including Zhang San and Li Si wait.
• 属性（Attribute）: Attributes of an entity, such as a student has attributes such as name, student number, grade, etc., which are represented by ovals. Attributes are divided into unique attributes (Unique Attribute) and non-unique attributes. Unique attributes refer to the unique attributes that can be used to identify the entity instance Or the attribute of a member, indicated by an underline. Generally speaking, an entity has at least one unique attribute.
• 关系（Relationship）: It is used to represent the relationship between entities. For example, there is a certain relationship between the entity of the student and the entity of the grade table. Each student has his own grade table. This is a relationship, and the relationship is represented by a diamond.

type of relationship

There are 3 types of relationships:

• 1:1: 1 to 1 relationship. It means that for entity set A and entity set B, each entity in A has a relationship with at most one entity in B; conversely, each entity in entity set B has a relationship with at most one entity in entity set A.
• 1:N: 1-to-many relationship. It means that entity set A has a relationship with at least N (N>0) entities in entity set B; and each entity in entity set B has a relationship with at most one entity in entity set A.
• M:N: many-to-many relationship. A many-to-many relationship means that each entity in entity set A has a relationship with at least M (M>0) entities in entity set B, and each entity in entity set B has at least N ( N>0) entities have relations.

existence of relationship

The existence of a relationship is represented by the minimum cardinality, that is, the existence of an entity in a relationship. Existence is expressed as whether a certain attribute can be empty after being converted into a logical mode. The empty value is an ambiguous value, which is represented by NULL in the database management system.
In general, relationships have the following types of existence:

• 强制存在: Connected 划“1”, indicating 最小的基数为1. An entity is said to be mandatory if an instance of an entity at one end of the relationship must exist for instances of the other entities of the relationship.
• 可选存在: Connected 划“0”, indicating 最小基数为0. An entity is said to be optional if an instance of the entity at one end of the relationship is not required to exist for instances of the other entities of the relationship.
• 未知存在: Connected 不划“1”或“0”, indicating that it is not known whether it is mandatory or optional.

Grammar of relation

The relationship of each statement can be disassembled into the following three parts:

• the cardinality of the first entity relative to the second;
• whether the relationship confers "child" status on the entity;
• The cardinality of the second entity relative to the first entity.

The representation of the cardinal number is represented by two symbols, the outer symbol indicates the maximum value, and the inner symbol indicates the minimum value. The representation of the cardinality is shown in the table below:

lvalue	rvalue	illustrate
|o	o|	0 or 1
||	||	1
}o	o{	0 or more
}|	|{	1 or more

Simple example of ER diagram in Mermaid

sample

Add ``` (top left of the keyboard, share the same key with ~) in the front and back lines of the following text (in the code block) to generate the display results as shown in the figure below (note that you need to add the mermaid logo when using it, add it in behind the previous three dots).

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

Representation of Entities and Relationships

The syntax of the ER diagram in Mermaid is compatible with PlantUML, and each statement consists of the following parts:

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

for example:

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。