react-flow-architect

ReactFlow アーキテクト

階層ナビゲーション、パフォーマンス最適化、高度な状態管理を備えた、本番環境対応の ReactFlow アプリケーションを構築します。

詳細ガイド

このスキルを実行する前に、詳細ガイドをお読みください。手順と参考資料のすべてが記載されています。安全性、前提条件、検証に関する要件は必ず守ってください。対象を絞った作業では該当するセクションを読み、最初から最後まで作業する場合はガイド全体をお読みください。

最小限の制御グラフの例

React Flow v12（@xyflow/react）を対象としています。reactflow v11 のプロジェクトでは、対応するバージョンのドキュメントを使用してください。これは開始用のコンポーネントであり、階層、履歴、永続化を実装したものではありません。

import { ReactFlow, useNodesState, useEdgesState, addEdge, type Connection } from '@xyflow/react';
import { useCallback } from 'react';
import '@xyflow/react/dist/style.css';

const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Start' } },
  { id: '2', position: { x: 250, y: 0 }, data: { label: 'Next' } },
];
export default function InteractiveGraph() {
  const [nodes, , onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
  const onConnect = useCallback((connection: Connection) =>
    setEdges(previous => addEdge(connection, previous)), [setEdges]);
  return <div style={{ width: '100%', height: 500 }}>
    <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange} onConnect={onConnect} fitView />
  </div>;
}

レビュー済みの互換性のあるパッケージバージョンをホストプロジェクトにインストールし、型チェックとブラウザーのチェックを実行してください。useReactFlow などのフックを呼び出すコンポーネントの外側には、ReactFlowProvider の祖先が必要です。この最小限の例では、そのフックを使用していません。ここではコンパイルやブラウザーでの実行を確認したとは述べていません。

使用する場面

このスキルは、概要に記載されているワークフローまたはアクションを実行する場合に適用できます。

制限事項

• このスキルは、タスクが上記の範囲に明確に該当する場合にのみ使用してください。
• 出力を、環境固有の検証、テスト、専門家によるレビューの代わりとして扱わないでください。
• 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中断して確認してください。