Reactで、フロー的な図を簡単に書けるライブラリ

Getting Started

下記みたいな感じでフローを作れる。nodeの形式は、{ id: '1', position: { x: 0, y: 0 }, data: { label: 'World' }}みたいな感じ。edgeは{ id: '1-2', source: '1', target: '2' }みたいな感じ。

<ReactFlow nodes={nodes} edges={edges}>
  <Background />
  <Controls />
</ReactFlow>

また、ReactFlowコンポーネントにonNodesChange、onEdgesChange、onConnectといったコールバックを渡すことにより、flowをインタラクティブにできる

nakaakist

Custom Nodes

任意のものをレンダリングできるカスタムノードを作れる。
下記のように、data propsを受け取るコンポーネントを作る。dataには、positionなどの各種データが入っている。 ReactFlowのHandleコンポーネントを入れることにより、他のnodeとのconnectionができるようになる。

function TextUpdaterNode({ data }) {
  return (
    <>
      <Handle type="target" position={Position.Top} />
      <div>
        <label htmlFor="text">Text:</label>
        <input id="text" name="text" onChange={onChange} className="nodrag" />
      </div>
      <Handle type="source" position={Position.Bottom} id="a" />
      <Handle type="source" position={Position.Bottom} id="b" style={handleStyle} />
    </>
  );
}

Flow本体側では、下記のようにnodeTypesをReactFlowにわたし、かつnodesのtypeにそのtypeを指定すれば、カスタムノードがレンダリングされる

const nodeTypes = useMemo(() => ({ textUpdater: TextUpdaterNode }), []);
const nodes = [
  { id: 'node-1', type: 'textUpdater', position: { x: 0, y: 0 }, data: { value: 123 } },
];

return <ReactFlow nodeTypes={nodeTypes} nodes={nodes} />;

nakaakist

Sub Flows

ノードの中にサブフローを作れる。
nodeのプロパティとしてparentNodeを指定するとノードの親子関係を作れる。
子のpositionは、親に対する相対位置となるが、論理的に親子関係になっているわけでは必ずしもない。
例えば、子ノードから、親の外のノードへのconnectionは普通に作れる。

nakaakist

Uncontrolled Flow

controlledなflowでは、コードを書く人が明示的にnode, edgeの状態を指定するが、uncontrolledの場合はreact flowがそこを担う。
uncontrolledな場合は、onConnectなどのイベントハンドラをReactFlowコンポーネントに渡す必要がなくなる。

ただし、こうすると、nodeやedgeを直接プログラム的に作成・更新したい場合のやり方が少し変わる。下記のように、useReactFlowというhookから得られるinstanceのメソッドを呼ぶことになる。

const reactFlowInstance = useReactFlow();
const onClick = () => {
  const newNode = { ... };
  reactFlowInstance.addNodes(newNode);
};

nakaakist

Panning and Zooming

ReactFlowコンポーネントのpropsに、panOnDragやselectionOnDragなどを渡すと、デフォルトのpan, zoomの挙動を変えられる

nakaakist

Layouting

ReactFlowは、基本的なレイアウト機能はあるが、色々カスタマイズもできる。
サードパーティのライブラリとして下記が使える。(上がシンプル、下に行くほど複雑)

Dagre
- 最小のconfigで、パフォーマンス重視。treeを描画するならまずこれを検討
D3-Hierarchy
- 単一rootのtreeの描画に適す。単純なtreeの他に、tree map、partition layout、enclosure diagramといったオプションがある
D3-Force
- 物理的な力をシミュレーションすることによってレイアウトを決める。やや複雑なレイアウトになる
ELK
- 最もオプションが豊富で色々なことができる

また、edge routingの要件がある場合は、react-flow-smart-edgeなどのライブラリを使う必要がある。

nakaakist

Using a State Management Library

Zustand, Redux, Recoil, Jotaiといったライブラリと併用できる。

nakaakist

Remove Attribution

デフォルトでは、ReactFlowで作られたUIには「React Flow」という文字が右下に表示されるが、これをoffにできる。(ただし、商用利用の場合は有料プラン前提でoffにすることが望ましい)
やり方は、ReactFlowコンポーネントのpropsに、proOptions={{ hideAttribution: true }}を渡すだけ

nakaakist

Theming

デフォルトスタイルは、import 'reactflow/dist/style.css';とするとロードされるミニマムなもの。
style.cssをbase.cssにすると、ほぼスタイルがあたっていないものになる。

ReactFlowコンポーネントのstyleというpropに直接スタイルを入れると、ラッパーの。スタイルを変えられる。tailwindとかもつかえる。

また、各コンポーネントには特定のクラス名がついているので、そこにカスタムCSSを当てていくこともできる。クラス名の一覧はここにある。

nakaakist

Usage with TypeScript

import type { Node, Edge, FitViewOptions, DefaultEdgeOptions, NodeTypes, OnConnect } from 'reactflow'などで、各種型をインポートできるので、それを使う。

nakaakist

プライシング

https://pro.reactflow.dev/pricing

年払い、1月あたりの価格。ユーザー単位で価格が変わることはなく、組織で1つのsubscriptionで良い。とても良心的。

Starter
- $129
- pro exampleが閲覧できる
- github issueを優先的にみてもらえる
Pro
- $249
- １ヶ月に1時間まで、個別のメールサポートあり
- 導入時に電話で説明受けられる
Enterprise
- 個別見積もり
- １ヶ月に１時間、個別のビデオ、電話、メールサポートあり