Markdown笔记：如何画流程图

Flowchart.js 仅需几行代码即可在 Web 上完成流程图的构建。可以从文字表述中画出简单的 SVG 流程图，也可以画出彩色的图表。

Draws simple SVG flow chart diagrams from textual representation of the diagram http://flowchart.js.org/

先来看一段入门案例

流程图代码在 Markdown 编辑中应该是下面这样的

输出结果大致如下：

在Markdown语法中，流程图的画法和代码段类似，也就是说，流程图是写在两个

之间的。

比如说php代码，会是这样一种格式：

那么流程图就是这样的：

语法

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

前面部分用来定义流程图元素；

后面部分用来连接流程图元素，指定流程图的执行走向。

定义元素阶段的语法是

tag=>type: content:>url

上例中下面部分代码都是定义元素部分

st=>start: Starte=>end: Endop1=>operation: My Operationsub1=>subroutine: My Subroutinecond=>condition: Yes or No?io=>inputoutput: catch something…

说明：

tag 是流程图中的标签，在第二段连接元素时会用到。名称可以任意，一般为流程的英文缩写和数字的组合。

type 用来确定标签的类型，=>后面表示类型。由于标签的名称可以任意指定，所以要依赖type来确定标签的类型

标签有6种类型：start end operation subroutine condition inputoutput

content 是流程图文本框中的描述内容，: 后面表示内容，中英文均可。特别注意，冒号与文本之间一定要有个空格

url是一个连接，与框框中的文本相绑定，:>后面就是对应的 url 链接，点击文本时可以通过链接跳转到 url 指定页面

开始

st=>start: 开始

操作

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

条件

cond=>condition: 确认？

结束

e=>end: 结束

URL（貌似 SF 的编辑器不支持）

e=>点击本结束跳转:>http://https://segmentfault.com/blog/ingood

连接流程图元素

示例代码后面部分

st->op1->condcond(yes)->io->econd(no)->sub1(right)->op1

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

说明：

使用 -> 来连接两个元素

对于condition类型，有yes和no两个分支，如示例中的cond(yes)和cond(no)

每个元素可以制定分支走向，默认向下，也可以用right指向右边，如示例中sub1(right)