使用vscode的markdown插件绘图写文档

使用Markdown 语法绘制相关的流程图以及其他相关的图

• 使用Markdown 语法绘制相关的流程图以及其他相关的图
  • vscode以及markdown preview enhanced插件介绍
  • 使用markdown绘制相关图像
    • 1.流程图(flow chart)
      • 流程图语法详解
      • 示例文件
    • 2.时序图(顺序图)
    • 3.流程图和时序图渲染
    • 4.plantuml创建各种图形
    • 5.使用graphviz来绘制各种图形
    • 6.vega和vega-lite的支持的静态图像

vscode以及markdown preview enhanced插件介绍

mac下一直没有找到合适的markdown软件，搜索了一下vscode相关的插件发现有一个Markdown Preview Enhanced 甚是好用,特此记录。

Markdown Preview Enhanced

• 基本markdown语法
• 数据公式
• 图像[流程图/时序图/UML图...]
• 静态图像[柱状图]
• TOC目录预览
• 文件导入
• code chunk
• 幻灯片
• 丰富的文档导出

1. 下载vscode
2. 下载markdown preview enhanced插件
3. 编写markdown文件
4. mac下使用command+shift+p调用出来markdown open preview来查看预览。
5. 或者可以使用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

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 
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的支持的静态图像

• 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"}
  }
}

image.png

注意:当保存md文件的时候，所有的图像文件都会被保存为png文件到imageFolderPath目录。同时也可以在每个图像中设置保存的图像名称{filename="图片.png"}。

比如:

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;