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 祖先组件中；此最简示例未使用该钩子。此处不保证能够编译或在浏览器中运行。

适用场景

当需要执行概述中描述的工作流或操作时，可使用此技能。

限制

• 仅当任务明确符合上述范围时，才使用此技能。
• 不要将输出视为可替代特定环境验证、测试或专家审查的方案。
• 如果缺少必要的输入、权限、安全边界或成功标准，请停止并请求澄清。