import { Meta, Story, Canvas, Controls, Markdown } from '@storybook/blocks';
import * as Stories from './story';
import Code from './code?raw';

<Meta of={Stories} />

# Example: Rendering with a Minimap
The minimap is a separate [paper](https://docs.jointjs.com/learn/quickstart/paper) component that works alongside the `GraphProvider` component. It displays a scaled-down view of the graph and updates its position and scale dynamically.

### Demo
Below is a live demo of the minimap in action:

<Canvas of={Stories.Default} />

### Code
The minimap is implemented as a separate `paper` component and is rendered inside the `GraphProvider` component. It uses properties like scale and position to synchronize with the main graph.

<Markdown>
{`\`\`\`tsx
${Code}
\`\`\``}
</Markdown>