Dagre Tree

この例では、シンプルなツリーレイアウトを作成するために、dagre.jsをReact Flowに統合する方法を示しています。より高度なレイアウトライブラリを探している場合は、d3-hierarchyまたはelkjsが良い代替手段です。

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

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

読み取り専用

この例は、静的レイアウトのデモです。グラフ内のノードまたはエッジが変更された場合、レイアウトは再計算されません！ただし、dagre（およびその他のライブラリ）を使用して動的レイアウトを行うことは可能です。これの例については、自動レイアウトのプロの例を参照してください。