【Makedown Flow】使用 Flowchart.js 实

2019-01-30  本文已影响59人  ZONE画派

【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 语法

主要框架

```flow
元素定义

元素连接
```

```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
上一篇下一篇

猜你喜欢

热点阅读