<MiniMap />

GitHub上的源代码 

<MiniMap /> 组件可用于呈现流程概览。它将每个节点渲染为 SVG 元素，并可直观显示当前视口相对于流程其余部分的位置。

🌐 The <MiniMap /> component can be used to render an overview of your flow. It renders each node as an SVG element and visualizes where the current viewport is in relation to the rest of the flow.

import { ReactFlow, MiniMap } from '@xyflow/react';
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]]} edges={[...]]}>
      <MiniMap nodeStrokeWidth={3} />
    </ReactFlow>
  );
}

属性

🌐 Props

对于 TypeScript 用户，<MiniMap /> 组件的 props 类型被导出为 MiniMapProps。

🌐 For TypeScript users, the props type for the <MiniMap /> component is exported as MiniMapProps.

示例

🌐 Examples

使迷你地图具有交互性

🌐 Making the mini map interactive

默认情况下，小地图是非交互式的。要允许用户通过平移或缩放小地图与视口进行交互，你可以将 zoomable 或 pannable（或两者！）属性设置为 true。

🌐 By default, the mini map is non-interactive. To allow users to interact with the viewport by panning or zooming the minimap, you can set either of the zoomable or pannable (or both!) props to true.

import { ReactFlow, MiniMap } from '@xyflow/react';
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]]} edges={[...]]}>
      <MiniMap pannable zoomable />
    </ReactFlow>
  );
}

实现自定义迷你地图节点

🌐 Implement a custom mini map node

可以将自定义组件传递给 nodeComponent 属性，以更改迷你地图中节点的渲染方式。如果这样做，必须仅在组件中使用 SVG 元素，才能正常工作。

🌐 It is possible to pass a custom component to the nodeComponent prop to change how nodes are rendered in the mini map. If you do this you must use only SVG elements in your component if you want it to work correctly.

import { ReactFlow, MiniMap } from '@xyflow/react';
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]]} edges={[...]]}>
      <MiniMap nodeComponent={MiniMapNode} />
    </ReactFlow>
  );
}
 
function MiniMapNode({ x, y }) {
  return <circle cx={x} cy={y} r="50" />;
}

查看 MiniMapNodeProps 的文档，了解哪些 props 会传递给你的自定义组件。

🌐 Check out the documentation for MiniMapNodeProps to see what props are passed to your custom component.

自定义小地图节点颜色

🌐 Customising mini map node color

nodeColor、nodeStrokeColor 和 nodeClassName 属性可以是一个函数，该函数接受一个 Node 并计算属性的值。这可以用来定制每个小地图节点的外观。

🌐 The nodeColor, nodeStrokeColor, and nodeClassName props can be a function that takes a Node and computes a value for the prop. This can be used to customize the appearance of each mini map node.

此示例展示了如何根据节点的类型为每个迷你地图节点着色：

🌐 This example shows how to color each mini map node based on the node’s type:

import { ReactFlow, MiniMap } from '@xyflow/react';
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]]} edges={[...]]}>
      <MiniMap nodeColor={nodeColor} />
    </ReactFlow>
  );
}
 
function nodeColor(node) {
  switch (node.type) {
    case 'input':
      return '#6ede87';
    case 'output':
      return '#6865A5';
    default:
      return '#ff0072';
  }
}

TypeScript

该组件接受自定义节点类型的通用类型参数。有关更多信息，请参阅我们 Typescript 指南中的本节。

🌐 This component accepts a generic type argument of custom node types. See this section in our Typescript guide for more information.

<MiniMap<CustomNodeType> nodeColor={nodeColor} />