MarkDown语言

参考

• 参考：超级好用的Markdown编辑器【推荐】
• 参考：主流 Markdown 编辑器推荐-知乎

工具参考

• 参考：https://typora.io/
• 参考：Haroopad（能够有Markdown语法提示，且支持VIM模式）
• 参考：MarkdownPad
• 参考：Atom（支持多种插件 ）
• 参考：https://caret.io/
• 参考：有道云在线Markdown编辑器

语言参考

• 参考：https://markdown.com.cn/basic-syntax/
• 参考：Markdown 教程
• 参考：typora 画流程图、时序图(顺序图)、甘特图 - RUNOOB.COM
• 参考：Markdown 流程图 - IMOOC *
• 参考：Markdown绘制流程图的方法 - JackPeng博客

日志

Markdown是一种轻量级标记语言，创始人为約翰·格魯伯（英语：John Gruber）。 它允许人们“使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档”。 这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。

辅助线是文字格式的一种，常见形式如下划线和中划线，下划线可用于圈出文字中需要注意的部分，删除线可用于表示文字中已经失效的内容。

Markdown 语法里的辅助线包含「中划线（删除线）」一种形式，其他形式的辅助线要通过 HTML 标签进行扩展。中划线使用 「波浪线 ~」来描述。

HTML 标签中 ~~~~ 标签意义为 「删除」，`` 标签意义为 「插入」。删除用一条中划线代表已删除的内容，插入用一条下划线代表新插入的文本。通常删除线和插入线代表文章的修订过程，我们输出的文章要尽量避免使用太多辅助线效果。

1）中划线语法

在 Markdown 文件中，被「波浪线 “~”」包括的内容会增加中划线效果。

删除线会被渲染成 html 的 del 标签：<del>删除线</del>

这是一个删除线

~~这是一条删除线~~

当删除线内部紧跟 "空格" 时，删除线效果会失效。

~~有效的删除线~~

~~失效的删除线 ~~

~~ 失效的删除线 ~~

~~ 失效的删除线~~

这是一个删除线

这是一条删除线

当删除线内部紧跟 "空格" 时，删除线效果会失效。

有效的删除线

~~失效的删除线 ~~

~~ 失效的删除线 ~~

~~ 失效的删除线~~

2）下划线语法

Markdown 的原生语法没有定义 “下划线” ，因为 “下划线” 效果容易和 “超链接” 相混淆。如果需要在文章中添加下划线，需要使用 HTML 标签。

下划线使用 html 语法的 ins 标签实现

<ins>这是一个下划线</ins>

下划线使用 html 语法的 ins 标签实现

这是一个下划线

字体是丰富排版效果的主要方式。一篇文章中会通过不同的字体字号来区分文字的作用，例如使用「黑体」，「一号字」作为标题，使用「宋体」、「四号字」作为正文等。

Markdown 使普通文本具有格式，但它的原生语法并不支持修改字体、字号。为了实现丰富文字样式的需求，我们需要通过增加 HTML 标签实现此类效果。

1）改变字体

（1）修改局部字体

在 Markdown 文件中，建议使用 font 标签的 face 属性修改文字字体。

这里是默认字体

<font face="HEI">这里是黑体</font>

<font face="KAI">这里是楷体</font>

<font face="GB18030 Bitmap">这里是扩展字体</font>

<style>
p {font-size: 2rem;}
</style>

（2）常用字体

字体在不同环境中支持程度不同，表现结果可能也不同。在设计上，尽量选择较为通用的字体。以下是一些 Web 常用中文字体：

2）改变字号

Markdown 文档中的字号定义有三种主要方式，第一种是使用 <font> 标签；第二种通过 <big> 或者 <small> 标签；第三种是通过修改 style 样式实现。

（1）使用 <font> 标签 size 属性修改局部字号

这里是默认正文字号

<font size="1">1号字 最小</font>

<font size="2">2号字</font>

<font size="3">3号字 默认</font>

<font size="4">4号字</font>

<font size="5">5号字</font>

<font size="6">6号字</font>

<font size="7">7号字 最大</font>

（2）使用 <big> 和 <small> 标签修改局部字号

这段文字里既包含<big>放大了的文字</big>，也包含<small>缩小了的文字</small>

3）全局字体、字号的设置

使用 style 样式修改全局字体和字号。

#### 使用 `style` 修改字体字号

# WORD中常用的一号宋体标题

## WORD中常用的二号宋体标题

### WORD中常用的三号宋体标题

Word 中常用的四号正文楷体

<style>
h1 { font: 26pt song !important; }
h2 { font: 22pt song !important; }
h3 { font: 16pt song !important; }
p { font: 14pt kai !important; }
</style>

颜色可以使普通文字表达出更深刻的含义，比如红色用于醒目与警示、绿色用于表达良好与正常等。

Markdown 使普通文本具有格式，但它的原生语法并不支持修改前景色和背景色。为了实现丰富文本颜色的需求，我们需要通过增加 HTML 标签实现此类效果。

1）前背景

在 Markdown 文件中，建议使用 <font> 标签的 color 属性修改文字颜色。

举例1：

<font color="red">红色</font>
<font color="green">绿色</font>
<font color="blue">蓝色</font>

<font color="rgb(200, 100, 100)">使用 rgb 颜色值</font>

<font color="#FF00BB">使用十六进制颜色值</font>

红色
绿色
蓝色

使用 rgb 颜色值

