This sample creates a state chart to story-board an online shopping experience.

The text is editable for both the nodes and the links. The user can draw as many links from one node to another node as desired, and the links can be reshaped or deleted when selected. Double-clicking in the background of the diagram creates a new node. The mouse wheel is set to zoom in and out instead of scroll.

This sample customizes the Part.selectionAdornmentTemplate of the node to a template that contains a button The button is positioned to be at the Top-Right corner of the node by being in a Spot Panel with its GraphObject.alignment property set to Spot.TopRight.

The Button's method creates a new node data, adds it to the model, and creates a link from the original node data to the new node data. All of this is done inside a transaction, so that it can be undone by the user (Ctrl+Z and Ctrl+Y will undo and redo transactions). After the node is created, Diagram.scrollToRect is called in case it is off-screen.

Diagram Model saved in JSON format:

GoJS Features in this sample


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