本文為《React Agent：從零開始構建 AI 智能體》專欄系列文章。 專欄地址：https://blog.csdn.net/suiyingy/category_12933485.html。項目地址：https://gitee.com/fgai/react-agent（含完整代碼示?例與實戰源）。完整介紹：https://blog.csdn.net/suiyingy/article/details/146983582。

????????在 React Flow 中，Minimap（小地圖）是一個非常實用的組件，它主要用于呈現流程圖或圖形的整體縮略視圖。用戶通過 Minimap可以快速了解整個圖形的結構和布局，以及當前視口在整個圖形中的位置。它將每個節點渲染為一個 SVG 元素，并且可以通過各種屬性進行定制，如節點的顏色、邊框半徑、描邊寬度等。默認情況下，Minimap 是非交互式的，但通過設置pannable和zoomable屬性為true，可以讓用戶通過拖動或縮放 Minimap 來控制視口的位置和縮放比例，方便用戶在處理復雜的大型圖形時快速定位和導航。

????????Controls（控件）則是 React Flow 提供的一組用于控制視口操作的組件。它通常包含縮放、居中和鎖定視口等功能按鈕。通過這些控件，用戶可以方便地對圖形進行縮放操作，以便更清晰地查看細節或整體布局；點擊居中按鈕可以將圖形自動居中顯示在視口中；而鎖定視口功能則可以防止用戶意外地拖動或縮放視口，確保圖形的顯示狀態保持穩定。Controls 組件是可定制的，用戶可以根據自己的需求和設計偏好來調整控件的樣式和布局，以適應不同的應用場景。

????????示例程序如下所示。

import React, { useCallback } from 'react';
import {ReactFlow,MiniMap,Controls,Background,useNodesState,useEdgesState,addEdge,BackgroundVariant,
} from 'reactflow';import 'reactflow/dist/style.css';
const initialNodes = [{ id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },{ id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];export default function App() {const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)),[setEdges],);return (<div style={{ height: '500px' }}><ReactFlownodes={nodes}edges={edges}onNodesChange={onNodesChange}onEdgesChange={onEdgesChange}onConnect={onConnect}fitView><Controls /><MiniMap nodeColor="#90caf9"                // 節點填充顏色nodeStrokeColor="#1e88e5"          // 節點邊框顏色nodeBorderRadius={6}               // 節點圓角maskColor="rgba(144, 202, 249, 0.2)" // 視口遮罩顏色style={{backgroundColor: 'white',        // 背景色border: '1px solid #ccc',        // 邊框樣式borderRadius: '12px'             // 整體圓角}}nodeSize={12}                      // 節點尺寸/></ReactFlow></div>);
}

????????運行程序后結果如下圖所示。

圖1 Minimap 與 Controls

???立即關注獲取最新動態

點擊訂閱《React Agent 開發專欄》，每周獲取智能體開發深度教程。項目代碼持續更新至React Agent 開源倉庫，歡迎 Star 獲取實時更新通知！FGAI 人工智能平臺：FGAI 人工智能平臺