使用十六进制颜色值

除了修改 color 属性外，还可以使用 style 样式属性修改文字颜色。

举例2：

<font style="color: red">红色</font>
<font style="color: green">绿色</font>
<font style="color: blue">蓝色</font>

<font style="color: rgb(200,100,100)">使用 rgb 颜色值</font>

<font style="color: #FF00BB">使用十六进制颜色值</font>

红色
绿色
蓝色

使用 rgb 颜色值

使用十六进制颜色值

2）背景色

Markdown 文档中定义文字背景色需要通过修改 style 样式实现。

<font style="background: red">红色</font>
<font style="background: green">绿色</font>
<font style="background: blue">蓝色</font>

<font style="background: rgb(200,100,100)">使用 rgb 颜色值</font>

<font style="background: #FF00BB">使用十六进制颜色值</font>

红色
绿色
蓝色

使用 rgb 颜色值

使用十六进制颜色值

3）图片背景色

利用 style 的丰富样式，我们可以定义出丰富的文字形式。

<font style="background: url('http://www.wenliku.com/d/file/patterns/2019-06-26/d8fac26c38c9b2a7e2393fc9af766e8f.jpg') ">I wish you a Merry Christmas</font>

使用图片作背景


<font style="background: linear-gradient( to right, #ff1616, #ff7716, #ffdc16, #36c945, #10a5ce, #0f0096, #a51eff, #ff1616);">太阳太阳，给我们带来，七色光彩</font>

渐变背景色

I wish you a Merry Christmas

使用图片作背景

太阳太阳，给我们带来，七色光彩

渐变背景色

1）Markdown添加图片

• 参考：Markdown图片使用深度剖析：解决markdown中的图片痛点
• 参考：MarkDown添加图片的三种方式-简书
• 参考：图片转码(编码)成Base64字符串在线工具
• 参考：BASE64转图片

在typora里插入的方法：
1、例如<img src='https://tool.4xseo.com/article/155520.html'>，在src里输入这段编码；
2、通过常见的![][src]，src里是编码，可以看到这里是中括号[]，而不是括号。

2）Markdown图床设置

• 参考：如何使用Typora配置免费的gitee图床- 知乎 *

• 参考：Typora+图床搭建便捷的Markdown写作环境- 知乎（阿里云）

To-do 任务列表是一种很常见的时间管理工具，它适用于工作计划、个人生活以及家庭学习。使用 Markdown 语法我们也可以实现一个基本的 To-do 任务列表。

Markdown 的 To-Do List 的内容是由无序列表，复选框，图标几种功能的组合。

在 Markdown 文件中，在 " 无序列表 -,+,* " 后面使用 「中括号 []」 声明复选框。在中括号中写入 x ，便可实现选中效果。

1）无序列表

源码：

- 苹果
- 香蕉
- 梨子

• 苹果
• 香蕉
• 梨子

2）有序列表

源码：

1. 苹果
2. 香蕉
3. 梨子

1. 苹果
2. 香蕉
3. 梨子

3）复选框（checkbox）

（1）带选中的复选框（-）

源码：

- [ ] 苹果
- [ ] 香蕉
- [x] 梨子

• [ ] 苹果
• [ ] 香蕉
• [x] 梨子

（2）带选中的复选框（+）

源码：

+ [ ] 苹果
+ [ ] 香蕉
+ [x] 梨子

• [ ] 苹果
• [ ] 香蕉
• [x] 梨子

（3）带选中的复选框（*）

源码：

* [ ] 苹果
* [ ] 香蕉
* [x] 梨子

• [ ] 苹果
• [ ] 香蕉
• [x] 梨子

Markdown 中提供了对以下特殊字符的转义支持。

• 参考：http://www.imooc.com/wiki/markdownlesson/markdownhighlight.html

在任何一款现代程序语言中，注释都是至关重要的，它是源代码文件提升可读性的重要补充，也是多人协作时的重要工具。

Markdown 的注释可以通过三种方法实现：

第一是通过 html 的 <!-- --> 标记；
举例：<!-- 这是一段被注释掉的文字 -->

第二可以通过样式隐藏段落内容，即 <div style="display:none">；
举例：<div style="display:none"> 这是一段被注释掉的文字 </div>

