Page Flow

This sample uses the LayeredDigraphLayout to display some data about the flow of a fictional web site. You can add to the Diagram by dragging Nodes from the Palette and by buttons that appear when clicking on the Page (yellow) and Drop (red) Nodes.

All nodes in this sample have editable text. To activate the TextEditingTool, click on a node to select it and click on its text once selected.

Several Link relationships are defined. Hovering over the sides of many nodes changes the mouse cursor to a pointer. Clicking and dragging in these areas creates a new link with the LinkingTool. The node definitions contain several rules, for instance you cannot drag links to Source (blue) Nodes, only from them, and you cannot have multiple links between the same two nodes, among others.

Most of the source code for this sample is in defining pleasing Node templates. Much of the functionality seen is done with built-in GoJS components. This is by no means an exhaustive sample, so be sure to check out the other samples to the left, or take a look at the Introductory Documents for a more structured tutorial on different GoJS concepts.

Diagram Model saved in JSON format:

{ "copiesArrays": true,
  "copiesArrayObjects": true,
  "nodeDataArray": [
    { "key": -1, "category": "Source", "text": "Search" },
    { "key": -2, "category": "Source", "text": "Referral" },
    { "key": -3, "category": "Source", "text": "Advertising" },

{ "key": 0, "text": "Homepage" },
    { "key": 1, "text": "Products" },
    { "key": 2, "text": "Buy" },
    { "key": 3, "text": "Samples" },
    { "key": 5, "text": "Documentation" },
    { "key": 6, "text": "Download" },

{ "key": 100, "category": "DesiredEvent", "text": "Ordered!" },
    { "key": 101, "category": "DesiredEvent", "text": "Downloaded!" },

{ "key": 200, "category": "UndesiredEvent",
      "reasonsList": [
        {"text":"Needs redesign?"},
        {"text":"Wrong Product?"} ]},
    { "key": 201, "category": "UndesiredEvent",
      "reasonsList": [
        {"text":"Need better samples?"},
        {"text":"Bad landing page for Advertising?"} ]},
    { "key": 202, "category": "UndesiredEvent",
      "reasonsList": [
        {"text":"Reconsider Pricing?"},
        {"text":"Confusing Cart?"} ]},

{ "category": "Comment", "text": "Add notes with general comments for the next team meeting" }

],
  "linkDataArray": [
    { "from": -1, "to": 0 },
    { "from": -2, "to": 0 },
    { "from": -2, "to": 3 },
    { "from": -3, "to": 3 },
    { "from":  0, "to": 1 },
    { "from":  1, "to": 2 },
    { "from":  1, "to": 3 },
    { "from":  0, "to": 5 },
    { "from":  5, "to": 3 },
    { "from":  3, "to": 2 },

{ "from":  3, "to": 6 },

{ "from":  2, "to": 100 },
    { "from":  6, "to": 101 },

{ "from":  0, "to": 200 },
    { "from":  3, "to": 201 },
    { "from":  2, "to": 202 }
  ]
}