以文本的方式绘制简单的SVG流程图——flowchart.js

介绍

flowchart.js是在浏览器和终端中运行的流程图DSL和SVG渲染。节点和连接是分别定义的,因此可以重复使用节点,并可以快速更改连接。也可以在DSL中对节点和连接器样式进行细微的更改。


以文本的方式绘制简单的SVG流程图——flowchart.js


Github

示例

以下是一个简单的示例(flowchart.js依赖raphael):

以文本的方式绘制简单的SVG流程图——flowchart.js

下面是一段带有颜色的示例:

以文本的方式绘制简单的SVG流程图——flowchart.js

以下是一个完成的demo:

以文本的方式绘制简单的SVG流程图——flowchart.js

节点类型语法

  • start

用作流从其开始的第一个节点。默认文本为“start”

以文本的方式绘制简单的SVG流程图——flowchart.js

  • end

用作流结束的最后一个节点。默认文本为“end”

以文本的方式绘制简单的SVG流程图——flowchart.js

  • operation

表示需要在流中进行操作:

以文本的方式绘制简单的SVG流程图——flowchart.js

  • inputoutput

输入输出

以文本的方式绘制简单的SVG流程图——flowchart.js

  • subroutine(子程序)

指示流中的子流程,并且应该有另一个流程图记录该子流程

以文本的方式绘制简单的SVG流程图——flowchart.js

  • condition(条件)

允许条件或逻辑语句将流定向到两个或多个路径之一

以文本的方式绘制简单的SVG流程图——flowchart.js

  • parallel

允许多个流程同时出现

以文本的方式绘制简单的SVG流程图——flowchart.js

总结

本文简单介绍了flowchart.js在浏览器中的的用法,它还可以在终端使用,如果你有需要在浏览器或者终端绘制简单的流程图,那么flowchart.js将会是你可以选择的工具,感兴趣的可以直接到官网文档在线查看编写效果,可从Github进入!

人已赞赏
技术博文

几个开源的自定义表单设计器源码,推荐给需要的人

2020-7-31 18:29:55

技术博文

微软重启消失10十年的开源生产力工具集项目,并于近日发布了新版

2020-7-31 19:39:15

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索