第三是通过 Markdown 自身的解析原理实现。
举例：[//]: (这是一段被注释掉的文字)

表格通常作为一种布局形式，用于结构化的数据展示。

Markdown 表格包含三个部分：表头、分割线、数据。

• 表头 用来对列名对象进行描述，也就是通常所说的列名；
• 数据 用来展示每行的具体内容，数据是表格的核心；
• 分割线 用来区分表头和数据，也是 Markdown 中表格定义的最基本语法要求。

1）定义表格

Markdown 表格由 「竖线 |」、「减号 -」、「冒号 :」三种符号组成。

• 竖线 用来定义列，每两个竖线之间为一个单元格元素；
• 减号 用来定义分割线，也就是分割表头和数据体；
• 冒号 配合减号使用，用于定义列数据的对齐属性。

2）基本表格

源码：

|学号|姓名|
|----|----|
|1|张三|
|2|李四|

3）设定表格对齐方式

举例1：

源码：

|左对齐|居中对齐|右对齐|
|:--|:--:|--:|
|1|张三|17岁|
|2|李四|18岁|

举例2：

源码：

| |周一|周二|周三|周四|周五|
|--:|---|---|---|---|---|
|**1**|数学|英语|数学|语文|品德|
|**2**|美术|数学|品德|数学|语文|
|**3**|品德|品德|语文|体育|数学|
|**4**|语文|音乐|体育|品德|美术|
|||||||
|**5**|数学|英语|语文|数学|语文|
|**6**|品德|数学|美术|劳动|活动|

1）流程图

在 Markdown 中添加 Mermaid 图形，需要声明 Mermaid 类型的代码块，代码如下：

​```mermaid
<!-- 此处的内容会被渲染成 mermaid 图形 -->
​```

流程图支持的方向

（1）节点的形状

在 Mermaid 中可以使用一些基本符号定义节点的形状，例如：圆角形、跑道形、气缸形、非对称形状、菱形、六角形、平行四边形、梯形。

• 圆角形节点的语法

  %% 源码
  
  ​```mermaid
  graph TD
  	节点ID(节点显示文本)
  ​```
  

  graph TD 节点ID(节点显示文本)

• 圆形节点的语法

  %% 源码
  
  ​```mermaid
  graph TD
  	节点ID(节点显示文本)
  ​```
  

  graph TD 节点ID((节点显示文本))

• 非对称形节点的语法

  %% 源码
  
  ​```mermaid
  graph TD
  	节点ID>节点显示文本]
  ​```
  

  graph TD 节点ID>节点显示文本]

• 菱形节点的语法

  %% 源码
  
  ​```mermaid
  graph TD
  	节点ID{节点显示文本}
  ​```
  

  graph TD 节点ID{节点显示文本}

• 六角形节点的语法

  %% 源码
  
  ​```mermaid
  graph TD
  	节点ID{{节点显示文本}}
  ​```
  

  graph TD 节点ID{{节点显示文本}}

• 平行四边形节点的语法

  %% 源码
  
  ​```mermaid
  graph TD
  	左倾平行四边形[/平行四边形--左倾/]
  	右倾平行四边形[平行四边形--右倾]
  ​```
  

  graph TD 左倾平行四边形[/平行四边形--左倾/] 右倾平行四边形[平行四边形--右倾]

• 梯形节点的语法

  %% 源码
  
  ​```mermaid
  graph TD
  	梯形[/梯形--正向]
  	反向梯形[梯形--反向/]
  ​```
  

  graph TD 梯形[/梯形--正向] 反向梯形[梯形--反向/]

（2）连接线

• 无向线段连接线

  %% 源码
  
  ​```mermaid
  graph LR
  	A --- B;
  	C -- 带文字连接线 --- D
  ​```
  

  graph LR A --- B; C -- 带文字连接线 --- D

• 点状连接线

  %% 源码
  
  ​```mermaid
  graph LR
  	A -.- B
  	C -. 带文字连接线 .- D
  ​```
  

  graph LR A -.- B C -. 带文字连接线 .- D

• 粗实线连接线

  %% 源码
  
  ​```mermaid
  graph LR
  	A ==> B
  	C == 带文字连接线 ==> D
  ​```
  

  
  ```mermaid
  graph LR
  	A ==> B
  	C == 带文字连接线 ==> D

（3）视图分组

%% 源码

​```mermaid
graph TB
    c1-->a2
    subgraph 第一组
    	a1-->a2
    end
    subgraph 第二组
    	b1-->b2
    end
    subgraph 第三组
    	c1-->c2
    end
​```

（4）举例

（1.1）横向流程图

%% 源码

​```mermaid
graph LR
    A[方形]-->B(圆角);
    B--> C{条件A};
    C-->|a=1| D[结果1];
    C-->|a=2| D[结果2];
​```

（1.2）竖向流程图

%% 源码

​```mermaid
graph TD
    A[方形]-->B(圆角);
    B-->C{条件A};
    C-->|a=1| D[结果1];
    C-->|a=2| D[结果2];
​```

（1.3）标准流程图（竖向）

%% 源码

​```flow
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框

st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
​```

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框

st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

（1.4）标准流程图（横向）

%% 源码

​```flow
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框

st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
​```

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框

st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op

2）时序图（mermaid）

时序图连接类型

（1）基本时序图

%% 源码

​```mermaid
sequenceDiagram
    对象A->对象B: Hi LiLei, How do you do?
    对象B-->>对象A: How do you do!
    Note right of 对象B: 对象B的描述
	Note left of 对象A: 对象A的描述(提示)
	Note over 对象A,对象B: Lesson 1
​```

（2）基本时序图：别名形式

%% 源码

​```mermaid
sequenceDiagram
	participant A as 对象A
	participant B as 对象B
    A->>B: Hi LiLei, How do you do?
    B-->>A: How do you do!
    Note right of B: 对象B的描述
	Note left of A: 对象A的描述(提示)
	Note over A,B: Lesson 1
​```

（3）基本时序图：激活框方式一

activate 对象X和deactivate 对象X结合使用

%% 源码

​```mermaid
sequenceDiagram
    对象A->对象B: Hi LiLei, How do you do?
    activate 对象B
    对象B-->>对象A: How do you do!
    deactivate 对象B
    Note right of 对象B: 对象B的描述
	Note left of 对象A: 对象A的描述(提示)
	Note over 对象A,对象B: Lesson 1
