Sample for representing the relationship between various entities. Try dragging the nodes -- their links will avoid other nodes, by virtue of the Routing.AvoidsNodes property assigned to the custom link template's Link.routing. Also note the use of Panel Expander Buttons to allow for expandable/collapsible node data.
Buttons are defined in Buttons.js.
The dark and light themes are controlled using the ThemeManager.
The "Table" Panel, Panel.Table, arranges objects in rows and columns. Each object in a Table Panel is put into the cell indexed by the value of GraphObject.row and GraphObject.column. The panel will look at the rows and columns for all of the objects in the panel to determine how many rows and columns the table should have. More information can be found in the GoJS Intro.
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.
This predefined layout treats the graph as if it were a system of physical bodies with forces acting on and between them. The layout iteratively moves nodes and links to minimize the total sum of forces on each node. The resulting layout will normally not contain overlapping Nodes, excluding cases where the graph is densely interconnected. More information can be found in the GoJS Intro.
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.
GoJS allows diagrams to be themed. This is commonly used to provide a light and dark mode for diagrams.
The Diagram.themeManager handles themes within a Diagram. The ThemeManager can by shared by multiple diagrams, and is responsible to managing the current theme and default theme, along with any theme updates. More information can be found in the GoJS Intro.