gojs是一个用来生成数据流程图，关系图等常用软件工程图表的javascrit库, 它的官网是gojs.net。 下面我们将利用gojs来制作一个简单的离散数学中的关系图。首先我们要生成一个空白的html模板。
1 <!doctype html> 2 <html> 3 <head> 4 </head> 5 6 <body> 7 <div id="myDiagramDiv" style="700px; height:150px"></div> 8 </body> 9 </html>
在上面代码的第8行中我们生成了一个div容器，之后我们所有的流程图绘制结果都会在div容器里面显示。
1 <head> 2 <script src="https://unpkg.com/gojs/release/go.js"></script> 3 </head>
为了使用gojs库，我们需要在<head>里面加入对gojs的引用，这行代码类似于C++里通过include来引入头文件。接下来我们就要加入gojs代码，第一步是建立一个空的初始化函数叫作init()。
1 <!doctype html> 2 <html> 3 <head> 4 5 6 <script src="https://unpkg.com/gojs/release/go.js"></script> 7 8 <script> 9 function init() { 10 11 } 12 13 </script> 14 </head> 15 16 <body onload="init()"> 17 <div id="myDiagramDiv" style="700px; height:150px"></div> 18 19 </body> 20 </html>
上面的8-13行我们生成了一个init函数，以后所有的gojs代码都写在init函数里面，在第16行body标签里面我们把这个函数赋值给onload属性，即在网页加载的时候立刻就调用这个init函数。
1 function init() { 2 var $ = go.GraphObject.make; 6 }
在init函数的第一行我们将go.GraphObject.make这个名称赋值给$变量，在gojs中分为视图(diagram)和模型(model)两个对象，这两个对象都需要通过go.GraphObject.make这个构造函数来创建，由于构造函数名字比较长所以我们以后用$来代替它，节省打字时间。
1 function init() { 2 var $ = go.GraphObject.make; 3 myDiagram = $(go.Diagram, "myDiagramDiv"); 7 }
接下来我们通过$构造方法创建视图对象myDiagram, 该构造方法接受两个参数，第一个参数是对象类型，这里是视图，用go.Diagram表示。(ps: gojs中的内建变量都要加上go.这个前缀。)。第二个参数是div容器的id。
1 function init() { 2 var $ = go.GraphObject.make; 3 myDiagram = $(go.Diagram, "myDiagramDiv"); 4 var myModel = $(go.Model); 5 }
创建完视图对象后，我们用$构造器创建了一个模型叫作myModel，构造方法在创建模型时只需要指出模型的类型即可，在这里我们的类型是go.Model, 即只包含点不包含边的最简单模型。
1 function init() { 2 var $ = go.GraphObject.make; 3 myDiagram = $(go.Diagram, "myDiagramDiv"); 4 var myModel = $(go.Model); 5 myModel.nodeDataArray = [ 6 { key: "Alpha" }, 7 { key: "Beta" }, 8 { key: "Gamma" } 9 ]; 10 }
如上面代码所示，go.Model类型有一个叫作nodeDataArray的属性，该属性是一个数组，每个数组元素是一个节点，格式是{key: “节点的名字” } 。最后，我们把模型myModel赋值给myDiagram后即可以显示我们的图表。
1 function init() { 2 var $ = go.GraphObject.make; 3 myDiagram = $(go.Diagram, "myDiagramDiv"); 4 var myModel = $(go.Model); 5 // in the model data, each node is represented by a JavaScript object: 6 myModel.nodeDataArray = [ 7 { key: "Alpha" }, 8 { key: "Beta" }, 9 { key: "Gamma" } 10 ]; 11 myDiagram.model = myModel; 12 13 }
下面是效果图：
上面的效果图只有三个人的名字，他们之间没有连线，如果想在节点之间连线，我们需要把go.model模型替换成go.GraphLinksModel模型，通过GraphLinksModel的linkDataArray数组属性来加入节点之间的边的信息。linkDataArray 每个数组元素代表一条边，格式如下{ to:"边的终点名字", from:"边的起点名字"}， 代码如下：
1 function init() { 2 var $ = go.GraphObject.make; 3 myDiagram = $(go.Diagram, "myDiagramDiv"); 4 var myModel = $(go.GraphLinksModel); 5 // in the model data, each node is represented by a JavaScript object: 6 myModel.nodeDataArray = [ 7 { key: "Alpha" }, 8 { key: "Beta" }, 9 { key: "Gamma" } 10 ]; 11 myModel.linkDataArray = [ 12 { to:"Alpha",from:"Beta"}, 13 {to:"Beta",from:"Gamma"} 14 ] 15 myDiagram.model = myModel; 16 17 }
效果如下所示：
完整代码如下：
1 <!doctype html> 2 <html> 3 <head> 4 5 <script src="https://unpkg.com/gojs/release/go.js"></script> 6 7 <script> 8 function init() { 9 var $ = go.GraphObject.make; 10 myDiagram = $(go.Diagram, "myDiagramDiv"); 11 var myModel = $(go.GraphLinksModel); 12 // in the model data, each node is represented by a JavaScript object: 13 myModel.nodeDataArray = [ 14 { key: "Alpha" }, 15 { key: "Beta" }, 16 { key: "Gamma" } 17 ]; 18 myModel.linkDataArray = [ 19 { to:"Alpha",from:"Beta"}, 20 {to:"Beta",from:"Gamma"} 21 ] 22 myDiagram.model=myModel; 23 24 } 25 </script> 26 </head> 27 28 <body onload="init()"> 29 <div id="myDiagramDiv" style="700px; height:150px;border:1px solid black;"></div> 30 31 </body> 32 </html>