​```

（4）基本时序图：激活框方式二

从消息接收方的时间线上标记一小段时间，表示对消息进行处理的时间间隔。

画法如下，注意体会箭头符号后的 + 和 - 的（相结合）使用方法和效果，它们相当于激活框的开关。

举例1：

%% 源码

​```mermaid
sequenceDiagram
    老板B ->> + 员工B : “你们要669！”
    员工B -->> - 老板B : 鼓掌
    
    老板B ->> + 员工B : “悔创本司！”
    员工B -->> - 老板B : 鼓掌
​```

（5）时序图的逻辑：循环

在条件满足时，重复发出消息序列。相当于编程语言中的 while 语句。

举例1：

%% 源码

​```mermaid
sequenceDiagram
    对象A->对象B: Hi LiLei, How do you do?
    对象B-->>对象A: How do you do!
    Loop 不听地说
    	对象A-->>对象B: Great!
    end
    Note right of 对象B: 对象B的描述
	Note left of 对象A: 对象A的描述(提示)
	Note over 对象A,对象B: Lesson 1
​```

举例2：

%% 源码

​```mermaid
sequenceDiagram
    网友 ->> + X宝 : 网购钟意的商品
    X宝 -->> - 网友 : 下单成功
    
    loop 一天七次
        网友 ->> + X宝 : 查看配送进度
        X宝 -->> - 网友 : 配送中
    end
​```

（6）时序图的逻辑：选择

• 参考：Markdown 进阶技能：用代码画时序图 - 知乎 - Zhihu

在多个条件中作出判断，每个条件将对应不同的消息序列。相当于 if 及 else if 语句。

%% 源码

​```mermaid
sequenceDiagram    
    土豪 ->> 取款机 : 查询余额
    取款机 -->> 土豪 : 余额
    
    alt 余额 > 5000
        土豪 ->> 取款机 : 取上限值 5000 块
    else 5000 < 余额 < 100
        土豪 ->> 取款机 : 有多少取多少
    else 余额 < 100
        土豪 ->> 取款机 : 退卡
    end
    
    取款机 -->> 土豪 : 退卡
​```

（7）时序图的逻辑：可选

• 参考：Markdown 进阶技能：用代码画时序图 - 知乎 - Zhihu

在某条件满足时执行消息序列，否则不执行。相当于单个分支的 if 语句。

%% 源码

​```mermaid
sequenceDiagram
    老板C ->> 员工C : 开始实行996
    
    opt 永不可能
        员工C -->> 老板C : 拒绝
    end
​```

（8）时序图的逻辑：并行

• 参考：Markdown 进阶技能：用代码画时序图 - 知乎 - Zhihu

在某条件满足时执行消息序列，否则不执行。相当于单个分支的 if 语句。

%% 源码

​```mermaid
sequenceDiagram
    老板C ->> 员工C : 开始实行996
    
    par 并行
        员工C ->> 员工C : 刷微博
    and
        员工C ->> 员工C : 工作
    and
        员工C ->> 员工C : 刷朋友圈
    end
    
    员工C -->> 老板C : 9点下班
​```

（9）使用场景及应用实例1

学生使用教务系统时序图展示。

%% 源码

​```mermaid
sequenceDiagram
    participant a as 学生
    participant b as 教务系统
    participant c as 课程
    participant d as 成绩
	opt 认证
        a->>b: 用户名/密码
    end
    a->>+b: 请求课程列表
    b->>+c: 获取课程列表
    c-->>-b: 返回课程列表
    b->>+d: 获取成绩信息
    d-->>-b: 返回成绩信息
    b-->>-a: 显示成绩
​```

（10）使用场景及应用实例2

%% 源码

​```mermaid
%% 时序图示例
%% ->: 直线
%% -->: 虚线
%% ->> 实线箭头
%% ->> 实线箭头
%% loop xxx end: 循环检查

sequenceDiagram
    participant 张三
    participant 李四
    张三 -> 王五: 王五，你好吗？
    loop 健康检查
    王五 -> 王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医...
    李四 ->> 张三: 我很好
    王五 -> 李四: 你怎么样？
    李四 -> 王五: 很好！
​```

3）时序图（sequence）

（1）基本时序图

%% 源码

​```sequence
%% ->: 实线带箭头
%% -->: 虚线带箭头

对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？
​```

%% ->: 实线带箭头
%% -->: 虚线带箭头

对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？

（2）基本时序图（扩展）

%% 源码

​```sequence
Title: 标题：复杂使用
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->对象A: 对象B找我了
对象A->对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩
​```

Title: 标题：复杂使用
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->对象A: 对象B找我了
对象A->对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩

4）类图

（1）类图中的类

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

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

（1.1）类的定义

类的定义有两种方式，第一种是形如 class Animal 这样的直接描述，另一种是通过关系来定义类，如 Vehicle <|-- Car。

举例1：

%% 源码

​```mermaid
classDiagram
	class Animal
	Animal: String Name, String age
	Animal: eat()
​```

举例2：

%% 源码

​```mermaid
classDiagram
	class Animal
	Animal: String Name, String age
	Animal: eat()
	
	交通工具 <|-- 小汽车
