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