如何用vscode愉快的写报告和绘图

在学习使用markdown的过程中,越来越发现,通过改造,安装vscode的插件,与markdown结合后,更大的提高了工作效率。可以在日常工作与生活中,因应不同的场景需求:

  • 写研究报告
  • 输入数学公式
  • 绘制专业图表

写研究报告

这篇文章就是按照普通研究报告的基本格式,通过markdown写就的。markdown的妙处是实现了内容与样式的分离,内容写起来非常简洁,样式依靠CSS来设定。

内容部分操作:

  • 这是斜体
  • 这是粗体
  • 这是删除线
  • 下面是常用 Emoji & Font-Awesome,更多 请点击这里
    :smile: :scream: :thumbsup: :pray: :muscle: :tangerine: :chart_with_upwards_trend:
  • 文字引用:

    明月松间照,清泉石上流

  • 有序列表:
    1.有序列表项1
    2.有序列表项1
  • 表格显示:
项目 价格 数量
计算机 \$1600 5
手机 \$12 12
^ \$1 234
> ce ce
  • 代办事项
    • 2020工作计划
    • 策略回测系统

形式部分设置:

  • 笔者根据普通研报的基本格式,包括标题、正文字体、字体大小、首行缩进、行间距等,配置成一个css文件,放到这个目录C:\Users\用户\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.5.0\node_modules\@shd101wyy\mume\styles\preview_theme下。作为vscode的markdown插件(Markdown Preview Enhanced)的默认css。注意该目录下的0.5.0是vscode的MPE插件版本号,可能因该插件更新而变化。
    指定默认css

  • 然后在预览文档右键弹出菜单中操作,自动生成pdf。

生成pdf

输入数学公式

矩阵示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$$
\begin{matrix}
a_{11} & a_{12} & a_{13} & \cdots & a_{1n} \\
a_{21} & a_{22} & a_{23} & \cdots & a_{2n} \\
\vdots & \vdots & \vdots & \ddots & \vdots \\
a_{n1} & a_{n2} & a_{n3} & \cdots & a_{2n} \\
\end{matrix}
$$
$$
\left[
\begin{array}{cc|c}
1&2&3\\
4&5&6
\end{array}
\right]
$$

生成pdf

方程式示例

1
2
3
4
5
6
7
$$
f(n) =
\begin{cases}
n/2, & \text{if $n$ is even} \\
3n+1, & \text{if $n$ is odd}
\end{cases}
$$

生成pdf

常用公式速查

  • 公式1
  • 公式1
  • 公式1

绘制专业图表

使用Mermaid绘制

1、流程图

1
2
3
4
5
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]

生成pdf

2、序列图

1
2
3
4
5
6
7
8
9
10
11
12
sequenceDiagram
participant Alice
participant Bob
Alice->>John:hello John
loop healthcheck
John-->>John:fight against
end
Note right of John:rational

John->>Alice:great!
John->>Bob:how about you
Bob->>John:good!

生成pdf

3、甘特图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    gantt
dateFormat YYYY-MM-DD
title 软件开发甘特图
section 设计
需求 :done, des1, 2014-01-06,2014-01-08
原型 :active, des2, 2014-01-09, 3d
UI设计 : des3, after des2, 5d
未来任务 : des4, after des3, 5d
section 开发
学习准备理解需求 :crit, done, 2014-01-06,24h
设计框架 :crit, done, after des2, 2d
开发 :crit, active, 3d
未来任务 :crit, 5d
耍 :2d
section 测试
功能测试 :active, a1, after des3, 3d
压力测试 :after a1 , 20h
测试报告 : 48h

生成pdf

4、Class diagram

1
2
3
4
5
6
7
8
9
10
11
12
13
14
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

生成pdf

flow流程图

1
2
3
4
5
6
7
8
9
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

生成pdf

UML时序图

1
2
3
4
5
6
7
8
9
10
11
Title: 标题:复杂使用
对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗?
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩

生成pdf

如果文章对您有用请随意打赏,谢谢支持!