程序员绘图神器-文字生成流程图的插件flowchart.js
大家在日常工作中需要用到流程图，一般通过word就可以画出流程图，今天介绍一种通过文字生成流程图的js插件，flowchart.js，非常强大，他的原理就是根据文字的结构生成svg图形文件，好了，我们来看看吧。
对于程序员来说这个写几个就能绘制流程图，是不是很牛掰呢,它就是flowchart,js,flowchart.js 是一款文字描述转换流程图的js插件，他的文字描述定义格式如下：
tag=>type: content:>url
tag：标签，用于连接元素时使用start
end
operation
subroutine
condition
inputoutput
下面我们举个例子
st=>start: 开始|past:>http://www.bfw.wiki[blank]
e=>end: 结束:>http://www.bfw.wiki
op1=>operation: 操作|past:$myFunction
op2=>operation: 例子|current
cond=>condition: 是否?|是:>http://www.bfw.wiki[blank]
c2=>condition: 好的|否定
io=>inputoutput: 异常|request
para=>parallel: 并行任务
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->para
c2(true)->io->e
c2(false)->e
完整的代码如下，可在线直接运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flowchart.js · Playground</title>
<style type="text/css">
.end-element {
fill: #FFCCFF;
}
</style>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/raphael.min.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2....点击查看剩余70%
{{collectdata}}
网友评论0