vyuhDiagram

Minimap policies ​

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 extension reads the same resolved scene 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 can invalidate its cache. 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
DiagramMinimapExtension(
  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.

dart
void configureMinimap(DrawingSession session, DiagramMinimapPolicy policy) =>
    session.setConfiguration(
      session.canvasConfiguration.copyWith(
        extensions: [
          ...session.canvasConfiguration.extensions.where(
            (extension) => extension.id != 'minimap',
          ),
          DiagramMinimapExtension(initiallyExpanded: true, policy: policy),
        ],
      ),
    );