Nested Node Layout

yh-flow supports nested nodes, allowing you to create parent node containers containing child nodes for complex flow structures.

Core Concepts

Nested Node Data Structure

Nodes can specify a parent node through the parentId property:

import type { Node } from '@yh-ui/flow'

// Parent node
const parentNode: Node = {
  id: 'group-1',
  type: 'group',
  position: { x: 100, y: 100 },
  width: 400,
  height: 300,
  data: { label: 'Flow Group 1' }
}

// Child node (linked via parentId)
const childNode: Node = {
  id: 'child-1',
  type: 'default',
  position: { x: 150, y: 150 },
  parentId: 'group-1', // Parent node ID
  data: { label: 'Child Node 1' }
}

children Array

You can also use the children property to include child node IDs directly in the parent node:

const parentNodeWithChildren: Node = {
  id: 'group-1',
  type: 'group',
  position: { x: 100, y: 100 },
  width: 400,
  height: 300,
  children: ['child-1', 'child-2', 'child-3'], // Child node ID array
  data: { label: 'Flow Group' }
}

Usage Examples

Main Flow

Sub-flow Container

Start

Audit Process

Archive End

Nested Node Demo

API Reference

Helper Functions

Function	Description	Parameters
isNestedNode(node)	Check if node is nested	node: Node
getNodeChildren(node, allNodes)	Get all children of a node	node: Node, allNodes: Node[]
getNodeParent(node, allNodes)	Get parent node	node: Node, allNodes: Node[]

Node Type Extensions

interface Node {
  // ... other properties
  parentId?: string // Parent node ID
  children?: string[] // Child node ID array
  extent?: 'parent' | 'container' // Nested extent mode
  computed?: boolean // Whether it's a computed/generated node
}

Best Practices

1. Use GroupNode component: Use the built-in GroupNode component to create parent node containers
2. Set extent property: Use extent: 'parent' to make child nodes follow the parent
3. Handle hierarchy: Child nodes should automatically move when dragging the parent node
4. Visual distinction: Use CSS to clearly distinguish between parent containers and child nodes

TIP

Nested nodes are perfect for complex business flows, such as main flows containing multiple sub-flows.