markdown语法

发表于 | 分类于 | | 本文总阅读量 次

Markdown Preview Enhanced 内部支持 mermaid, PlantUML, WaveDrom, GraphViz，Vega & Vega-lite，Ditaa 图像渲染。 你也可以通过使用 Code Chunk 来渲染 TikZ, Python Matplotlib, Plotly 等图像。

基本流程图

Markdown常用的元素有以下几种：

  • start
  • end
  • operation
  • condition
  • inputoutput
  • subroutine

以简单的登录场景为例，流程图代码

1
2
3
4
5
6
7
8
9
10
11
start=>start: 开始
loginInfo=>inputoutput: 登录数据
verifyLogin=>subroutine: 登录验证
isSuccess=>condition: 验证成功？
respondSuccess=>operation: 响应成功
responseFailure=>operation: 响应失败
end=>end: 结束

start->loginInfo->verifyLogin->isSuccess
isSuccess(yes)->respondSuccess->end
isSuccess(no)->responseFailure->end

注意：冒号和名称之间需要有一个空格。

方向调整 绘制流程图有时会出现比较一言难尽的情况

1
2
3
4
5
6
7
8
9
10
11
start=>start: start
operation1=>operation: operation1
isSuccess=>condition: success?
operation2=>operation: operation2
operation3=>operation: operation3
operation4=>operation: operation4
end=>end: 结束

start->operation1->isSuccess
isSuccess(yes)->operation2->end
isSuccess(no)->operation3->operation4->operation1

这种情况下可以使用left、right和bottom关键字来调整线条的位置使流程图更加清晰，例如此处给operation4元素添加right关键字，就可以分离重叠的线条。

1
2
3
4
5
6
7
8
9
10
11
start=>start: start
operation1=>operation: operation1
isSuccess=>condition: success?
operation2=>operation: operation2
operation3=>operation: operation3
operation4=>operation: operation4
end=>end: 结束

start->operation1->isSuccess
isSuccess(yes)->operation2->end
isSuccess(no)->operation3->operation4(right)->operation1

如果给condition元素添加这些关键字的话会调整整个分支的方向：

1
2
3
4
5
6
7
8
9
10
11
start=>start: start
operation1=>operation: operation1
isSuccess=>condition: success?
operation2=>operation: operation2
operation3=>operation: operation3
operation4=>operation: operation4
end=>end: 结束

start->operation1->isSuccess
isSuccess(yes)->operation2->end
isSuccess(no,left)->operation3->operation4(left)->operation1

状态标记 Markdown会使用不同的颜色来标记状态，状态主要有以下几种：

  • past
  • current
  • future
  • approved
  • rejected
  • invalid

以软件生命周期的一部分为例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
start=>start: 开始|past
requirementAnalysis=>operation: 需求分析|past
design=>operation: 软件设计|past
coding=>operation: 编码|past
selfTestingPased=>condition: 自测通过？|approved
debug=>operation: debug|invalid
submitTestingPased=>condition: 提测通过？|rejected
modifyBug=>operation: 修bug|current
deploy=>operation: 部署|future
end=>end: 结束|future

start->requirementAnalysis->design->coding->selfTestingPased
selfTestingPased(no)->debug(right)->selfTestingPased
selfTestingPased(yes)->submitTestingPased
submitTestingPased(yes)->deploy->end
submitTestingPased(no)->modifyBug(right)->submitTestingPased

箭头高亮 可以通过高亮某些箭头来标记出主流程：

1
2
3
4
5
6
7
8
9
10
11
12
13
start=>start: 开始
loginInfo=>inputoutput: 登录数据
verifyLogin=>subroutine: 登录验证
isSuccess=>condition: 验证成功？
respondSuccess=>operation: 响应成功
responseFailure=>operation: 响应失败
end=>end: 结束

start->loginInfo->verifyLogin->isSuccess
isSuccess(yes)->respondSuccess->end
isSuccess(no)->responseFailure->end

start@>loginInfo({"stroke":"Red"})@>verifyLogin({"stroke":"Red"})@>isSuccess({"stroke":"Red"})@>respondSuccess({"stroke":"Red"})@>end({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})

