程序员绘图神器-文字生成流程图的插件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.1.min.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/flowchart.js"></script>
<script>
window.onload = function () {
var btn = document.getElementById("run"),
cd = document.getElementById("code"),
chart;
(btn.onclick = function () {
var code = cd.value;
if (chart) {
chart.clean();
}
chart = flowchart.parse(code);
chart.drawSVG('canvas');
$('[id^=sub1]').click(function() {
alert('info here');
});
})();
};
function myFunction(event, node) {
console.log("You just clicked this node:",
node);
}
</script>
</head>
<body>
<div>
<textarea id="code" style="width: 100%;" rows="11">
st=>start: 开始|past:>http://www.bfw.wiki[blank]
e=>end: 结束:>http://www.bfw.wiki
op1=>operation: 操作|past:$myFunction
op2=>operation: 例子|current
sub1=>subroutine: 另一个任务|invalid
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
para(path1, bottom)->sub1(left)->op1
para(path2, right)->op2->e
st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})</textarea>
</div>
<div>
<button id="run" type="button">Run</button>
</div>
<div id="canvas"></div>
</body>
</html>
{{collectdata}}
网友评论0