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
```
$$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字符的转义字符
html字符的转义字符
```mermaid
graph LR
A["A double quote:#quot;"]-->B["A dec char:#9829;"]
```
CSS样式
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 |
网友评论