id_start=>start:               开始(start)
id_end=>end:                   结束(end)，可以点击:>https://cn.bing.com
id_operation=>operation:       操作(operation)
id_subroutine=>subroutine:     子程序(subroutine)
id_condition=>condition:       判断(condition)
id_inputoutput=>inputoutput:   输入输出(inputoutput)

id_start->id_operation->id_condition
id_condition(yes)->id_inputoutput->id_end
id_condition(no)->id_subroutine->id_inputoutput

【Makedown Flow】使用 Flowchart.js 实现文本绘制简单 SVG 流程图表
不同的 Blog 平台对 Makedown 的解析方式不一样。

简书的 Makedown 不支持 flow 语法，CSDN 的也差了一些。

仅供参考：https://blog.csdn.net/wilson1068/article/details/86708610

SVG（Scalable Vector Graphics，可缩放矢量图形）
可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG 由 W3C 制定，是一个开放标准。

SVG 主要支持以下几种显示对象:

类型 示例
矢量显示对象 矩形、圆、椭圆、多边形、直线、任意曲线
嵌入式外部图形 PNG、JPEG、SVG 等
文字对象

Flow Chart（流程图）
流程图能够直观的表示一些处理逻辑和顺序，是表示算法思路的一种极好的方式。

千言万语不如一张图。

流程图可以分为以下四种类型：

文件流程图
数据流程图
系统流程图
程序流程图
一般来说，流程图的常用的表示有：

关键节点 说明 图形表示
开始 / 结束 代表一个流程开始和结束 圆角矩形
处理 表示流程图中的一个处理或者步骤 矩形
判断 对一个条件进行判断抉择 菱形
输入 / 输出 表示信息与外界的交互 平行四边形
工作流方向 变成流程图执行逻辑 箭头
预定义 表示决定下一个步骤的一个子进程 两个上下边重合的嵌套矩形

其它常用的流程图符号：

flowchart.js
flowchart.js 是一个通过分析流程图文本，绘制简单 SVG 图像显示流程图的库（JavaScript）。

流程图的组成是图示+逻辑，所以 flowchart.js 存在元素的定义和元素的连接：

Flow 元素定义
元素定义形式：

成员=>类型: 内容[:>链接]

示例：
    id_start=>start:        这是一个开始的图例
    id_operation=>operation: 这是一个操作的图例，你可以点击跳转:>https://cn.bing.com
    id_condition=>condition: 这是一个判断的图例
    id_end=>end:       这是一个结束的图例，但我可
                              以随便换行！！

上面的 [ ] 表示可选择添加。

::: alert-info

注意：
    上面有空格的地方可以输入多个空格（至少要有一个空格）。
    但是没有空格的地方一定要连起来（不能添加空格）。

:::

表示定义一个流程图节点类型的成员

支持的元素：

元素 说明 图例
start 开始 圆角矩形
end 结束 圆角矩形
operation 操作 矩形
subroutine 预定义（子程序） 两个上下边重合的嵌套矩形
condition 判断（条件） 菱形
inputoutput 输入输出 平行四边形
(content) 图例上显示的文本内容（不是可定义的图例类型），可以换行
(url) 图例文本上的超链接（不是可定义的图例类型），可选添加

Flow 元素连接
元素连接形式：

成员[(yes | no)]->成员[->成员[(yes | no)]]
   
    id_start=>start:        这是一个开始的图例
    id_operation=>operation: 这是一个操作的图例，你可以点击跳转链接:>https://cn.bing.com
    id_condition=>condition: 这是一个判断的图例
    id_end=>end:       这是一个结束的图例，但
               我可以随便换行！！
示例：
    id_start->id_operation->id_condition
    id_condition(yes)->id_end
    id_condition(no)->id_operation

上面的 [ ] 仅在成员是 condition（判断类型）时才能添加，而且只能是小写的 yes 或 no。

Makedown 中示例 Flow 语法
主要框架

元素定义

元素连接

id_start=>start:               开始(start)
id_end=>end:                   结束(end)，可以点击:>https://cn.bing.com
id_operation=>operation:       操作(operation)
id_subroutine=>subroutine:     子程序(subroutine)
id_condition=>condition:       判断(condition)
id_inputoutput=>inputoutput:   输入输出(inputoutput)

id_start->id_operation->id_condition
id_condition(yes)->id_inputoutput->id_end
id_condition(no)->id_subroutine->id_inputoutput

id_start=>start:               开始(start)
id_end=>end:                   结束(end)，可以点击:>https://cn.bing.com
id_operation=>operation:       操作(operation)
id_subroutine=>subroutine:     子程序(subroutine)
id_condition=>condition:       判断(condition)
id_inputoutput=>inputoutput:   输入输出(inputoutput)

id_start->id_operation->id_condition
id_condition(yes)->id_inputoutput->id_end
id_condition(no)->id_subroutine->id_inputoutput
```flow
id_start=>start:        这是一个开始的图例
id_operation=>operation: 这是一个操作的图例，你可以点击跳转:>https://cn.bing.com
id_condition=>condition: 这是一个判断的图例
id_end=>end:       这是一个结束的图例，但我可
                          以随便换行！！

id_start->id_operation->id_condition
id_condition(yes)->id_end
id_condition(no)->id_operation
```
id_start=>start:        这是一个开始的图例
id_operation=>operation: 这是一个操作的图例，你可以点击跳转:>https://cn.bing.com
id_condition=>condition: 这是一个判断的图例
id_end=>end:       这是一个结束的图例，但我可
                              以随便换行！！

id_start->id_operation->id_condition
id_condition(yes)->id_end
id_condition(no)->id_operation

作者：ZONE画派
链接：https://www.jianshu.com/p/42c9b0d093cb
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。