//創(chuàng)建畫布
  var objGo = go.GraphObject.make;
  var myDiagram = objGo(go.Diagram, "myDiagramDiv",
   {
    //模型圖的中心位置所在坐標(biāo)
    initialContentAlignment: go.Spot.Center,
    
    //允許用戶操作圖表的時(shí)候使用Ctrl-Z撤銷和Ctrl-Y重做快捷鍵
    "undoManager.isEnabled": true,
    
    //不運(yùn)行用戶改變圖表的規(guī)模
    allowZoom: false,

    //畫布上面是否出現(xiàn)網(wǎng)格
    "grid.visible": true,

    //允許在畫布上面雙擊的時(shí)候創(chuàng)建節(jié)點(diǎn)
    "clickCreatingTool.archetypeNodeData": { text: "Node" },

    //允許使用ctrl+c、ctrl+v復(fù)制粘貼
    "commandHandler.copiesTree": true, 

    //允許使用delete鍵刪除節(jié)點(diǎn)
    "commandHandler.deletesTree": true, 

    // dragging for both move and copy
    "draggingTool.dragsTree": true, 
   });

var myModel = objGo(go.Model);//創(chuàng)建Model對(duì)象
  // model中的數(shù)據(jù)每一個(gè)js對(duì)象都代表著一個(gè)相應(yīng)的模型圖中的元素
  myModel.nodeDataArray = [
   { key: "工廠" },
   { key: "車間" },
   { key: "工人" },
   { key: "崗位" },
  ];
  myDiagram.model = myModel; //將模型數(shù)據(jù)綁定到畫布圖上

// 定義一個(gè)簡(jiǎn)單的節(jié)點(diǎn)模板
  myDiagram.nodeTemplate =
   objGo(go.Node, "Horizontal",//橫向布局的面板
    // 節(jié)點(diǎn)淡藍(lán)色背景
    { background: "#44CCFF" },
    objGo(go.Shape,
     "RoundedRectangle", //定義形狀，這是圓角矩形
     { /* Shape的參數(shù)。寬高顏色等等*/figure: "Club", width: 40, height: 60, margin: 4, fill: 'red' },
     // 綁定 Shape.figure屬性為Node.data.fig的值，Model對(duì)象可以通過(guò)Node.data.fig 獲取和設(shè)置Shape.figure（修改形狀）
     new go.Binding("figure", "fig"), new go.Binding('fill', 'fill2')),
    objGo(go.TextBlock,
     "Default Text", // 默認(rèn)文本
     // 設(shè)置字體大小顏色以及邊距
     { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
     //綁定TextBlock.text 屬性為Node.data.name的值，Model對(duì)象可以通過(guò)Node.data.name獲取和設(shè)置TextBlock.text
     new go.Binding("text", "name"))
   );

  var myModel = objGo(go.Model);//創(chuàng)建Model對(duì)象
  // model中的數(shù)據(jù)每一個(gè)js對(duì)象都代表著一個(gè)相應(yīng)的模型圖中的元素
  myModel.nodeDataArray = [
   { name: "工廠", fig: 'YinYang', fill2: 'blue' },
   { name: "車間", fig: 'Peace', fill2: 'red' },
   { name: "工人", fig: 'NotAllowed', fill2: 'green' },
   { name: "崗位", fig: 'Fragile', fill2: 'yellow' },
  ];
  myDiagram.model = myModel; //將模型數(shù)據(jù)綁定到畫布圖上

var myModel = objGo(go.GraphLinksModel);
  myModel.nodeDataArray =
   [
    { key: "aaa" ,name: "工廠" },
    { key: "bbb" ,name: "車間"},
    { key: "ccc" ,name: "車間" }
   ];
  myModel.linkDataArray =
   [
    { from: "aaa", to: "bbb" },
    { from: "bbb", to: "ccc" }
   ];
  myDiagram.model = myModel;

 

 
  

 

 
  

 
 
 

 This sample demonstrates the ability for the user to drag around a Link as if it were a Node.
 When either end of the link passes over a valid port, the port is highlighted.
 
 

 The link-dragging functionality is enabled by setting some or all of the following properties:
 DraggingTool.dragsLink, LinkingTool.isUnconnectedLinkValid, and
 RelinkingTool.isUnconnectedLinkValid.
 
 

 Note that a Link is present in the Palette so that it too can be dragged out and onto
 the main Diagram. Because links are not automatically routed when either end is not connected
 with a Node, the route is provided explicitly when that Palette item is defined.
 
 

 This also demonstrates several custom Adornments:
 Part.selectionAdornmentTemplate, Part.resizeAdornmentTemplate, and
 Part.rotateAdornmentTemplate.
 
 

 Finally this sample demonstrates saving and restoring the Diagram.position as a property
 on the Model.modelData object that is automatically saved and restored when calling Model.toJson
 and Model.fromJson.
 
 

 

  Save
  Load
  Diagram Model saved in JSON format:
 
 { "class": "go.GraphLinksModel",
 "linkFromPortIdProperty": "fromPort",
 "linkToPortIdProperty": "toPort",
 "nodeDataArray": [
 ],
 "linkDataArray": [
 ]}
 
 

 

 

 A process flow diagram is commonly used in chemical and process engineering to indicate the general flow of plant processes and equipment.
 A simple SCADA diagram, with animation of the flow along the pipes, is implemented here.
 
 

 The diagram displays the background grid layer by setting grid.visible to true,
 and also allows snapping to the grid using DraggingTool.isGridSnapEnabled,
 ResizingTool.isGridSnapEnabled, and RotatingTool.snapAngleMultiple alongside RotatingTool.snapAngleEpsilon.
 
 

 The diagram also uses the loop function to animate the links by adjusting the Shape.strokeDashOffset every 100 ms.
 
 

 

  Save
  Load
  Diagram Model saved in JSON format:
 
 { "class": "go.GraphLinksModel",
 "nodeDataArray": [
{"key":"P1", "category":"Process", "pos":"150 120", "text":"Process"},
{"key":"P2", "category":"Process", "pos":"330 320", "text":"Tank"},
{"key":"V1", "category":"Valve", "pos":"270 120", "text":"V1"},
{"key":"P3", "category":"Process", "pos":"150 420", "text":"Pump"},
{"key":"V2", "category":"Valve", "pos":"150 280", "text":"VM", "angle":270},
{"key":"V3", "category":"Valve", "pos":"270 420", "text":"V2", "angle":180},
{"key":"P4", "category":"Process", "pos":"450 140", "text":"Reserve Tank"},
{"key":"V4", "category":"Valve", "pos":"390 60", "text":"VA"},
{"key":"V5", "category":"Valve", "pos":"450 260", "text":"VB", "angle":90}
 ],
 "linkDataArray": [
{"from":"P1", "to":"V1"},
{"from":"P3", "to":"V2"},
{"from":"V2", "to":"P1"},
{"from":"P2", "to":"V3"},
{"from":"V3", "to":"P3"},
{"from":"V1", "to":"V4"},
{"from":"V4", "to":"P4"},
{"from":"V1", "to":"P2"},
{"from":"P4", "to":"V5"},
{"from":"V5", "to":"P2"}
 ]}