说起流程管理这个功能，如果没有个动态图配合显示，简直就是太没有客户体验感了。就比如说请假流程吧，流程走到哪一步了，流程走向过程中都那些人审批的，审批的结果等等，如果就来个列表，也不是说不行，就是觉得太不人道主义了。
曾经在上海做过流程管理，采用的IBM研发的FileNet，是一个很大型的工具，安装复杂，而且还是付费的。而现在要开发流程管理，想必是不用考虑让公司去购买FileNet的了，原因就不必多说了。
重要的是，即使什么都没有，也是可以开发流程管理的，那就是svg，对于svg我是真的爱到无法自拔的了，之前的配电室监控、场景监控用的都是svg技术，用的是一个叫raphael.js前端插件，其实也就是封装的对svg元素的操作。
下面来讲讲这个开发思路，首先，肯定是要录入流程图的，根据不同的流程，创建不同的流程图。
流程图怎么创建？总不至于要手写svg代码吧？庆幸的是不用，很多工具可以画流程图，然后导出svg文件，懒得安装也懒得找，记得之前正好有用过网上一个免费的在线画图的网址（https://processon.com），就是这个了，免费、好用、免安装，画图还好看，还有什么可挑剔的，总之我是很喜欢，下面奉上一个画好的请假流程图
下载成svg文件就可以使用了
动态呢用js就可以控制啦，比如下面这个门使用能导航的功能
首先把svg弄到页面中，放在body里就可以了
然后在浏览器中打开这个页面
右键检查自己想要控制的方块
就能看到自己想要控制的这个svg元素了，这里需要控制的是这个path节点，获取这个节点的id，配置到json中，由于id的前缀都是一样的，只要记录后面的数字就可以了，比如这里的id（ProcessOnPath1030），只要记录（1030）就可以了，下面上代码：
var DOOR_FLOW_CHART_DATA = { ‘1029‘: {‘path‘: ‘1030‘, ‘url‘: ‘https://www.baidu.com/?tn=39042058_18_oem_dg‘}, ‘1067‘: {‘path‘: ‘1068‘, ‘url‘: ‘http://fanyi.baidu.com/‘}, /* ‘1038‘: {path: ‘1039‘, url: ‘/accesscontrol/SystemDeviceInfo‘}, */ /* ‘1059‘: {path: ‘1060‘, url: ‘/accesscontrol/SystemDeviceInfo‘}, */ /* 添加门禁所使用的通讯服务ProcessOnG1033 */ ‘1033‘: {path: ‘1034‘, url: ‘/runtime/SystemProxyService‘},