This demonstrates the ability to simulate having nodes be members of multiple "groups". Regular Groups only support a single Part.containingGroup for nodes. This sample does not make use of Groups at all, but simulates one possible "grouping" relationship using a custom Layout and a custom DraggingTool.

The CustomLayout assumes regular nodes already have real locations, and only assigns Part.location to "Super" nodes. It also sets the GraphObject.desiredSize on the "BODY" element of each "Super" node, based on the area occupied by all of its member nodes. The CustomDraggingTool overrides the DraggingTool.computeEffectiveCollection method to determine what nodes to drag around.

This sample does not support dynamic restructuring of the relationships in the graph.

Diagram Model saved in JSON format:

GoJS Features in this sample


GoJS provides its own collection classes: List, Set, and Map. You can iterate over a collection by using an Iterator. More information can be found in the GoJS Intro.

Related samples

Custom Layouts

GoJS allows for the creation of custom layouts to meet specific needs.

There are also many layouts that are extensions -- not predefined in the go.js or go-debug.js library, but available as source code in one of the three extension directories, with some documentation and corresponding samples. More information can be found in the GoJS Intro.

Related samples


The Group class is used to treat a collection of Nodes and Links as if they were a single Node. Those nodes and links are members of the group; together they constitute a subgraph.

A subgraph is not another Diagram, so there is no separate HTML Div element for the subgraph of a group. All of the Parts that are members of a Group belong to the same Diagram as the Group. There can be links between member nodes and nodes outside of the group as well as links between the group itself and other nodes. There can even be links between member nodes and the containing group itself.

More information can be found in the GoJS Intro.

Related samples


Tools handle all input events, such as mouse and keyboard interactions, in a Diagram. There are many kinds of predefined Tool classes that implement all of the common operations that users do.

For flexibility and simplicity, all input events are canonicalized as InputEvents and redirected by the diagram to go to the Diagram.currentTool. By default the Diagram.currentTool is an instance of ToolManager held as the Diagram.toolManager. The ToolManager implements support for all mode-less tools. The ToolManager is responsible for finding another tool that is ready to run and then making it the new current tool. This causes the new tool to process all of the input events (mouse, keyboard, and touch) until the tool decides that it is finished, at which time the diagram's current tool reverts back to the Diagram.defaultTool, which is normally the ToolManager, again.

More information can be found in the GoJS Intro.

Related samples