​```

（1.2）类成员的定义

类成员包含属性、方法；区分属性和方法的语法依赖于是否以「小括号 ()」结尾，没有括号的成员会被解释为属性，有括号的成员会被解释为方法。

成员的作用域作为可选项，定义是在成员的开头，有以下四种：

• + Public
• - Private
• # Protected
• ~ Package/Internal

除此之外，通过在 () 后面增加 「星号 *」和「美元符号 $」，可以用来描述方法成员的抽象或静态属性。

类成员有两种定义方法。

（1.1.1）使用「冒号」声明类成员

%% 源码

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

（1.1.2）使用 「大括号」确定类对象的成员描述

%% 源码

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

（1.1.2）「小括号」结尾处增加数据类型描述

%% 源码

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

（2）类图中的「关系」

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

不同的逻辑关系定义如下：

（1.1）各种连线类型展示

%% 源码

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

（1.2）在类图连接线上增加标签

%% 源码

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

（1.3）不同基数关系的定义

%% 源码

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

（3）类修饰符

我们可以通过标签文本描述类的元数据，例如：抽象类、接口、服务、枚举等。

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

（1.1）在类名称下面另起一行

%% 源码

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

（1.2）在嵌套结构内的首行定义

%% 源码

​```mermaid
classDiagram
    class 形状 {
        <<interface>>
        定点数
        绘制()
    }
​```

（4）使用场景及实例

一个关于动物的类图。

%% 源码

​```mermaid
classDiagram
    鸟 --|> 动物: 继承
    翅膀 "2" --> "1" 鸟: 组合
    动物 ..> 氧气: 依赖
    动物 ..> 水: 依赖

    class 动物 {
    	<<interface>>
        +有生命
        +新陈代谢(氧气, 水)
        +繁殖()
    }

    class 鸟 {
        +羽毛
        +有角质喙没有牙齿
        +下蛋()
    }
​```

5）状态图

状态图 (Statechart) 是描述一个实体基于事件反应的动态行为，是使对象达到某种状态的事件、条件或操作的图形化描述。

一个完整的状态图由状态、转换组成。

（1）状态图中的「状态」

状态代表某一对象在某一特定的条件、时间下所保持的静态值。

使用 Mermaid 扩展绘制状态图时，有多种方式声明一个状态节点。

（1.1）举例：设置状态 ID 声明状态

%% 源码

​```mermaid
stateDiagram
    状态1
​```

（1.2）举例：「state」关键字来描述共同声明状态节点

%% 源码

​```mermaid
stateDiagram
    state "状态描述性文字" as 状态2
​```

（1.3）举例：「状态 ID + 冒号」的方式简化状态节点的声明

%% 源码

​```mermaid
stateDiagram
    状态3 : 状态3的文字描述
​```

（2）状态图中的「转换」

「转换」在状态图中表现为连接两个状态节点的单向箭头，在 Mermaid 扩展语法中的写法为「字符箭头 -->」。

（1.1）举例：单向箭头表示转换

%% 源码

​```mermaid
stateDiagram
    状态1 --> 状态2
​```

（1.2）举例：为转换添加描述文本

通过 (行内容): label 的形式，为转换添加描述文本。

%% 源码

​```mermaid
stateDiagram
    状态1 --> 状态2: 咻~
​```

（1.3）举例：增加开始和结束节点

状态图中有两个特殊的状态节点：开始节点和结束节点。如果需要在状态图中显示开始或结束节点，可以通过 [*] 方式声明。

%% 源码

​```mermaid
stateDiagram
    [*] --> 状态节点
    状态节点 --> [*]
​```

（3）状态图中的「嵌套」

在负责的状态描述中，有的状态节点会包含一系列的子状态，我们可以用组合「嵌套」的方式来描绘它们。在 Mermaid 扩展中，描述嵌套的方式，是使用「花括号 {}」描述子状态。

「嵌套」的层数没有限制。

（1.1）举例：状态图中的单层嵌套

%% 源码

​```mermaid
stateDiagram
    [*] --> 父状态节点
    state 父状态节点 {
        [*] --> 子状态节点
        子状态节点 --> [*]
    }
​```

（1.2）举例：状态图中的多层嵌套

%% 源码

​```mermaid
stateDiagram
    [*] --> 第一层状态节点

    state 第一层状态节点 {
        [*] --> 第二层

        state 第二层 {
            [*] --> 第二层
            第二层 --> 第三层

            state 第三层 {
                [*] --> 第三层
                第三层 --> [*]
            }
        }
    }
​```

（1.3）举例：群组之间的嵌套

%% 源码

​```mermaid
stateDiagram
    [*] --> 第一层
    第一层 --> 第二层
    第一层 --> 第三层

    state 第一层 {
        [*] --> 第一层子节点
        第一层子节点 --> [*]
    }
    state 第二层 {
        [*] --> 第二层子节点
        第二层子节点 --> [*]
    }
    state 第三层 {
        [*] --> 第三层子节点
        第三层子节点 --> [*]
    }
​```

（4）状态图中的「分支」

对于非单一结果的状态转换，我们可以使用 <<fork>> 和 <<join>> 标签实现。

%% 源码

​```mermaid
stateDiagram
    state 分支 <<fork>>
        [*] --> 分支
        分支 --> 分支2
        分支 --> 分支3

    state 合并 <<join>>
        分支2 --> 合并
        分支3 --> 合并
        合并 --> 状态4
        状态4 --> [*]
