众所知周,流程图在日常工作生活中发挥了重要的作用,所以制作流程图的工具就显得特别重要。而目前已经产生的流程图制作软件大都工作在操作系统之上,这些软件使用起来很方便,不过都有着桌面应用软件的缺点。同时,现在的趋势是B/S架构的软件正在渐渐取代传统桌面应用软件,所以浏览器端的流程图制作框架也出现了一些,但是都有明显的缺点,使用起来不如桌面应用软件方便。所以本文的内容就是做出一个结合桌面软件和浏览器端软件优点的框架,也就是graph.js,既拥有桌面软件方便的操作,又可以在浏览器端直接运行。本文首先介绍了 graph.js的产生背景:桌面端软件用起来方便,但是有着诸多的限制条件,并且不符合当前的趋势;已有的浏览器端软件使用不方便,所以想做出一个结合两者的优点的流程图制作软件。接着分析了实现graph.js所用到的技术,这些技术包括AngularJS、d3.js、SVG等等,同时将这些技术与现有的其他技术进行比较,说明了选用的这些技术所具有的优势。然后说明了 graph.js是如何将AngularJS的指令功能将d3.js的操作封装到指令之中,形成了一个个新的图形标签,实现了构造流程图的基础,并且对整个构造过程的代码进行了分析和解释。紧接着介绍了如何在已有的图形的基础上实现了流程图中相应的功能:拖动、删除、修改大小、添加自定义属性和弹框以及上传和下载数据,并结合代码描述了在实现这些功能的过程中遇到的问题以及解决方案。最后通过graph.js实现了三种流程图,意味着graph.js基本达到了开始的需求。