共计 867 个字符，预计需要花费 3 分钟才能阅读完成。
目前有很多公司都有工作流的产品。关于工作流的架构大致都是将工作流制定一个规范、标准数据模板，后台程序再解析这些数据模板。一些公司的工作流是数据库配置的，其实推荐将工作流可视化，这样就会节省人力和物力来读懂这些数据。关于流程可视化必然想到了在页面直接操作流程，如果想在页面操作就需要将流程数据图像化，通过操作图像生成可以解析的数据格式。目前前端技术已经足够先进，我们完全无需再使用传统的 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 实现这个功能。我们需要在画布区域放置一个 svg 的显示区，当拖拽工具的线条在这里生成 svg 的路径 path，然后将线条的两端连接两个环节模块，这就需要通过改变 path 的路径属性来实现。具体 svg 的基础知识可以参考大神阮一峰的文章 http://www.ruanyifeng.com/blo… 现在就剩下按照自己的需求继续完善具体功能了，看看我自己做的功能吧：
有问题的可以在加 QQ 交流群交流：1003516412