​```

（5）状态图中的「并行」

对于一些同步完成的状态转换，我们可以用 -- 符号声明并行效果。

%% 源码

​```mermaid
stateDiagram
    [*] --> 激活状态

    state 激活状态 {
        [*] --> NumLock关
        NumLock关 --> NumLock开 : 按下 NumLock 键
        NumLock开 --> NumLock关 : 按下 NumLock 键
        --
        [*] --> CapsLock关
        CapsLock关 --> CapsLock开 : 按下 CapsLock 键
        CapsLock开 --> CapsLock关 : 按下 CapsLock 键
        --
        [*] --> ScrollLock关
        ScrollLock关 --> ScrollLock开 : 按下 ScrollLock 键
        ScrollLock开 --> ScrollLock关 : 按下 ScrollLock 键
    }
​```

（6）为状态图增加「备注」

有时候图表元素不能完全表达我们的设计思路，这时候需要在图中加入文字描述。在 Mermaid 语法中，使用 note <right|left> of <state ID> 备注内容 end notes 的方式，将备注添加到状态节点的右侧（左侧）。

%% 源码

​```mermaid
stateDiagram
    状态1: 描述将出现在右侧
    note right of 状态1
    	这里添加描述内容
    end note
    状态1 --> 状态2
    note left of 状态2: 在节点左侧添加描述
​```

（7）使用场景及实例

%% 源码

​```mermaid
stateDiagram
    [*] --> 下单成功
    下单成功 --> 备货
    state 出货中 <<fork>>
        备货 --> 出货中
        出货中 --> 出货失败
        出货失败 --> [*]
        出货中 --> 出货确认
        出货确认 --> 出货完毕
        出货完毕 --> 订单完成
        订单完成 --> [*]
​```

6）甘特图

（1）一个基本的甘特图

基本的甘特图由「标题」、「日期格式约定」、「分组及任务」三部分组成。

（2）规定日期格式

通过设置 dateFormat 属性，可以指定甘特图定义日期时的解析方式。

日期的格式支持以下情形：

（3）定义对象的生命周期

甘特图上的对象都是以时间为基础而存在的，对于时间，我们可能有非常多的定义需求，比如精度上的「年」、「月」、「日」、「时」等，又比如「24H」或者 「12H」这样写法上的不同等。Mermaid 为时间提供了丰富的语法支持。

完整的定义语法如下：

%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 - 上午  下午。
%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"。
%% - 用于输出百分号 "%" 。

（4）任务的定义

Mermaid 甘特图中，每个任务隶属于一个分组，一个分组内可以定义多个任务，一张甘特图表中可以包含多个分组。

甘特图中的任务定义格式形如：

<任务名>: [crit], [active], [任务ID], [前置任务], <周期>

其中「任务名」和「周期」两项是必要项。

任务状态：

• done：已完成
• active：正在进行
• crit：关键任务
• crit, active：关键任务，正在进行
• crit, done：关键任务，已完成
• 默认任务都为待完成状态

任务时长：

• 时间范围：如：2014-01-06, 2014-01-08
• 指定天数：如：5d
• 指定开始日期+天数：如：2014-01-06，5d

（5）基本甘特图

%% 源码

​```mermaid
gantt
	title 简单的甘特图
	dateFormat YYYY-MM-DD
	
	section 分区1
		任务1-1: a1, 2021-01-01, 30d
		任务1-2: after a1, 20d
    section 分区2
    	任务2-1: 2021-01-15, 12d
    	任务2-2: 24d
​```

（6）基本甘特图：定义任务

%% 源码

​```mermaid
gantt
	title 简单的甘特图
	dateFormat YYYY-MM-DD
	
	苹果: a, 2021-01-01, 30d
	香蕉: crit, b, 2021-01-05, 1d
	梨子: crit, done, c, after b, 3d
	樱桃: active, d, after c, 5d
​```

（7）使用场景及实例1

%% 源码

​```mermaid
gantt
    title 软件开发甘特图
    dateFormat YYYY-MM-DD
    
    section 设计
        需求: done, des1, 2014-01-06,2014-01-08
        原型: active, des2, 2014-01-09, 3d
        UI设计: des3, after des2, 5d
        未来任务: des4, after des3, 5d
        
    section 开发
        学习准备理解需求: crit, done, 2014-01-06, 24h
        设计框架: crit, done, after des2, 2d
        开发: crit, active, 3d
        未来任务: crit, 5d
        耍: 2d
        
    section 测试
        功能测试: active, a1, after des3, 3d
        压力测试: after a1, 20h
        测试报告: 48h
​```

（8）使用场景及实例2

%% 源码

​```mermaid
gantt
    title 甘特图实例
    dateFormat YYYY-MM-DD

    section 基本任务
        已完成任务: done, des1, 2014-01-06, 2014-01-08
        进行中任务: active, des2, 2014-01-09, 3d
        未开始任务1: des3, after des2, 5d
        未开始任务2: des4, after des3, 5d

    section 紧急任务
        已完成的紧急任务: crit, done, 2014-01-06, 24h
        已完成紧急任务1: crit, done, after des1, 2d
        进行中紧急任务2: crit, active, 3d
        未开始紧急任务3: crit, 5d
        未开始一般任务4: 2d
        未开始一般任务5: 1d

    section 文档编写
        进行中文档任务1: active, a1, after des1, 3d
        未开始文档任务2: after a1, 20h
        未开始文档任务3: doc1, after a1, 48h

    section 其他部分
        其他任务1: after doc1, 3d
        其他任务2: 20h
        其他任务3: 48h
