サブフロー

サブフローは、ノード内のフローです。独立したフローにすることも、親ノード外の他のノードと接続されたフローにすることもできます。この機能は、ノードのグループ化にも使用できます。ドキュメントのこの部分では、サブフローを含むフローを作成し、子ノード固有のオプションを紹介します。

子ノードの追加

別のノードの子としてノードを追加するには、`parentId` オプション（以前のバージョンでは `parentNode` と呼ばれていました）を使用する必要があります（すべてのオプションのリストはノードオプションセクションにあります）。これを行うと、子ノードは親ノードに対して相対的に配置されます。`{ x: 0, y: 0 }` の位置は、親の左上隅です。

この例では、`style` オプションを渡すことで、親ノードの固定の幅と高さを設定しています。さらに、子ノードの範囲を `'parent'` に設定して、子ノードを親ノードの外に移動できないようにしています。

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

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

子固有のオプションの使用

親ノードを移動すると、子ノードも移動するのがわかります。 `parentId` オプションを使用してノードを別のノードに追加しても、1つのことしかできません。それは、親に対して相対的に配置することです。子ノードは、マークアップ的には実際の子ではありません。子ノードを親の外にドラッグまたは配置できますが（`extent: 'parent'` オプションが設定されていない場合）、親を移動すると、子も一緒に移動します。

上記の例では、親ノードに `group` タイプを使用していますが、他のタイプも使用できます。 `group` タイプは、ハンドルが接続されていない便利なノードタイプです。

それでは、さらにノードとエッジを追加してみましょう。ご覧のとおり、グループ内のノードを接続し、サブフローから外部ノードへの接続を作成できます

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

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

デフォルトのノードタイプを親として使用

ノードBのラベルを削除し、子ノードを追加してみましょう。この例では、デフォルトのノードタイプの1つを親として使用できることもわかります。また、子ノードを `draggable: false` に設定して、ドラッグできないようにしています。

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

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