react-flow は何をしますか？
React Flow (@xyflow/react) を使用したワークフロー可視化スキル。カスタムノードとエッジを使ったグラフ可視化、ワークフローノードの作成、エッジラベルの実装、ビューポートの制御に活用します。トリガー: ReactFlow, @xyflow/react, Handle, NodeProps, EdgeProps, useReactFlow, fitView。
概要
このスキルは、@xyflow/react ライブラリを用いて、インタラクティブなグラフ可視化やワークフローダイアグラムを構築するためのガイドラインを提供します。カスタムノード、エッジ、ラベルなどを柔軟に定義し、ビューポートの制御やイベントハンドリングを実装できます。
主な機能
- カスタムノード:
Handleコンポーネントを使用して入出力ポートを定義し、任意の React コンポーネントをノードとしてレンダリング。 - カスタムエッジ: エッジのスタイルやラベル、アニメーションをカスタマイズ。
EdgePropsを使用して型安全に実装。 - ビューポート制御:
useReactFlowフックを使い、fitViewやzoomToでビューポートをプログラム的に制御。 - イベント処理: ノードのドラッグ、エッジの接続、クリックなどのイベントを処理。
基本的な使い方
import React, { useCallback } from 'react';
import {
ReactFlow,
Background,
Controls,
MiniMap,
useNodesState,
useEdgesState,
addEdge,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
const initialNodes = [
{ id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
{ id: '2', position: { x: 0, y: 100 }, data: { label: 'Node 2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
function Flow() {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = useCallback(
(params) => setEdges((eds) => addEdge(params, eds)),
[setEdges],
);
return (
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
fitView
>
<Background />
<Controls />
<MiniMap />
</ReactFlow>
);
}
export default Flow;
カスタムノードの例
import { Handle, Position, NodeProps } from '@xyflow/react';
type CustomNodeData = {
label: string;
};
function CustomNode({ data }: NodeProps<CustomNodeData>) {
return (
<div style={{ padding: 10, border: '1px solid #777', borderRadius: 5, background: '#fff' }}>
<Handle type="target" position={Position.Top} />
<div>{data.label}</div>
<Handle type="source" position={Position.Bottom} />
</div>
);
}