​```

7）饼图

饼图（Pie chart）是将一个圆形，分成面积相同或不同的若干区域，用来表示不同内容占比的图形。

饼图的定义包含「标题」、「内容名称」和「内容权重」三项，其中「内容权重」会在渲染时，自动转换为百分比并显示在饼图上。

（1）基本饼图

%% 源码

​```mermaid
pie	title 宠物的选择
	"狗": 386
	"猫": 85
	"兔子": 15
​```

（2）使用场景及实例

%% 源码

​```mermaid
pie title 城市生存训练能力占比
    "独立自理": 15
    "情商": 20
    "人际交往": 15
    "地理常识": 10
    "财商": 10
    "安全防护": 20
    "感恩之心": 10
​```

上标、下标是一种文字的特殊写法，常用于化学式、数学公式、引用文字的脚注等。

在 Markdown 中，我们可以通过 和 标签来实现上标和下标。

1）上标表示数学公式

• 源码：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>

• 效果：a² + b² = c²

2）上标表示特殊语义

• 源码：Window 10 <sup>TM</sup>
• 效果：Window 10 ^TM

3）下标书写化学公式

• 源码：2KClO<sub>3</sub> ==== 2KCl + 3O<sub>2</sub>↑
• 效果：2KClO₃ ==== 2KCl + 3O₂↑

4）上标下标嵌套使用

• 源码：a<sup>b<sub>c<sup>d</sup></sub></sup>
• 效果：a^b_cd

5）特殊符号作为上标

• 源码：IMOOC<sup>©</sup>
• 效果：IMOOC^©

6）化学方程式

• 源码：
  你的美（镁）偷走了我的<font color="red">❤</font>（锌)!!!
Mg + ZnSO<sub>4</sub> == MgSO<sub>4</sub> + Zn
• 效果：
  你的美（镁）偷走了我的❤（锌) !!!
  Mg + ZnSO₄ == MgSO₄ + Zn

• 参考：http://www.imooc.com/wiki/markdownlesson/markdownlatex.html

在专业的学术论文中，数学公式往往是不可或缺的。在 Word 中，想表达出一个复杂的公式非常繁琐，幸运的是 Markdown 其语法中，支持使用 LaTeX 语法实现在文档中插入数学公式。

1）公式的声明

Markdown 中的数学公式也分为「行中公式」和「独立公式」两种。

（1）行中公式

行中公式使用两个单独的「美元符 $」表示。

$ 1 + 1 = 2 $

$ 1 + 1 = 2 $

（2）独立公式

独立公式的写法是将公式两边用两个连续的「美元符 $$」包裹，换行通过在行尾添加 \ 实现。

$$
x + y = 10 \
x - y = 6 \
2x = 16 \
x = 8 \
y = 2
$$

$$
x + y = 10
x - y = 6
2x = 16
x = 8
y = 2
$$

2）运算符

（1）四则运算符

四则运算符是理工运算中的基础，主要包含加减乘除和绝对值运算。

加法符号：$x+y=z$  
减法符号：$x-y=z$  
加减符号：$x pm y=z$  
减加符号：$x mp y=z$  
叉乘符号：$x 	imes y=z$  
点乘符号：$x cdot y=z$  
星乘符号：$x ast y=z$  
除法符号：$x div y=z$  
斜除符号：$x/y=z$  
分式1：$frac{x+y}{y+z}$   
分式2：${x+y} over {y+z}$  
绝对值：$|x+y|$  

加法符号：$x+y=z$
减法符号：$x-y=z$
加减符号：$x pm y=z$
减加符号：$x mp y=z$
叉乘符号：$x imes y=z$
点乘符号：$x cdot y=z$
星乘符号：$x ast y=z$
除法符号：$x div y=z$
斜除符号：$x/y=z$
分式1：$frac{x+y}{y+z}$
分式2：${x+y} over {y+z}$
绝对值：$|x+y|$

（2）逻辑运算符

等于符号：$x+y=z$  
大于符号：$x+y>z$  
小于符号：$x+y<z$  
大于等于符号：$x+y geq z$  
小于等于符号：$x+y leq z$  
不等于符号：$x+y 
eq z$  
不大于等于符号：$x+y 
geq z$  
不大于等于符号：$x+y 
otgeq z$  
不小于等于符号：$x+y 
leq z$  
不小于等于符号：$x+y 
otleq z$  
约等于符号：$x+y approx z$  
恒定等于符号：$x+y equiv z$  

等于符号：$x+y=z$
大于符号：$x+y>z$
小于符号：$x+y<z$
大于等于符号：$x+y geq z$
小于等于符号：$x+y leq z$
不等于符号：$x+y eq z$
不大于等于符号：$x+y geq z$
不大于等于符号：$x+y otgeq z$
不小于等于符号：$x+y leq z$
不小于等于符号：$x+y otleq z$
约等于符号：$x+y approx z$
恒定等于符号：$x+y equiv z$

（3）高等运算符

平均数符号：$overline{xyz}$   
开二次方符号：$sqrt x$       
开方符号：$sqrt[3]{x+y}$   
对数符号：$log(x)$  
极限符号：$lim^{x 	o infty}_{y 	o 0}{frac{x}{y}}$  
极限符号：$displaystyle lim^{x 	o infty}_{y 	o 0}{frac{x}{y}}$  
求和符号：$sum^{x 	o infty}_{y 	o 0}{frac{x}{y}}$  
求和符号：$displaystyle sum^{x 	o infty}_{y 	o 0}{frac{x}{y}}$  
积分符号：$int^{infty}_{0}{xdx}$  
积分符号：$displaystyle int^{infty}_{0}{xdx}$ 
微分符号：`partial`，如：$frac{partial x}{partial y}$  
矩阵符号：$left[ egin{matrix} &1 &2 &cdots &4 &5 &6 &cdots &8\ &vdots &ddots &cdots &13 &14 &15 &cdots &16end{matrix} 
ight]$

平均数符号：$overline{xyz}$
开二次方符号：$sqrt x$
开方符号：$sqrt[3]{x+y}$
对数符号：$log(x)$
极限符号：$lim^{x o infty}{y o 0}{frac{x}{y}}$
极限符号：$displaystyle lim^{x o infty}{y o 0}{frac{x}{y}}$
求和符号：$sum^{x o infty}{y o 0}{frac{x}{y}}$
求和符号：$displaystyle sum^{x o infty}{y o 0}{frac{x}{y}}$
积分符号：$int^{infty}{0}{xdx}$
积分符号：$displaystyle int^{infty}{0}{xdx}$
微分符号：partial，如：$frac{partial x}{partial y}$
矩阵符号：$left[ egin{matrix} &1 &2 &cdots &4 &5 &6 &cdots &8 &vdots &ddots &cdots &13 &14 &15 &cdots &16end{matrix} ight]$

（4）希腊字母

阿尔法：$Alpha$，$alpha$  
贝塔：$Beta$，$eta$  
伽玛：$Gamma$，$gamma$  
德尔塔：$Delta$，$delta$  
艾普西龙：$Epsilon$，$epsilon$  
捷塔：$eta$，$zeta$  
依塔：$Eta$，$eta$  
西塔：$Theta$，$	heta$  
艾欧塔：$Iota$，$iota$  
喀帕：$Kappa$，$kappa$  
拉姆达：$Lambda$，$lambda$  
缪：$Mu$，$mu$  
拗：$Nu$，$
u$  
克西：$Xi$，$xi$  
欧麦克轮：$Omicron$，$omicron$  
派：$Pi$，$pi$  
柔：$Rho$，$
ho$  
西格玛：$Sigma$，$sigma$  
套：$Tau$，$	au$  
宇普西龙：$Upsilon$，$upsilon$  
发艾：$Phi$，$phi$  
器：$Chi$，$chi$  
普赛：$Psi$，$psi$  
欧米伽：$Omega$，$omega$  

阿尔法：$Alpha$，$alpha$
贝塔：$Beta$，$eta$
伽玛：$Gamma$，$gamma$
德尔塔：$Delta$，$delta$
艾普西龙：$Epsilon$，$epsilon$
捷塔：$eta$，$zeta$
依塔：$Eta$，$eta$
西塔：$Theta$，$ heta$
艾欧塔：$Iota$，$iota$
喀帕：$Kappa$，$kappa$
拉姆达：$Lambda$，$lambda$
缪：$Mu$，$mu$
拗：$Nu$，$ u$
克西：$Xi$，$xi$
欧麦克轮：$Omicron$，$omicron$
派：$Pi$，$pi$
柔：$Rho$，$ ho$
西格玛：$Sigma$，$sigma$
套：$Tau$，$ au$
宇普西龙：$Upsilon$，$upsilon$
发艾：$Phi$，$phi$
器：$Chi$，$chi$
普赛：$Psi$，$psi$
欧米伽：$Omega$，$omega$

注意：希腊字母区分大小写，其大小写的定义跟随公式中，声明该希腊字母的语法的首字母大小写。

（5）举例：等比数列的通项公式

$$
a_n = a_1q^{n-1}= frac {a_1}{q} cdot q^n(n in N^*) \
其中前 n 项的和公式为：\
S_n = left{ 
egin{aligned}
frac {a_1 cdot (1-q^n)}{1-q} &,q 
eq 1 \
na_1 &,q=1
end{aligned}ight.
$$

$$
a_n = a_1q^{n-1}= frac {a_1}{q} cdot q^n(n in N^*)
其中前 n 项的和公式为：
S_n = left{
egin{aligned}
frac {a_1 cdot (1-q^n)}{1-q} &,q eq 1
na_1 &,q=1
end{aligned}
ight.
$$

脚注和尾注都是对文章的补充说明。

脚注通常与被注释内容出现在同一页，并位于该页面的最下方，一般用来解释专有名词、数据来源等。

尾注通常出现在文章的最后一页，写在文章全部正文之后，一般用来列明引用的文章列表等。

要增加脚注（尾注），首先需要在文章的适当位置增加引用的描述，形如：[^引用ID]: 说明文字。

举例1：

这里有一个脚注[^脚注ID1]。

这里有一个脚注[^脚注ID2]。


[^脚注ID1]: 此处是 **脚注** 的 *文本内容*。
[^脚注ID2]: 此处是 **脚注** 的 *文本内容*。

举例2：

《出师表》（节选） 先帝^[1]创业^[2]未半而中道^[3]崩殂^[4]，今^[5]天下三分^[6]，益州疲弊^[7]，此^[8]诚危急存亡之秋也。然^[9]侍卫之臣不懈于内，忠志之士忘身^[10]于外者，盖追先帝之殊遇^[11]，欲报之于陛下也。诚^[12]宜开张圣听^[13]，以光^[14]先帝遗德，恢弘^[15]志士之气，不宜妄自菲薄^[16]，引喻失义^[17]，以塞忠谏之路也^[18]。