JS流程图解决方案GoJS

GoJs简介

一个实现交互类图表（比如流程图，树图，关系图，力导图等等）的JS库
GoJS依赖于HTML5，所以请保证您的浏览器版本支持HTML5，当然还要加载这个库。

首先个人建议先下载官方实例的 离线版本【内网访问不是很好所以建议缓存下载下来在来看】,其次希望你有个谷歌浏览器！（方便于翻译成中文阅读不费劲！）

下载界面 https://gojs.net/latest/download.html

点击这里下载

 <!-- 调式或开发模式下请使用 go-debug.js -->
  <script src="go-debug.js"></script>

 <!-- f非调式或开发模式下请使用 go.js -->
  <script src="go.js"></script>

每个GoJS图表必须包含在一个指定宽高的div容器内

<!-- 这个DIV必须指定宽高，否者不会被渲染出来
     我们通常为DIV设置一个背景颜色以便于我们更便捷的观察 -->
<div id="myDiagramDiv"
     style="400px; height:150px; background-color: #DAE4E4;"></div>

在JS代码部分，您需要传入一个div的id作为参数来创建一个图表,这里不多说案例里很明了多看！

var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv");

PS : 所有GoJS的属性和方法都在go这个命名空间下。所有GoJS的类名，例如Diagram、Node、Panel、 Shape、TextBlock也都使用go作为前缀

入门教程看这里