子流程

子流程是節點內的流程。它可以是獨立的流程，也可以是與父節點外部其他節點連接的流程。此功能也可用於將節點分組。在本文件章節中，我們將建立具有子流程的流程，並向您展示子節點的特定選項。

加入子節點

如果您想將節點新增為另一個節點的子節點，您需要使用 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>
}