Markdown插入图表

2024-02-07 09:05:35

链接：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
```

$Markdown插入图表$

$$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 项目名称
分任务名称 : [状态], [当前节点名称], [开始时间], 结束时间/持续时间