Markdown插入图表

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

Markdown图表语法

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

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

内容整合了:

  • 印象笔记 Markdown 入门指南
  • 【进阶版】有道云笔记Markdown指南
  • markdown绘图插件----mermaid简介
  • 我的思考总结

目录

 
Markdown插入图表_第1张图片
目录

 


几款支持Markdown编辑器的比较

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

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

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

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

插入图表(chart语法)

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

 
Markdown插入图表_第2张图片
印象笔记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效果


 
Markdown插入图表_第3张图片
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: 默认方向,从上到下

连接线与箭头

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

 
Markdown插入图表_第4张图片
有道云笔记的线条样式
```mermaid
graph TD
A[模块A] -->|A1| B(模块B)
B --> C{判断条件C}
C -->|条件C1| D>模块D]
C -->|条件C2| E((模块E))
C -->|条件C3| F["模块F(引号可转义特殊字符)"]
```
 
Markdown插入图表_第5张图片
印象笔记流程图示例

高级语法(比较少用到)

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; ``` 
样式类

 

 
Markdown插入图表_第6张图片
样式类

原文链接

 

子图(Subgraphs)
subgraph title
graph definition
end
 
Markdown插入图表_第7张图片
子图

插入时序图

```mermaid
sequenceDiagram
A->>B: 是否已收到消息?
B-->>A: 已收到消息
```
 
Markdown插入图表_第8张图片
时序图

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!
```
 
Markdown插入图表_第9张图片
线条样式

高级用法(比较少用)

便签

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

 
Markdown插入图表_第10张图片
便签的用法
```mermaid
sequenceDiagram
participant John
Note left of John:左边的文本

Alice->>John:Hello John, how are you?
Note over Alice,John:跨越两个Actor的便签
```

循环Loops

语法:

loop 循环的文本
... statements... 
end
 
Markdown插入图表_第11张图片
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
 
Markdown插入图表_第12张图片
选择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
```

举个大栗子 :)


 
Markdown插入图表_第13张图片
综合大例子

识别不了换行

```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
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
```
 
Markdown插入图表_第14张图片
甘特图示例
语法说明
语法 功能
title 标题
dateFormat 日期格式
section 模块
done 已经完成
active 当前正在进行
crit 关键阶段
日期缺失 默认从上一项完成后

语法:

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

举个大栗子 :)


 
Markdown插入图表_第15张图片
甘特图综合大例子
```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






转载于:https://www.cnblogs.com/dhcn/p/11276777.html

你可能感兴趣的:(Markdown插入图表)