Industrial Process Diagram

This process flow diagram partially simulates the production process for gas and oil byproducts into their end products.

This diagram uses several GoJS features, including a custom TowerLink class that causes links to the tall "Tower" Nodes to be consistently aligned.

{ "class": "GraphLinksModel",
  "nodeDataArray": [
      { "key": "1", "category": "Output", "color": "yellow", "text": "Crude Oil", "location": "0 0", "textside": "left" },
      { "key": "2", "category": "Heater", "color": "red", "location": "150 -5" },
      { "key": "3", "category": "Tower", "color": "orange", "location": "250 -250", "height": 300 },
      { "key": "4", "category": "Heater", "color": "red", "location": "350 200"},

{ "key": "5", "category": "Tower", "color": "orange", "height": 50, "location": "400 -200" },
      { "key": "6", "category": "Tower", "color": "orange", "height": 50, "location": "400 -100" },
      { "key": "7", "category": "Tower", "color": "orange", "height": 50, "location": "400 0" },

{ "key": "8", "category": "Tower", "color": "orange", "height": 150, "location": "450 100" },

{ "key": "9", "category": "Output", "color": "yellow", "text": "Light Vacuum Gas Oil", "textside": "right", "location": "600 150" },
      { "key": "10", "category": "Output", "color": "yellow", "text": "Heavy Vacuum Gas Oil", "textside": "right", "location": "600 200" },
      { "key": "11", "category": "Output", "color": "yellow", "text": "Vacuum Residue", "textside": "right", "location": "600 300" },

{ "key": "12", "category": "Output", "color": "yellow", "text": "Kerosene", "textside": "right", "location": "600 -120" },
      { "key": "13", "category": "Output", "color": "yellow", "text": "Light Gas Oil", "textside": "right", "location": "600 -20" },
      { "key": "14", "category": "Output", "color": "yellow", "text": "Heavy Gas Oil", "textside": "right", "location": "600 80" },

{ "key": "15", "color": "yellow", "text": "Steam", "textside": "left", "location": "480 -60" },
      { "key": "16", "color": "yellow", "text": "Steam", "textside": "left", "location": "480 30" },

{ "key": "17", "category": "Tower", "color": "orange", "height": 50, "location": "400 -350" },

{ "key": "18", "category": "Output", "color": "yellow", "text": "Light Gas Oil", "textside": "right", "location": "600 -300" },
      { "key": "19", "category": "Output", "color": "yellow", "text": "Heavy Gas Oil", "textside": "right", "location": "600 -350" }
 ],
  "linkDataArray": [
      { "from": "1", "to": "2" },
      { "from": "2", "to": "3", "fromSpot": "Right" },
      { "from": "3", "to": "4", "fromSpot": "Bottom", "toSpot": "LeftSide", "text": "Atmospheric Residue", "textFocus": "Left" },
      { "from": "3", "to": "5", "fromSpot": "1 0.2" },
      { "from": "5", "to": "3", "fromSpot": "0 0.75"},
      { "from": "3", "to": "6", "fromSpot": "1 0.5" },
      { "from": "6", "to": "3", "fromSpot": "0 0.75" },
      { "from": "3", "to": "7", "fromSpot": "1 0.8" },
      { "from": "7", "to": "3", "fromSpot": "0 0.75" },
      { "from": "4", "to": "8" },
      { "from": "8", "to": "9" },
      { "from": "8", "to": "10" },
      { "from": "8", "to": "11", "fromSpot": "Bottom" },
      { "from": "5", "to": "12", "fromSpot": "Bottom" },
      { "from": "6", "to": "13", "fromSpot": "Bottom" },
      { "from": "7", "to": "14", "fromSpot": "Bottom" },
      { "from": "15", "to": "6" },
      { "from": "16", "to": "7" },
      { "from": "3", "to": "17", "fromSpot": "Top", "toSpot": "Top" },
      { "from": "17", "to": "3", "fromSpot": "Bottom", "text": "Reflux", "textFocus": "Bottom" },
      { "from": "17", "to": "18" },
      { "from": "17", "to": "19" }
 ]}

GoJS Features in this sample

Geometry Path Strings

The GoJS Geometry class controls the "shape" of a Shape, whereas the Shape.fill and Shape.stroke and other shape properties control the colors and appearance of the shape. For common shape figures, there are predefined geometries that can be used by setting Shape.figure. However one can also define custom geometries.

One can construct any Geometry by allocating and initializing a Geometry of at least one PathFigure holding some PathSegments. But you may find that using the string representation of a Geometry is easier to write and save in a database. Use the static method Geometry.parse or the Shape.geometryString property to transform a geometry path string into a Geometry object.

More information can be found in the GoJS Intro.

Related samples

Links

The Link class is used to implement a visual relationship between nodes. Links are normally created by the presence of link data objects in the GraphLinksModel.linkDataArray or by a parent key reference as the value of the TreeModel.nodeParentKeyProperty of a node data object in a TreeModel. More information can be found in the GoJS Intro.

Related samples