GoJS can be used to create network configuration diagrams for either monitoring or display. This example shows some editing capabilities:
The Diagram CommandHandler.archetypeGroupData
is set, allowing you to create new groups by pressing Ctrl + G
with two or more Nodes selected.
Icons in this sample are open-licensed from here.
Diagram Model saved in JSON format:{
"class": "go.GraphLinksModel",
"nodeDataArray": [
{ "key": 0, "type": "Cloud", "loc": "0 0", "text": "Internet" },
{ "key": 1, "type": "Firewall", "loc": "100 0" },
{ "key": 2, "type": "Router", "loc": "200 0" },
{ "key": 3, "type": "Server", "loc": "300 0" },
{ "key": 4, "type": "Switch", "loc": "200 100" },
{ "key": 5, "type": "Firewall", "loc": "25 100" },
{ "key": 6, "type": "Router", "loc": "25 200" },
{ "key": 7, "type": "Switch", "loc": "400 100" },
{ "key": 10, "isGroup": true, "text": "Intranet 1" },
{ "key": 11, "type": "PC", "loc": "150 220", "group": 10 },
{ "key": 12, "type": "PC", "loc": "250 220", "group": 10 },
{ "key": 13, "type": "PC", "loc": "150 270", "group": 10 },
{ "key": 14, "type": "PC", "loc": "250 270", "group": 10 },
{ "key": 20, "isGroup": true, "text": "Intranet 2" },
{ "key": 21, "type": "PC", "loc": "350 220", "group": 20 },
{ "key": 22, "type": "PC", "loc": "450 220", "group": 20 },
{ "key": 23, "type": "PC", "loc": "350 270", "group": 20 },
{ "key": 24, "type": "PC", "loc": "450 270", "group": 20 },
{ "key": 30, "isGroup": true, "text": "Isolation test" },
{ "key": 31, "type": "PC", "loc": "-100 172", "group": 30 },
{ "key": 32, "type": "PC", "loc": "-100 242", "group": 30 }
],
"linkDataArray": [
{ "from": 0, "to": 1 },
{ "from": 1, "to": 2 },
{ "from": 2, "to": 3 },
{ "from": 2, "to": 4 },
{ "from": 5, "to": 4 },
{ "from": 5, "to": 6 },
{ "from": 4, "to": 7 },
{ "from": 4, "to": 10 },
{ "from": 7, "to": 20 },
{ "from": 6, "to": 30 }
]
}A Palette is a subclass of Diagram that is used to display a number of Parts that can be dragged into the diagram that is being modified by the user. The initialization of a Palette is just like the initialization of any Diagram. Like Diagrams, you can have more than one Palette on the page at the same time.
More information can be found in the GoJS Intro.
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.
The Group class is used to treat a collection of Nodes and Links as if they were a single Node. Those nodes and links are members of the group; together they constitute a subgraph.
A subgraph is not another Diagram, so there is no separate HTML Div element for the subgraph of a group. All of the Parts that are members of a Group belong to the same Diagram as the Group. There can be links between member nodes and nodes outside of the group as well as links between the group itself and other nodes. There can even be links between member nodes and the containing group itself.
More information can be found in the GoJS Intro.