子流程

子流程是节点内部的流程。它可以是一个单独的流程，也可以是一个与父节点外部的其他节点连接的流程。此功能还可用于对节点进行分组。在本部分文档中，我们将构建一个包含子流程的流程，并向您展示子节点特定选项。

添加子节点

如果要将节点添加为另一个节点的子节点，您需要使用 parentId 选项（这在以前版本中称为 parentNode）（您可以在 节点选项部分找到所有选项的列表）。完成此操作后，子节点相对于其父节点进行定位。{ x: 0, y: 0 } 的位置是父节点的左上角。

在本例中，我们通过传递 style 选项来设置父节点的固定宽度和高度。此外，我们将子节点范围设置为 'parent'，这样我们就无法将子节点移出父节点。

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

使用子节点特定选项

当您移动父节点时，您可以看到子节点也随之移动。使用 parentId 选项将节点添加到另一个节点，只做一件事：将其相对于其父节点进行定位。子节点并非真正意义上的子节点。您可以将子节点拖动或定位到其父节点外部（当未设置 extent: 'parent' 选项时），但当您移动父节点时，子节点会随之移动。

在上面的示例中，我们对父节点使用了 group 类型，但您也可以使用任何其他类型。group 类型只是一个方便的节点类型，没有附加句柄。

现在，我们将添加更多节点和边。正如您所见，我们可以在组内连接节点，并创建从子流程到外部节点的连接。

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

使用默认节点类型作为父节点

让我们删除节点 B 的标签并添加一些子节点。在本例中，您可以看到，您也可以使用其中一个默认节点类型作为父节点。我们还将子节点设置为 draggable: false，这样它们就不可拖动了。

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}