Grouped Graphs

As described in The Graph Model, yFiles for HTML provides an enhanced graph model with support for group nodes. In this model, a node can be contained within another node, referred to as its parent group, and each group can contain any number of nodes, known as its children.

A layout style suitable for group nodes typically places children of the same group close to each other and ensures that their parent encloses them. The following layout and edge routing styles support this type of arrangement:

• Hierarchical Layout
• Organic Layout
• Orthogonal Layout
• Tree Layout
• Radial Group Layout
• Series-parallel Layout
• Edge Router

If an IGraph contains groups, applying a layout automatically creates a corresponding layout graph model with grouping information. Group node insets and minimum size constraints are also configured automatically.

// create some nodes
const n1 = graph.createNode()
const n2 = graph.createNode()
const n3 = graph.createNode()
const n4 = graph.createNode()

// and some group nodes
const g1 = graph.groupNodes([n3])
const g2 = graph.groupNodes([n2, g1])

// connect them with some edges
graph.createEdge(n1, n2)
graph.createEdge(n1, g1)
graph.createEdge(n2, n4)
graph.createEdge(n3, n4)

// and perform a layout - no extra configuration for the layout algorithm necessary
graph.applyLayout(new HierarchicalLayout())