markdown流程图

Posted Live curious

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了markdown流程图相关的知识,希望对你有一定的参考价值。

markdown流程图

博客园并不支持解析流程图,详细效果可在Typora中查看,这里以图片示意

参考

https://segmentfault.com/a/1190000006247465

https://mermaidjs.github.io/

http://flowchart.js.org/

https://bramp.github.io/js-sequence-diagrams/

http://www.360doc.com/content/16/0407/20/5315_548673720.shtml

流程图1

语法

以```flow开头 , ```结尾

流程图的语法大体分为两部分:

  • 前面部分用来定义流程图元素
  • 后面部分用来连接流程图元素,指定流程图的执行走向

定义元素阶段的语法是

tag=>type: content:>url

说明

  • tag 是流程图中的标签,名称可以任意,一般为流程的英文缩写和数字的组合。
  • type 用来确定标签的类型,=>后面表示类型。由于标签的名称可以任意指定,所以要依赖type来确定标签的类型
  • 标签有6种类型:start end operation subroutine condition inputoutput
  • content 是流程图文本框中的描述内容,: 后面表示内容,中英文均可。特别注意,冒号与文本之间一定要有个空格

开始

st=>start: 开始

操作

op1=>operation: 操作、执行说明

条件

cond=>condition: 确认?

结束

e=>end: 结束

连接流程图元素

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

连接流程图元素阶段的语法就简单多了,直接用->来连接两个元素,几点说明如下:

说明

  • 使用 -> 来连接两个元素
  • 对于condition类型,有yesno两个分支,如示例中的cond(yes)cond(no)
  • 每个元素可以制定分支走向,默认向下,也可以用right指向右边,如示例中sub1(right)

示例

​```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end: over
st->op->cond
cond(yes)->e
cond(no)->op
​```

流程图2

语法

以```mermaid 开头,```结尾

  • 按结构对应分为4种:graph TB/BT/LR/RL

比如

graph LR A-->B

  • 形状
graph LR A[矩形] B(圆形) C{菱形}

  • 箭头
---无箭头
-->箭头
-->|插入文本|
graph LR A---B B-->C C-->|insert|D

示例

​```mermaid
graph LR
A[Import] -->B[Tidy]
	B -->C{Understand}
	C -->D[Transform]
	C -->E[Vishualise]
	C -->F[Model]
	Understand -->G[Communicate]
​```

时序图

与前两个类似语法,不再详述

​```sequence
Title: Here is title
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
​```

以上是关于markdown流程图的主要内容,如果未能解决你的问题,请参考以下文章

markdown PHPExcel Notes和代码片段

markdown Git代码片段

markdown 岩组代码片段

markdown [magento] - 代码片段

markdown 在WordPress中使用jQuery代码片段

markdown 打字稿...编码说明,提示,作弊,指南,代码片段和教程文章