使用Markdown 语法绘制相关的流程图以及其他相关的图
- 使用Markdown 语法绘制相关的流程图以及其他相关的图
- vscode以及
markdown preview enhanced
插件介绍 - 使用markdown绘制相关图像
- 1.流程图(flow chart)
- 流程图语法详解
- 示例文件
- 2.时序图(顺序图)
- 3.流程图和时序图渲染
- 4.plantuml创建各种图形
- 5.使用graphviz来绘制各种图形
- 6.vega和vega-lite的支持的静态图像
- 1.流程图(flow chart)
- vscode以及
vscode以及markdown preview enhanced
插件介绍
mac下一直没有找到合适的markdown软件,搜索了一下vscode
相关的插件发现有一个Markdown Preview Enhanced
甚是好用,特此记录。
Markdown Preview Enhanced
- 基本markdown语法
- 数据公式
- 图像[流程图/时序图/UML图...]
- 静态图像[柱状图]
- TOC目录预览
- 文件导入
- code chunk
- 幻灯片
- 丰富的文档导出
- 下载vscode
- 下载markdown preview enhanced插件
- 编写markdown文件
- mac下使用
command+shift+p
调用出来markdown open preview来查看预览。 - 或者可以使用
command+k
然后按v
直接预览
使用markdown绘制相关图像
markdown绘制图像
1.流程图(flow chart)
-
flow
代码块中的内容将会被flowchart.js
渲染
//定义类型和描述
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 判断确认?
st->op->cond
cond(yes)->e
cond(no)->op
流程图语法详解
## 操作块(格式为:变量=>操作块: 备注名)
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
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
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
prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
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
4.plantuml创建各种图形
- 可以安装graphviz来辅助生成各种图形
-
puml或plantuml
代码中的内容将会被PlantUML渲染
注意:也可以为图像的容器添加属性,例如居中{align="center"}
@startuml
A -> B
@enduml
@startdot
digraph G {
A -> B;
}
@enddot
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;
}
6.vega和vega-lite的支持的静态图像
-
vega
代码块中的内容会被vega渲染 -
vega-lite
代码中的内容会被vega-lite渲染 - 支持
JSON
和YAML
的数据源输入
vega-lite-docs
vega-docs
示例文件中需要自己导入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"}
}
}
注意:
当保存md文件的时候,所有的图像文件都会被保存为png文件到imageFolderPath
目录。同时也可以在每个图像中设置保存的图像名称{filename="图片.png"}
。
比如:
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;