This sample consists of a CISCO-style network configuration diagram.

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 }
      ]
    }

### GoJS Features in this sample

#### Palette

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.

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