相关文章推荐
神勇威武的楼梯  ·  单行子查询返回多个行解决办法update-掘金·  2 年前    · 
傲视众生的白开水  ·  CUDA中关于C++特性的限制 - ...·  2 年前    · 
闷骚的口罩  ·  Android之内存泄漏分析_android ...·  2 年前    · 
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
 
推荐文章
神勇威武的楼梯  ·  单行子查询返回多个行解决办法update-掘金
2 年前
傲视众生的白开水  ·  CUDA中关于C++特性的限制 - bookfree - 博客园
2 年前
闷骚的口罩  ·  Android之内存泄漏分析_android shallow heap retained heap_我有我的方式的博客-CSDN博客
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号