一招搞定可视化工作流设计器开发 巧用draw2d绝战可视化工作流设计器 友好的开源协议MIT
技术岛公众号
工作流通常会使用xml进行管理与配置，之间流转关系使用不同的xml节点进行配置，看着xml文件，很难直接Get到流程之间的流转关系。如果使用可视化的呈现来展现工作流，则很好的解决这个问题。更好的管理与维护。
可视化呈现，自然离不开图形的操作。Github上找以2个非常有价值的工程 ，分别是：
https://github.com/jifuwei/workflow-designer-web
https://github.com/freegroup/draw2d
都fork到仓库里了，不用担心找不到主
https://github.com/Lancker/draw2d
https://github.com/Lancker/workflow-designer-web
实现的思路：
首先，查看workflow-designer-web，这个工具有一个简单的工作流设计器，可以体验，能画节点，并用线条连接上。存在的问题是：节点类型不足以覆盖我所想要达到的效果。如果拿visio来比的话，操作流程度也是一个问题。阅读workflow-designer-web，图形操作相关的组件主要是draw2d。
storm与财富增值
紧接着，转战draw2d，这个是开源的，能做什么不能做什么可以通过官网及demo查看，主要是以下2个网址：
官网 http://www.draw2d.org/
Demo示例：https://freegroup.github.io/draw2d/index.html
非常开心的可以看到，draw2d采用MIT协议，官方网站上提到了Draw2D的用途之一就是workflow设计器的开发，有图有真像，来看看官网是怎么说的：
Draw2D touch is a modern HTML 5 JavaScript library for visualization and interaction with diagrams and graphs. Draw2D touch makes it easy to create visual languages & tools of various kinds.
在示例代码中可以看到不少workflow的影子，github仓库的介绍里也有一个BrainBox的实际应用，开发者使用Draw2D做的电路可视化工具箱。
Draw2D-examples
有了Draw2D,如何开发一个工作流可视化编辑器呢？开源大神还是很贴心的给了一个Shape Designer。如果没有这个东东，做可视化设计器会有些让人“恶心”，因为画一个图，可是一堆线条组成的啊~想想都够，还好，有这个Shape Designer！
shapeDesigner
Shape Designer能帮我们设计好各种基础的Workflow组件，用来设计不同的任务节点！再回到https://github.com/Lancker/workflow-designer-web，这个是工作流半成品，少了组件，正好使用Shape Designer设计满足自身需求的组件！
简单小结一下设计器开发流程：
- 使用Shape Designer设计工作流节点
- 参考workflow-designer-web，更换节点组件
就这么结束了？没有没有。流程文件的导出与加载还是空白，给大家留一个悬念，下次再分解！
技术岛公众号
一招搞定可视化工作流设计器开发 巧用draw2d绝战可视化工作流设计器 友好的开源协议MIT相关推荐
- Android-软键盘一招搞定(原理篇)
前言 软键盘系列文章: Android-软键盘一招搞定(实践篇) Android-软键盘一招搞定(原理篇) 上篇文章分析了软键盘弹出.关闭.获取软键盘高度.常用属性展示等.这部分也是网上涉及软键盘文章 ...
- 十招搞定SQL2K安全
十招搞定SQL2K安全 本文详述提高SQL Server 2K安装的安全性实施的十个注意事项: 1.安装最新的服务包 为了提高服务器安全性,最有效的一个方法就是升级到 SQL Server 2000 ...
- 一招搞定高等数学！ | 今日最佳
世界只有3.14 % 的人关注了 青少年数学之旅 @瓜皮儿十三妹 @没品图 一张图让你们看看鲨鱼的 血液循环系统到底有多复杂 @普外科曾医生 小猪佩奇其实是"巨猪佩奇" 小猪佩奇真 ...
- 简单一招搞定公司牛人 转自 潘文富
简单一招搞定公司牛人 潘文富 所谓公司牛人,就是在老板之下,众员工之上的人物.公司牛人,有的是凭借资历,有的是身居高位的职业经理人,有的是凭借自己在某方面的专业水平和经验,总之,有牛的资本. 这些牛人 ...
- 企业成本费用空缺如何解决？享受核定政策一招搞定！
本文作者:财税小喇叭 成本费用是一个公司账务板块中非常重要的部分之一,成本费用空缺通常会出现以下两种税负问题: 1·缺少普通的成本费用发票会导致企业利润虚高:所得税税负压力较大: 2·专票进项空缺的情 ...
- 怎么复制网页上不能复制的文字（付费文档免费复制），一招搞定
好多小伙伴上网查资料的时候,想要复制网页内容,但是提示付费复制或者不允许复制,遇到这种情况怎么办呢?下面就是小编分享的一招搞定无法复制网页内容文字的方法. 怎么复制网页上不能复制的文字 借助360安全 ...
- 怎么样把计算机桌面的图标改小,怎样将电脑桌面图标变小_三招搞定桌面图标太小问题－系统城...
电脑安装win10系统后发现桌面的图标太大,想要把这些图标变小,这要怎么操作?由于对操作界面都不熟悉,所以不懂怎么设置,别担忧,小编今天就来分享一种将电脑桌面图标变小的方法,感兴趣的快来试试. 具体方 ...
- 免费GIF动图制作，简简单单一招搞定
免费的GIF动图制作,教你一招搞定,下面就给大家介绍一款好用的gif制作工具,在线一键制作gif动图. 我们在网络聊天中,表情包已经是不可分割的一部分,也是沟通的种的一个桥梁.详细我们每个人的手机里都 ...
- android手机做路由器,怎么让手机变成wifi路由器？一招搞定！
原标题:怎么让手机变成wifi路由器?一招搞定! 当我们的在某些地方的时候需要上网,可电脑没有可用,或是家里的台式电脑没有无线网卡,这样才能让台式通过无线上网呢!等等问题,今天我们就来说说如何把智能手 ...
最新文章
- 烂泥：kickstart无人值守安装CentOS6.5
- 收缩Mysql的ibdata1文件大小方法
- CSharpGL(28)得到高精度可定制字形贴图的极简方法
- typedefnbsp;struct与struct的区别
- QFileDialog::getOpenFileName
- 在Spring中使用DButils
- MySQLdb安装的错误说明
- 2015计算机二级c语言题库,2015年计算机二级C语言题库找题目录
- 初步了解关于js跨域问题
- [科研论文]基于W7100的以太网读卡器的设计与实现
- Python04，变量与赋值
- c语言银行排队系统链表,银行预约排队系统(数据结构问题)
- xshell通过隧道连接_如何在xshell中创建一个SSH隧道
- Redis trouble21 -- aof持久化导致redis命令阻塞
- 如何改善物流行业项目管理？
- 无法启动此程序，因为计算机中丢失MSVCP120.dll文件、应用程序无法正常启动0xc000007b
- 我爱大自然教案计算机,我们热爱大自然教案.doc
- Python配置清华软件安装源
- java mail 签名_java mail实现Email的发送,完整代码
- ０基础用vagrant 快速构建larval开发环境 (我杨某人尽力描述了，都有从０介绍)