流程图语法详解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
## 操作块(格式为:变量=>操作块: 备注名)
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

时序图

注意:其实时序图使用platuml也可以画的很美观 platuml-sequence

  • sequence代码块中的内容将会被js-sequence-diagrams渲染
  • 支持两个主题simple(default)和hand
1
2
3
4
5
6
bgbiao-> bianbian: good morning
note left of bgbiao: man
bianbian -> bgbiao: eat something
note right of bianbian: woman
  
note over bgbiao: test

Mermaid

Mermaid可以用来渲染流程图和时序图

注意:{code_block=true}会影藏图像 Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。

定义节点 |表述|说明| |—|—| |id[文字]| 矩形节点| |id(文字)| 圆角矩形节点| |id((文字)) |圆形节点| |id>文字]| 旗帜状节点| |id{文字}| 菱形节点| 定义连线 |表述| 说明| |—|—| |>| 添加尾部箭头| |-| 不添加尾部箭头| |– |单线| |–text–| 单线上加文字| |==| 粗线| |==text==| 粗线加文字| |-.-| 虚线| |-.text.-| 虚线加文字|

流程图方向有下面几个值

  • TB 从上到下
  • BT 从下到上
  • RL 从右到左
  • LR 从左到右
  • TD 同TB

子流程图 格式

1
2
3
subgraph title
    graph definition
end

示例:

1
2
3
4
5
6
7
8
9
10
11
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

自定义样式

语法：style id 具体样式

1
2
3
4
graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5

plantuml创建各种图形

  • 可以安装graphviz来辅助生成各种图形
  • puml或plantuml代码中的内容将会被PlantUML渲染 注意：也可以为图像的容器添加属性，例如居中{align=”center”}

使用graphviz来绘制各种图形

使用Viz.js来渲染dot语言图形。

  • viz或者dot代码块中的内容将会被Viz.js渲染
  • 可以通过{engine=”…”}来选择不同的渲染引擎。引擎circo,dot,neato,osage,或者twopi.

注意:默认的dot是二叉树，twopi是依赖树，两种常用的类型

vega和vega-lite的支持的静态图像

  • vega代码块中的内容会被vega渲染
  • vega-lite代码中的内容会被vega-lite渲染
  • 支持JSON和YAML的数据源输入 vega-lite-docs vega-docs
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    {
      "$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"}
      }
    }

https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/diagrams

hexo中支持流程图

  1. hexo-filter-mermaid-diagrams: brew install yarn 进入到博客的根目录，一定要在博客的根目录执行yarn add hexo-filter-mermaid-diagrams 执行完成后在博客根目录下的node_modules种看下有没有hexo-filter-mermaid-diagrams这个插件文件夹，如果没有，说明没安装成功，安装成功后执行下一步，打开博客根目录下面的_config.yml文件，在底部插入以下代码：
    1
    2
    3
    4
    5
    6
    # mermaid chart
    mermaid: ## mermaid url https://github.com/knsv/mermaid
      enable: true  # default true
      version: "7.1.2" # default v7.1.2
      options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
        #startOnload: true  // default true

完成上一步操作之后打开主题目录的themes/next/layout/_partials/footer.swig，这里因为我用的是next主题，其他主题应该大同小异，在footer.swig文件最后加上以下代码：

1
2
3
4
5
6
7
8
{% if theme.mermaid.enable %}
  <script src='https://unpkg.com/mermaid@{{ theme.mermaid.version }}/dist/mermaid.min.js'></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({theme: 'forest'});
    }
  </script>
{% endif %}

添加完成后，回到博客根目录的_config.yml，把external_link的值改为false，默认的为true，这一步绝大多数教程中都没有写 Hexo中引入Mermaid流程图：点击查看 hexo-filter-mermaid-diagrams插件开发杂谈:点击查看 插件官方位置:点击查看 插件官方使用教程:点击查看

  1. hexo-filter-flowchart npm install –save hexo-filter-flowchart
  2. hexo-filter-sequence npm install –save hexo-filter-sequence
坚持原创技术分享，您的支持将鼓励我继续创作！