使用vscode的markdown插件绘图写文档
2018-08-21 本文已影响549人
9c46ece5b7bd
使用Markdown 语法绘制相关的流程图以及其他相关的图
vscode以及markdown preview enhanced插件介绍
mac下一直没有找到合适的markdown软件，搜索了一下vscode相关的插件发现有一个Markdown Preview Enhanced 甚是好用,特此记录。
- 基本markdown语法
- 数据公式
- 图像[流程图/时序图/UML图...]
- 静态图像[柱状图]
- TOC目录预览
- 文件导入
- code chunk
- 幻灯片
- 丰富的文档导出
- 下载vscode
- 下载markdown preview enhanced插件
- 编写markdown文件
- mac下使用
command+shift+p调用出来markdown open preview来查看预览。 - 或者可以使用
command+k然后按v直接预览
使用markdown绘制相关图像
1.流程图(flow chart)
-
flow代码块中的内容将会被flowchart.js渲染
//定义类型和描述
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 判断确认？
st->op->cond
cond(yes)->e
cond(no)->op
markdown-flow
流程图语法详解
## 操作块(格式为:变量=>操作块: 备注名)
st=> start: 开始
e=>end: 结束
#普通操作块 opration
op1=>opration: 第一个操作块
op2=>opration: 第二个操作块
#判断块 condition
cond1=>condition: 第一个判断
cond2=>condition: 第二个判断
#输入输出块 inputoutput[平行四边形]
io1=>inputoutput: 输入输出块1
io2=>inputoutput: 输入输出块2
#子任务块
sub1=>subroutine: 子任务1
sub2=>subroutine: 子任务2
## 判断和位置控制
#判断流程控制
cond1(yes)->op1 #yes 的时候回到 op1
cond1(no)->e #no 的时候 去结束
#位置指定
cond1(no)->op2(right)->op1 #控制 op2 位置置于右边，再由op2 返回 op1 (好像不能向左)
#还可以这样 cond1(no,right)
cond1(yes)->e
## 流程控制
#分着写
st->op1
op1->e
#合着写
st->op1->e
#判断也是一样：
st->cond
cond(yes)->io
cond(no)->op1
示例文件
st=>start: 鉴权
e=>end: 结束退出
cond1=>condition: user==bgbiao
product=ddaotian
productcheck=>condition: ddaotian类型产品库存
(ecs,bss,vpc,eip,hids)
op1=>operation: 发起预订请求
拆单并库存检测
op2=>operation: info:生产指定类型产品
(DAOTIAN:ecs,natip,eip,hids)
op3=>operation: 鉴权失败
op4=>operation: 库存检测失败
io1=>inputoutput: 返回产品相关信息
ECS,NATIP,EIP,HIDS
io2=>inputoutput: info:无此类型产品
st->cond1
cond1(yes)->op1->productcheck(yes)->op2->io1->e
cond1(no)->op3->e
cond1(yes)->op1->productcheck(no)->op4->io2->e
flow-example
2.时序图(顺序图)
注意:其实时序图使用platuml也可以画的很美观
platuml-sequence
-
sequence代码块中的内容将会被js-sequence-diagrams渲染 - 支持两个主题
simple(default)和hand
bgbiao-> bianbian: good morning
note left of bgbiao: man
bianbian -> bgbiao: eat something
note right of bianbian: woman
note over bgbiao: test
sequence-example
3.流程图和时序图渲染
Mermaid可以用来渲染流程图和时序图
-
mermaid代码块中的内容将会被渲染mermaid图像 - mermaid-docs图像文档
注意:{code_block=true}会影藏图像
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
sequenceDiagram
participant Alice
participant Bob
Alice->John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
sequence-example1
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
gantt-example
4.plantuml创建各种图形
- 可以安装graphviz来辅助生成各种图形
-
puml或plantuml代码中的内容将会被PlantUML渲染
注意：也可以为图像的容器添加属性，例如居中{align="center"}
@startuml
A -> B
@enduml
image.png
@startdot
digraph G {
A -> B;
}
@enddot
image.png
5.使用graphviz来绘制各种图形
使用Viz.js来渲染dot语言图形。
-
viz或者dot代码块中的内容将会被[Viz.js](https://github.com/mdaines/viz.js )渲染 - 可以通过
{engine="..."}来选择不同的渲染引擎。引擎circo,dot,neato,osage,或者twopi.
注意:默认的dot是二叉树，twopi是依赖树，两种常用的类型
digraph G {
A -> B;
A -> c;
B -> D;
B -> E;
}
graphviz-dot
6.vega和vega-lite的支持的静态图像
示例文件中需要自己导入csv格式或者json格式数据
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
{"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
{"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"}
}
}
image.png
注意:当保存md文件的时候，所有的图像文件都会被保存为png文件到imageFolderPath目录。同时也可以在每个图像中设置保存的图像名称{filename="图片.png"}。
比如:
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
