markdown 流程图_Markdown文章编辑利器-进阶篇2

介绍markdown所支持的扩展语法：数学公式，流程图，序列图，甘特图，饼图，折线图，柱状图，条形图等语法。有些语法部分markdown编辑器并不能识别，通用性较少，且为方言版本，仅供参考。

1.数学公式

• 语法兼容于LaTeX。
• 使用一对$包含特定的数学语法。

数学公式示例

关于更多LaTex语法可查看：

https://www.latex-project.org/

2.mermaid流程图, 序列图和甘特图

• 流程图:

```mermaid
graph TD;
    A-->B;
    B-->C;
```

流程图

• 序列图:

```mermaid
sequenceDiagram
A->> B: 吃饭了吗？
B->> A: 刚吃完饭了。
```

序列图

• 甘特图:

```mermaid
gantt
title 甘特图
dateFormat  YYYY-MM-DD
section 项目A
任务1     :a1, 2019-01-01, 150d
任务2     :after a1, 30d
section 项目B
任务3      :2019-02-01, 60d
任务4      :30d
```

甘特图

关于更多mermaid语法可查看：

https://knsv.github.io/mermaid/

一些支持mermaid语法的编辑器：

1. typora
2. 印象笔记
3. CSDN博客​
4. 小书匠

3.图表

• 饼状图：

```chart
,Budget,Income,Expenses,Debt
June,5000,8000,4000,6000
July,3000,1000,4000,3000
Aug,5000,7000,6000,3000
Sep,7000,2000,3000,1000
Oct,6000,5000,4000,2000
Nov,4000,3000,5000,

type: pie
title: Monthly Revenue
x.title: Amount
y.title: Month
y.suffix: $
```

饼状图

• 折线图：

```chart
,Budget,Income,Expenses,Debt
June,5000,8000,4000,6000
July,3000,1000,4000,3000
Aug,5000,7000,6000,3000
Sep,7000,2000,3000,1000
Oct,6000,5000,4000,2000
Nov,4000,3000,5000,

type: line
title: Monthly Revenue
x.title: Amount
y.title: Month
y.suffix: $
```

折线图

• 柱状图：

```chart
,Budget,Income,Expenses,Debt
June,5000,8000,4000,6000
July,3000,1000,4000,3000
Aug,5000,7000,6000,3000
Sep,7000,2000,3000,1000
Oct,6000,5000,4000,2000
Nov,4000,3000,5000,

type: column
title: Monthly Revenue
x.title: Amount
y.title: Month
y.suffix: $
```

柱状图

• 条形图：

```chart
,Budget,Income,Expenses,Debt
June,5000,8000,4000,6000
July,3000,1000,4000,3000
Aug,5000,7000,6000,3000
Sep,7000,2000,3000,1000
Oct,6000,5000,4000,2000
Nov,4000,3000,5000,

type: bar
title: Monthly Revenue
x.title: Amount
y.title: Month
y.suffix: $
```

条形图

注意：目前已知支持软件印象笔记。

4.github快速表格

• 在github的markdown编辑器中可以使用以下方式创建表格。
• 使用一对---包含表格内容；
• 表格标题使用:区分；
• 单元格内可以存在多个内容。

注意：只能在文件开头处使用。

示例1：

---
title: Hello world
date: 2019-01-01
tags: 文章
---

示例2：

---
title: Hello world
date: 2019-01-01
tags: 
  - 文章
  - 随笔
---

5.注释

• 兼容于html注释语法。

示例：

<!--注释内容-->

6.避免转译代码块

• 主要用于演示代码块。

示例：

````markdown
```cpp
int main() 
{
}
```
````

效果：

```cpp
int main() 
{
}
```