Markdown插入图表

链接：https://www.jianshu.com/p/3cf83d22dd3d

Markdown图表语法

本文介绍如何用Markdown的mermaid等语法插入时序图、流程图、甘特图

如果是想学习Markdown基本语法，请看：系统学习GitHub Flavored Markdown（GFM）
如果想学习如何在Markdown中输入数学符号和公式，请看:小白入门LaTex编写数学公式

内容整合了：

几款支持Markdown编辑器的比较

1.有道云笔记不能加mermaid字段，不然会显示不出, 有道云笔记省略了mermaid字段声明

2.在移动端支持上有道云笔记支持的语法和功能也更多一些，能够在手机端编辑和查看流程图。而印象笔记既无法编辑更无法查看流程图

3.只有印象笔记增加了一个chart声明的语法功能，可以画图表，类似Echart效果

4.在Markdown功能支持丰富度比较：GitHub > 有道云笔记 > 印象笔记 > 简书 & Jupyter notebook

插入图表(chart语法)

目前支持饼状图、折线图、柱状图和条形图，只需将 type 改为对应的pie、line、column 和 bar。（默认柱形图））
目前好像只有印象笔记能够实现，其他都不行

印象笔记chart语法得到的文件

```chart
,预算,收入,花费,债务          # 前面逗号不能省
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:每月收益
x.title: Amount
y.title: Month
y.prefix: $                     #  后缀是：y.suffix: $
```

flowchart语法画流程图

目前笔记APP都不支持这个语法,暂时不用管，出来类似于Visio效果

flowchart流程图

原文链接：markdown流程图

插入数学公式

支持绝大多数的 LaTeX 数学公式

```math
e^{i\pi} + 1 = 0
```

$e^{i\pi} + 1 = 0$

$y = k x + b \tag{1}$

$$y = k x + b \tag{1}$$

其中$$ $$代表单独一行的公式，\tag{1}才是公式右边的{1}。印象笔记暂时支持不完善。

插入流程图（mermaid语法）

书写graph XX，用以确定将要绘制的流程图及其类型（XX表示流程图类型）。

方向控制

流程图分为竖向和横向两大类，竖向包括自上而下和自下而上两种顺序，横向包括从右到左和从左到右两种顺序。
其对应语法分别为：graph TB/graph BT/graph RL/graph LR。

TB - top bottom（自上而下）
BT - bottom top（自下而上）
RL - right left（从右到左）
LR - left right（从左到右）
TD: 默认方向，从上到下

连接线与箭头

此语法有道云笔记支持，印象笔记目前不支持
一个箭头 -> 只能表示一条线
要表示箭头，需要两个箭头 ->>
虚线用两个虚线表示 -->>

有道云笔记的线条样式

```mermaid
graph TD
A[模块A] -->|A1| B(模块B)
B --> C{判断条件C}
C -->|条件C1| D>模块D]
C -->|条件C2| E((模块E))
C -->|条件C3| F["模块F(引号可转义特殊字符)"]
```

印象笔记流程图示例

高级语法（比较少用到）

html字符的转义字符

```mermaid
graph LR
A["A double quote:#quot;"]-->B["A dec char:#9829;"]
```

CSS样式

```mermaid
graph LR
     id1(Start)-->id2(Stop)
     style id1 fill:#f9f,stroke:#333,stroke-width:4px;
     style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray:5,5;
```

样式类

原文链接

子图(Subgraphs)

subgraph title
graph definition
end

子图

插入时序图

```mermaid
sequenceDiagram
A->>B: 是否已收到消息？
B-->>A: 已收到消息
```

时序图

mermaid通过设定参与者(participants)的顺序控制二者的顺序。上面的图可以做如下修改：

mermaid的participant不支持直接声明颜色，只能声明个名字了
线条样式如下

```mermaid
sequenceDiagram
　　participant John
　　participant Alice
　　Alice->>John:Hello John,how are you?
　　John-->>Alice:Great!
     Alice->John: dont borther me !
     John-->Alice:Great!
     Alice-xJohn: wait!
     John--xAlice: Ok!
```

线条样式

高级用法(比较少用）

便签

语法：[right of | left of | over][Actor]:Text

便签的用法

```mermaid
sequenceDiagram
participant John
Note left of John:左边的文本
Alice->>John:Hello John, how are you?
Note over Alice,John:跨越两个Actor的便签
```

循环Loops

语法：

loop 循环的文本
... statements...
end

loop循环

```mermaid
sequenceDiagram
    Alice->>John: Hello!
    loop Reply every minute
        John->>Alice: Great!
    end
```

选择ALT

在时序图中选择性表达

alt Describing text
    …statements…
else
     …statements…
 end

或者使用opt(推荐在没有else的情况下使用)

opt 描述文本
    ...statements...
end

选择ALT与OPT

```mermaid
sequenceDiagram
    Alice->>Bob: Hello Bob, How are you?
    alt is sick
        Bob->>Alice: not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy :)
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end
```

举个大栗子 :)

综合大例子

识别不了换行</br>

```mermaid
graph TB
    sq[Square shape] --> ci((Circle shape))
    subgraph A subgraph
        di{Diamond with  line break} -.-> ro(Rounded)
        di==>ro2(Rounded square shape)
    end
    e --> od3>Really long text with linebreak<br>in an Odd shape]
    cyr[Cyrillic]-->cyr2((Circle shape Начало));
    classDef green fill:#9f6,stroke:#333,stroke-width:2px;
    classDef orange fill:#f96,stroke:#333,stroke-width:4px;
    class sq,e green
    class di orange
```

插入甘特图

mermaid字段可以不写，也不会影响图片显示（有点奇怪）
一个section和另一个section之间要空行

```mermaid
gantt
title 甘特图
dateFormat YYYY-MM-DD
section 项目A
任务1 :a1, 2018-06-06, 30d
任务2 :after a1 , 20d
section 项目B
任务3 :2018-06-12 , 12d
任务4 : 24d
```

甘特图示例

语法说明

语法	功能
title	标题
dateFormat	日期格式
section	模块
done	已经完成
active	当前正在进行
crit	关键阶段
日期缺失	默认从上一项完成后

语法：

section 项目名称
分任务名称 : [状态], [当前节点名称], [开始时间], 结束时间/持续时间

举个大栗子 :)

甘特图综合大例子

```mermaid
gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid
    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2               :         des4, after des3, 5d
    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h
    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      : 20h
    Add another diagram to demo page    : 48h
```

印象笔记Markdown快捷键

功能	快捷键
新建 Markdown 笔记	Ctrl+Alt+D
粗体	Ctrl+B
斜体	Ctrl+I
删除线	Ctrl+T
下划线	Ctrl+U
分隔线	Ctrl + Shift + -
编号列表	Ctrl + Shift + O
项目符号列表	Ctrl + Shift + W
插入待办事项	Ctrl + Shift + C
代码块	Ctrl+Shift+L
插入日期和时间	Alt + Shift + D
撤销	Ctrl+Z
在笔记内搜索	Ctrl+F