用語と定義

ドキュメントのこのパートでは、React Flowの基本的な用語と定義について説明します。React Flowで頻繁に使用する3つの要素は、ノード、エッジ、ハンドルです。

ノードこのセクションへのパーマリンク

React FlowのノードはReactコンポーネントです。つまり、好きなものをレンダリングできます。各ノードにはx座標とy座標があり、ビューポート内のどこに配置されるかを示します。デフォルトでは、ノードは上記の例のようになります。ノードのカスタマイズオプションについては、ノードオプションのドキュメントをご覧ください。

カスタムノードこのセクションへのパーマリンク

ここでReact Flowの魔法が起こります。ノードをカスタマイズして、好きなように外観と動作を変更できます。作成する機能の多くは、React Flowに組み込まれていません。カスタムノードで行うことができることのいくつかは次のとおりです。

• フォーム要素のレンダリング
• データの視覚化
• 複数のハンドルのサポート

詳細については、カスタムノードのドキュメントをご覧ください。

ハンドルこのセクションへのパーマリンク

ハンドル（他のライブラリでは「ポート」とも呼ばれます）は、エッジがノードに接続される場所です。ハンドルはどこにでも配置でき、自由にスタイルを設定できます。ただのdiv要素です。デフォルトでは、ノードの上、下、左、または右に灰色の円として表示されます。カスタムノードを作成する場合、ノードに必要な数のハンドルを設定できます。詳細については、ハンドルドキュメントをご覧ください。

エッジこのセクションへのパーマリンク

エッジは2つのノードを接続します。すべてのエッジには、ターゲットノードとソースノードが必要です。React Flowには、デフォルト（ベジェ）、smoothstep、step、straightの4つの組み込みエッジタイプが付属しています。エッジはCSSでスタイルを設定できるSVGパスであり、完全にカスタマイズ可能です。複数のハンドルを使用している場合は、個別に参照して、ノードの複数の接続を作成できます。

カスタムエッジこのセクションへのパーマリンク

カスタムノードと同様に、エッジもカスタマイズできます。カスタムエッジで行うことのいくつかは次のとおりです。

• エッジを削除するためのボタンを追加する
• カスタムルーティング動作
• 1つのSVGパスだけでは解決できない複雑なスタイリングまたはインタラクション

詳細については、カスタムエッジAPIサイトをご覧ください。

接続線このセクションへのパーマリンク

React Flowには、クリックアンドドラッグでハンドル間を接続して新しいエッジを作成する機能が組み込まれています。ドラッグ中は、プレースホルダーエッジは接続線と呼ばれます。接続線にも4つのタイプが組み込まれており、カスタマイズ可能です。接続線を設定するためのプロパティは、プロパティセクションにあります。

ビューポートこのセクションへのパーマリンク

React Flowのすべてはビューポート内に存在します。ビューポートには、x、y、ズームの値があります。ペインをドラッグするとx座標とy座標が変わり、ズームインまたはズームアウトするとズームレベルが変わります。