shalu-system-designer/apps/er-designer/src/pages/er/components/Navigator.tsx

import React, { useEffect } from "react";
import { useModel } from "umi";
import { MiniMap } from "@antv/x6-plugin-minimap";
export default function Navigator() {
  const { graph } = useModel("erModel");
  const mapRef = React.useRef<HTMLDivElement>(null);

  useEffect(() => {
    console.log("graph", graph);
    if (graph && mapRef.current) {
      graph.use(
        new MiniMap({
          container: mapRef.current,
          width: 330,
          height: 210,
          padding: 10,
        })
      );
    }
  }, [graph, mapRef.current]);

  return (
    <div>
      <div ref={mapRef}></div>
    </div>
  );
}