Page Flow Diagram Editor

This workflow diagram 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:

{ "class": "go.GraphLinksModel",
"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?"} ]},

{ "key": 300, "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 }
]
}

GoJS Features in this sample

Item Arrays

It is sometimes useful to display a variable number of elements in a node by data binding to a JavaScript Array. In GoJS, this is simply achieved by binding (or setting) Panel.itemArray. The Panel will create an element in the panel for each value in the Array. More information can be found in the GoJS Intro.

Related samples

Layered Digraph Layout

This predefined layout is used for placing Nodes of a general directed graph in layers (rows or columns). This is more general than TreeLayout, as it does not require that the graph be tree-structured. More information can be found in the GoJS Intro.

Related samples

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

Buttons

GoJS defines several Panels for common uses. These include "Button", "TreeExpanderButton", "SubGraphExpanderButton", "PanelExpanderButton", "ContextMenuButton", and "CheckBoxButton". "ContextMenuButton"s are typically used inside of "ContextMenu" Panels; "CheckBoxButton"s are used in the implementation of "CheckBox" Panels.

These predefined panels can be used as if they were Panel-derived classes in calls to GraphObject.make. They are implemented as simple visual trees of GraphObjects in Panels, with pre-set properties and event handlers.

More information can be found in the GoJS Intro.

Related samples