相关文章推荐
文质彬彬的红金鱼  ·  广场舞网盘资源 - 百度·  10 月前    · 
老实的充值卡  ·  蒋 殊 // 夜 行(散文)—中国钢铁新闻网·  11 月前    · 
爱喝酒的甜瓜  ·  抢票大战启幕,只靠“打倒”购票平台解决不了春 ...·  1 年前    · 
仗义的青蛙  ·  GDS(GDS高级土工试验仪器)_百度百科·  1 年前    · 
英俊的鞭炮  ·  Wholesaler of Assam ...·  1 年前    · 
Code  ›  flowchart.js徒手绘制流程图开发者社区
脚本 流程图 chart
https://cloud.tencent.com/developer/article/1615590
完美的苹果
2 年前
作者头像
周星星9527
0 篇文章

flowchart.js徒手绘制流程图

前往专栏
腾讯云
开发者社区
文档 意见反馈 控制台
首页
学习
活动
专区
工具
TVP
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP
返回腾讯云官网
社区首页 > 专栏 > javascript趣味编程 > flowchart.js徒手绘制流程图

flowchart.js徒手绘制流程图

作者头像
周星星9527
发布 于 2020-04-16 17:18:50
4.4K 0
发布 于 2020-04-16 17:18:50
举报

要画20个流程(时序)图,于是昨天捣鼓了到半夜,安装了plantUML + vscode,虽然丑了些,但勉强能看,目前已用plantUML完成了10个。

plantUML虽好,但要安装java运行时。就用一小会却要占用那么多硬盘空间,看了看flowchart.js,也挺香。

flowchart.js is a flowchart DSL and SVG render that runs in the browser and terminal.Nodes and connections are defined in separately so that nodes can be reused and connections can be quickly changed. Fine grain changes to node and connector style can also be made right in the DSL. https://github.com/adrai/flowchart.js

官方站点的代码:

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8">
        <title>flowchart.js · Playground</title>
        <style type="text/css">
          .end-element { fill : #FFCCFF; }
</style>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="http://flowchart.js.org/flowchart-latest.js"></script>
        <!-- <script src="../release/flowchart.min.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', {
                      // 'x': 30,
                      // 'y': 50,
                      'line-width': 3,
                      'maxWidth': 3,//ensures the flowcharts fits within a certian width
                      'line-length': 50,
                      'text-margin': 10,
                      'font-size': 14,
                      'font': 'normal',
                      'font-family': 'Helvetica',
                      'font-weight': 'normal',
                      'font-color': 'black',
                      'line-color': 'black',
                      'element-color': 'black',
                      'fill': 'white',
                      'yes-text': 'yes',
                      'no-text': 'no',
                      'arrow-end': 'block',
                      'scale': 1,
                      'symbols': {
                        'start': {
                          'font-color': 'red',
                          'element-color': 'green',
                          'fill': 'yellow'
                        'end':{
                          'class': 'end-element'
                      'flowstate' : {
                        'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
                        'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
                        'future' : { 'fill' : '#FFFF99'},
                        'request' : { 'fill' : 'blue'},
                        'invalid': {'fill' : '#444444'},
                        'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'APPROVED', 'no-text' : 'n/a' },
                        'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' }
                    $('[id^=sub1]').click(function(){
                      alert('info here');
                })();
            function myFunction(event, node) {
              console.log("You just clicked this node:", node);
</script>
    </head>
        <div><textarea id="code" style="width: 100%;" rows="11">
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past:$myFunction
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request
para=>parallel: parallel tasks
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>

运行效果如下:

简单一些的例子:

st=>start: Start:>http://www.baidu.com[blank]
e=>end:>http://www.baidu.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.baidu.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks
st->op1->cond
cond(yes)->io->e
cond(no)->para
 
推荐文章
文质彬彬的红金鱼  ·  广场舞网盘资源 - 百度
10 月前
老实的充值卡  ·  蒋 殊 // 夜 行(散文)—中国钢铁新闻网
11 月前
爱喝酒的甜瓜  ·  抢票大战启幕,只靠“打倒”购票平台解决不了春运难题丨快评 | 南方周末
1 年前
仗义的青蛙  ·  GDS(GDS高级土工试验仪器)_百度百科
1 年前
英俊的鞭炮  ·  Wholesaler of Assam Tea and Exporter of Assam Tea - Om Adishakti Pvt Ltd
1 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号