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="width: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做爲前綴

入門教程看這裏