<MiniMap />

<MiniMap /> コンポーネントを使用すると、フローの概要をレンダリングできます。各ノードを SVG 要素としてレンダリングし、現在のビューポートがフローの残りの部分とどのように関連しているかを視覚化します。

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

プロパティ

TypeScript ユーザーの場合、<MiniMap /> コンポーネントのプロパティ型は MiniMapProps としてエクスポートされます。

名前	型	デフォルト
#`nodeColor?`	string \| ((node: Node<any>) => string) \| (`#fff` (白): Node<#nodeStrokeColor?>) => string \| ((node: Node<any>) => string)	`"#e2e2e2"`
string \| ((node: Node<any>) => string)	string \| ((node: Node<any>) => string) \| (`#fff` (白): Node<#nodeStrokeColor?>) => string \| ((node: Node<any>) => string)	`"transparent"`
#`nodeClassName?`	string \| ((node: Node<any>) => string) \| (`#fff` (白): Node<#nodeStrokeColor?>) => string \| ((node: Node<any>) => string)
string \| ((node: Node<any>) => string)	`#nodeBorderRadius?`	`5`
number \| ((node: Node<any>) => number)	`#nodeBorderRadius?`	`2`
5	`#nodeStrokeWidth?number \| ((node: Node<any>) => number)` 1
#`nodeComponent?`	`string \| ((node: Node<any>) => string)` React.ComponentType<MiniMapNodeProps>	`"rgb(240, 240, 240, 0.6)"`
ミニマップにノードをレンダリングするためのカスタムコンポーネント。このコンポーネントは SVG 要素をレンダリングする必要があります！	`string \| ((node: Node<any>) => string)`	`"none"`
#`maskColor?`	`#nodeBorderRadius?`	`1`
string	`PanelPosition`	`"bottom-right"`
ビューポートに現在表示されていないミニマップの部分を覆うマスクの色。	(#maskStrokeColor?: #nodeStrokeWidth?string#aaa` (薄い灰色): XYPosition) => #maskStrokeWidth?
number	(#maskStrokeColor?: #nodeStrokeWidth?string`#fff` (白): Node<#nodeStrokeColor?>) => #maskStrokeWidth?
1	`#position?` PanelPosition	`false`
`bottom-right`	`#position?` #`onClick?`	`false`
(event: MouseEvent<SVGRectElement, MouseEvent>, position: XYPosition) => void	`string \| ((node: Node<any>) => string) \|` #`onNodeClick?`	`"React Flow mini map"`
#`inversePan?`	`#position?`
#`zoomStep?`	`#nodeBorderRadius?`	`10`
#`offsetScale?`	`#nodeBorderRadius?`	`5`

例

ミニマップをインタラクティブにする

デフォルトでは、ミニマップはインタラクティブではありません。ユーザーがミニマップのパンまたはズームによってビューポートを操作できるようにするには、zoomableまたはpannable（または両方！）のプロパティをtrueに設定します。

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

カスタムミニマップノードを実装する

ノードがミニマップでどのようにレンダリングされるかを変更するために、カスタムコンポーネントをnodeComponentプロパティに渡すことができます。正しく動作させるには、コンポーネント内で**必ず** SVG要素のみを使用する必要があります。

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のドキュメントを参照してください。

ミニマップノードの色をカスタマイズする

nodeColor、nodeStrokeColor、およびnodeClassNameプロパティは、Nodeを受け取り、プロパティの値を計算する関数にすることができます。これは、各ミニマップノードの外観をカスタマイズするために使用できます。

この例は、ノードのタイプに基づいて各ミニマップノードの色を変更する方法を示しています。

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ガイドのこのセクションを参照してください。

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

コンポーネント型