专栏首页javascript趣味编程flowchart.js徒手绘制流程图

flowchart.js徒手绘制流程图

要画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">
    <head>
        <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>
    <body>
        <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
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1

运行效果如下:

不说了,广告时间又到了,现在植入广告:

几个《传热学》相关的小程序总结如下,可在微信中点击体验:

  1. 有限元三角单元网格自动剖分
  2. Delaunay三角化初体验 (理论戳这)
  3. Contour等值线绘制 (理论戳这)
  4. 2D非稳态温度场有限元分析
  5. 1D稳态导热温度场求解 (源码戳这)
  6. 1D非稳态导热温度场求解程序 (源码戳这)
  7. 2D稳态导热温度场求解 (源码戳这)
  8. 普朗克黑体单色辐射力

《传热学》相关小程序演示动画如下(其中下图1D非稳态导热计算发散,调小时间步长后重新计算,结果收敛!):

黑体单色辐射力如下图,可见温度越高,同频率辐射力越大:

《(计算)流体力学》中的几个小程序,可在微信中点击体验:

  1. Blasius偏微分方程求解速度边界层理论这里
  2. 理想流体在管道中的有势流动源码戳这
  3. 涡量-流函数法求解顶驱方腔流动源码戳这
  4. SIMPLE算法求解顶驱方腔流动源码戳这
  5. Lattice Boltzmann Method计算绕流演示参考源码

关于《(计算)流体力学》相关的几个小程序演示动画如下:

LBM(=Lattice Boltzmann Method)计算得到的圆柱绕流“卡门涡街”演示(由于网格较少,分辨率低,圆柱近乎正方形):

顺便,《(热工过程)自动控制》中关于PID控制器的仿真可点击此处体验:PID控制演示小程序,(PID控制相关视频见:基础/整定/重要补充)。动画如下:

(正文完!)

本文分享自微信公众号 - 传输过程数值模拟学习笔记(SongSimStudio),作者:艾谁谁

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 7.1使用javascript多快好省绘制简单CAD图纸

    [题引]:CAD(计算机辅助制图)是随着计算机技术发展而来的新技术,用于精确绘制。图纸上承理论设计,下接生产制造,重要性不言而喻。当前CAD软件种类繁多...

    周星星9527
  • 3.1.1 借助显卡GPU绘制Contour

    如何绘制标量场呢?我们常用诸如商业软件Tecplot,或者基于Python的开源软件包matplotlib中的contour绘制Contour图形(等值线)。这...

    周星星9527
  • 5.2 二维导热算例

    本节算例使用actionScript编写,与javascript语法相近。主要阅读理解其算法,可以自己试着开发二维程序。

    周星星9527
  • 给大型机插上翅膀,IBM Z/os 研发团队 DevOps 转型实践

    但见新人笑,哪闻旧人哭,杜甫的诗句很好的诠释了现在 IT 和互联网行业对待技术的态度,区块链、AI、大数据、AR/VR 等新技术层出不穷,每个人都在追逐 The...

    CODING研发管理系统
  • 做计算机视觉的你,是如何拿到大厂Offer的?

    其实主要看自己平时的积累,当然运气也重要,已经拿到腾讯ailab的实习offer。

    AI研习社
  • GBDT、随机森林、xgboost算法原理解析视频公开

    xgboost是大规模并行boosted tree的工具,它是目前最快最好的开源boosted tree工具包,比常见的工具包快10倍以上。在数据科学方面,有大...

    机器学习AI算法工程
  • 敏捷回顾(二)如何设计敏捷回顾?

    作为回顾引导师,有一个可用来设计回顾的回顾练习工具箱很重要。这个工具箱可以帮助你引导回顾,为你的团队提供

    砖家认证
  • [linux][network]ICMP协议分析

    前言: ICMP比较基础,说简单不简单,说难不难。 简单在于字段少,不能携带用户数据,没什么地方可以玩出太多花样;一般和它相关的就是ping和tracerout...

    皮振伟
  • UML建模工具更新情况(2019下半年-2020)(一)

    更多信息参见:http://www.umlchina.com/Tools/search.aspx

    用户6288414
  • UML建模工具更新情况(2019下半年-2020)(二)

    更多信息参见:http://www.umlchina.com/Tools/search.aspx

    用户6288414

扫码关注云+社区

领取腾讯云代金券