flowchart流程图(以文本的语法在浏览器或终端构造流程图)

介绍

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


flowchart流程图(以文本的语法在浏览器或终端构造流程图)(1)


Github示例

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

flowchart流程图(以文本的语法在浏览器或终端构造流程图)(2)

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

flowchart流程图(以文本的语法在浏览器或终端构造流程图)(3)

以下是一个完成的demo:

flowchart流程图(以文本的语法在浏览器或终端构造流程图)(4)

节点类型语法
  • start

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

flowchart流程图(以文本的语法在浏览器或终端构造流程图)(5)

  • end

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

flowchart流程图(以文本的语法在浏览器或终端构造流程图)(6)

  • operation

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

flowchart流程图(以文本的语法在浏览器或终端构造流程图)(7)

  • inputoutput

输入输出

flowchart流程图(以文本的语法在浏览器或终端构造流程图)(8)

  • subroutine(子程序)

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

flowchart流程图(以文本的语法在浏览器或终端构造流程图)(9)

  • condition(条件)

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

flowchart流程图(以文本的语法在浏览器或终端构造流程图)(10)

  • parallel

允许多个流程同时出现

flowchart流程图(以文本的语法在浏览器或终端构造流程图)(11)

总结

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

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页