vyuhDiagram
Extensions

Minimap policies ​

Rendering, navigation, and zoom controls are owned by vyuh_diagram_extension_minimap. The editor extension neither depends on nor re-exports it: import the minimap package and install MinimapExtension beside EditorExtension in the configuration's extensions. MinimapExtension(visible: false) starts hidden; toggle it at runtime with controller.edits.setOptions(controller.options<MinimapOptions>().copyWith(visible: false)). MinimapOptions holds all of its settings, including placement, policy and theme (null picks the light or dark default by the canvas theme's brightness). For custom placement, use the unpositioned DiagramMinimapControl with the same extension host.

Loading interactive example…Open in new tab ↗
Opening the live canvas…

Choose Filled or Outlines to change thumbnails. Connections also shows the resolved connector; Custom cards installs a painter for the registered card type. The transparent standalone text has a visible thumbnail in both modes.

The minimap shows the same content as the canvas. Custom thumbnail paint receives resolved bounds and an outline, with ancestor and shape clipping already applied. It changes minimap presentation, not document geometry or export.

Click or drag the minimap to navigate. Policy changes and camera navigation do not add document undo entries. Replace the policy when external thumbnail inputs change so the minimap redraws its thumbnails. Reset restores the filled policy.

Source ​

The complete minimap and zoom controls default to the bottom-left with 12-pixel edge margins. Configure placement when installing the extension:

dart
MinimapExtension(
  alignment: Alignment.bottomLeft,
  margin: const EdgeInsets.only(left: 20, bottom: 24),
  initiallyExpanded: true,
)

Use any Alignment to anchor the overlay elsewhere. The same alignment and margins apply when collapsed or expanded. Colors come from MinimapExtension(theme: MinimapTheme.dark.copyWith(...)).

dart
void configureMinimap(
  DiagramController controller, {
  bool? visible,
  bool? filled,
  bool? connections,
  bool? custom,
}) {
  final options = controller.options<MinimapOptions>();
  final p = options.policy;
  controller.edits.setOptions(
    options.copyWith(
      visible: visible,
      policy: DiagramMinimapPolicy(
        shapeAppearance: filled == null
            ? p.shapeAppearance
            : filled
            ? DiagramMinimapShapeAppearance.outlinesAndFills
            : DiagramMinimapShapeAppearance.outlines,
        showConnections: connections ?? p.showConnections,
        shapePainterForType: custom == null
            ? p.shapePainterForType
            : custom
            ? (type) => type == Shapes.card ? paintCardThumbnail : null
            : null,
      ),
    ),
  );
}