目前很多公司都有工作流产品。工作流的架构一般是为工作流制定一个标准化、标准的数据模板，然后后台程序解析这些数据模板。一些公司的工作流是由数据库配置的。其实建议把工作流程可视化，这样会节省理解数据的人力物力。关于流程可视化，直接在页面上操作流程是不可避免的。如果要对页面进行操作，需要将过程数据可视化，通过图像操作生成可解析的数据格式。目前前端技术已经足够先进了。我们不需要使用传统的ES3和ES5来实现这个功能。强大的ES6（面向对象思想）简化了曲折的路径，让只懂一点JS的后端开发者也能上手。来实现这个功能。首先需要配置nodejs环境，因为强大的nodejs有可以编译ES6的组件babel。https://nodejs.org/en/其次，需要创建一个项目，引入webpack打包工具。我们最终会把所有js文件打包成一个bundle.js文件，压缩混淆。https://webpack.github.io/最后需要介绍编译器babel。https://www.babeljs.cn/环境搭建好后，我们开始项目的设计。页面布局是流程操作栏、工具箱（流程组件）、绘图区。我们通过操作工具栏的组件，在绘图区绘制流程的链接模块。每个模块都需要设置各种属性。当然，整个过程还需要进行属性设置。布局定下来之后，就该实现拖拽了。这部分可以了解一下H5流程拖拽的方法。这里推荐张新旭大神的文章http://www.zhangxinxu.com/wor...有了流程模块，当然还需要线路的方向。这里需要使用svg来实现这个功能。我们需要在canvas区域放置一个svg显示区域。这里生成拖动工具的线的时候，生成了svg的路径，然后线的两端连接两个链接模块，需要通过改变路径的path属性来实现。svg的基础知识可以参考文章http://www.ruanyifeng.com/blo...现在就剩下根据自己的需要继续完善具体的功能了。来看看我做的功能：有问题可以在QQ交流群交流：1003516412
