马克飞象markdown 绘制流程图
环境: 马克飞象
题外话:
最近学习了markdown, 真是人类的一大恩赐, 不满足于一些基本的书写语法, 于是就想着在网上搜索了一下markdown流程图的制作教程, 没想到还真有, 而且很多, 细细的看了一下, 发现最终大都都指向了两个地方, 一个是mermaid, 一个是flowchart.js, 而赶巧马克飞象都支持. 所以在这里总结一下, 让他人少走些弯路.
1. mermaid
mermaid通常支持三种图形的绘制, 分别是流程图, 时序图和甘特图, 这里只介绍流程图, 其余的图形大家如果有兴趣的话可以去看下官方文档.
马克飞象和原始环境及语法有所差异, 下面的介绍以马克飞象环境为主:
大家在马克飞象编辑框输入以下内容即可生成一个最简单的a到b的流程指向:
```graphTB
a-->b
```
- 简书的markdown编辑器还不支持该功能, 我也懒的截图, 大家可以直接拷到自己的马克飞象里看效果.
- 其中
graphTB是声明图层是由上到下绘制的, mermaid一共支持四中绘制方式, 分别是:
graphLR --从左到右, 默认方式
graphRL --从右到左
graphTB --从上到下
graphBT --从下到上
graphTD --同graphTB
-
a-->b, 其中a和b是节点,-->是导向, 切记导向只能由单独一个节点导向另一个节点, 不能连续导向, 像a-->b-->c是不允许的, 需写成a-->b换行b-->c.
其中mermaid的节点形式由以下5种:
a[A]-->b[B] --这里相当于把A节点和B节点的值赋给了a和b, 在后面的流程中, 可直接使用a和b来代替A和B节点, 显示为方形框, 由A到B, 中间用实线连接, 带箭头
a(A)-->b(B) --显示为方形圆角框
a((A))-->b((B)) --显示为圆形框
a{A}-->b{B} --显示为菱形框
a>A]-->b>B] --显示为左边>形, 右边方形框
导向形式主要有以下4种:
a-->b --由a到b, 中间用实线连接, 带箭头
a---b --由a到b, 中间用实线连接, 无箭头
a--text--->b --由a到b, 用实线连接, 中间带文字, 带箭头
a--text---b --由a到b, 用实线连接, 中间带文字, 无箭头
mermaid其实还支持子程序和虚线导向, 但因马克飞象里还没有引入, 所以这里不做介绍.
flowchart.js
在马克飞象里输入以下代码, 将会显示出来一个经典的流程图例:
```flow
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes or No?:>http://www.google.com
io=>inputoutput: catch something...
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
```
其中上半部分是声明部分, =>前后不许有空格, 前面为变量名, 后面为所处状态, 状态后跟一个:, 接节点的名称, 节点名称后跟一个:>, 接网址. 网址是可选项, 当有设置时, 节点将是一个超链接.
- flowchart.js流程图中有六个状态, 分别是:
start --开始
end --结束
inputoutput --输入输出
operation --操作
condition --条件
subroutine --子程序
下半部分是流程导向, 和merima不同, flowchart.js可以连续导向, a->b->c这样的写法是合法的.
