<MiniMap />

<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.

Name	Type	Default
#`nodeColor?`	`string \| (node: Node<T>) => string`	`"#e2e2e2"`
#`nodeStrokeColor?`	`string \| (node: Node<T>) => string`	`"transparent"`
#`nodeClassName?`	`string \| (node: Node<T>) => string`
#`nodeBorderRadius?`	`number`	`5`
#`nodeStrokeWidth?`	`number`	`2`
#`nodeComponent?`	`React.ComponentType<MiniMapNodeProps>` A custom component to render the nodes in the minimap. This component must render an SVG element!
#`maskColor?`	`string` The color of the mask that covers the portion of the minimap not currently visible in the viewport.	`"rgb(240, 240, 240, 0.6)"`
#`maskStrokeColor?`	`string`	`"none"`
#`maskStrokeWidth?`	`number`	`1`
#`position?`	`PanelPosition`	`"bottom-right"`
#`onClick?`	`(event: React.MouseEvent, position: XYPosition) => void`
#`onNodeClick?`	`(event: React.MouseEvent, node: Node<T>) => void`
#`pannable?`	`boolean` Determines whether you can pan the viewport by dragging inside the minimap.	`false`
#`zoomable?`	`boolean` Determines whether you can zoom the viewport by scrolling inside the minimap.	`false`
#`ariaLabel?`	`string \| null` There is no text inside the minimap for a screen reader to use as an accessible name, so it's important we provide one to make the minimap accessible. The default is sufficient but you may want to replace it with something more relevant to your app or product.	`"React Flow mini map"`
#`inversePan?`	`boolean`
#`zoomStep?`	`number`	`10`
#`offsetScale?`	`number`	`5`

示例

¥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 prop 以更改节点在迷你地图中的渲染方式。如果你这样做，你必须在组件中仅使用 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 的文档以查看传递给自定义组件的属性。

¥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} />