The <ng-diagram-minimap> component provides a bird’s-eye view of your diagram, showing all nodes and the current viewport position. It supports click-and-drag navigation to quickly pan to different areas of your diagram.

Note

The minimap displays only nodes. Edges are not rendered in the minimap view.

Basic Usage

Add the <ng-diagram-minimap> component inside your diagram container:

<div class="diagram-container">
  <ng-diagram [model]="model" [config]="config">
    <!-- other components -->
  </ng-diagram>
  <ng-diagram-minimap />
</div>

Service Access

The minimap can be placed anywhere in your template, but it requires access to ngDiagram services. Make sure the component is within a context where provideNgDiagram() has been provided.

Container Positioning

The minimap uses position: absolute for corner placement via the position input. Ensure the parent container has position: relative for proper positioning:

.diagram-container {
  position: relative;
}

Configuration

Position and Size

The minimap can be positioned in any corner using the position input and sized with width and height:

<ng-diagram-minimap position="bottom-right" [width]="200" [height]="150" />

See NgDiagramPanelPosition for available position values.

Zoom Controls

By default, zoom controls are displayed below the minimap. To hide them:

<ng-diagram-minimap [showZoomControls]="false" />

Customization via CSS Variables

Theming

Some CSS variables reference design tokens to support light/dark themes. For proper multi-theme customization, see the Styling guide to understand how tokens and primitives work.

General Appearance

You can customize the minimap container appearance using CSS variables:

:root {
  /* Container styling */
  --ngd-minimap-background: ...;
  --ngd-minimap-border-color: ...;
  --ngd-minimap-border-radius: 1rem;
  --ngd-minimap-padding: 0.5rem;
  --ngd-minimap-margin: 1rem;
  --ngd-minimap-shadow-color: ...;

  /* Viewport indicator */
  --ngd-minimap-viewport-stroke-color: ...;
  --ngd-minimap-viewport-stroke-width: 1;
}

Node Styling

Default node appearance in the minimap can be controlled via CSS variables:

:root {
  --ngd-minimap-node-color: ...;
  --ngd-minimap-node-opacity: 0.8;
}

Zoom Controls

The zoom controls appearance can be customized with these CSS variables:

:root {
  /* Zoom controls text */
  --ngd-zoom-controls-font-size: 0.8125rem;
  --ngd-zoom-controls-font-weight: 500;
  --ngd-zoom-controls-color: ...;

  /* Navigation buttons (zoom in/out) */
  --ngd-nav-button-color: ...;
  --ngd-nav-button-size: 1.25rem;
  --ngd-nav-button-border-radius: 0.5rem;
  --ngd-nav-button-padding: 0.6875rem;
  --ngd-nav-button-background-color-hover: ...;
  --ngd-nav-button-color-active: ...;
  --ngd-nav-button-color-disabled: ...;
}

Customization via Style Function

For dynamic node styling based on Node properties, use the nodeStyle input. This accepts a MinimapNodeStyleFn callback:

import { MinimapNodeStyle, Node } from 'ng-diagram';

nodeStyle = (node: Node): MinimapNodeStyle => {
  const style: MinimapNodeStyle = {};

  // Different shape for specific nodes
  if (node.type === 'database') {
    style.shape = 'circle';
  }

  // Highlight selected nodes
  if (node.selected) {
    style.stroke = '#2196F3';
    style.strokeWidth = 2;
  }

  // Custom fill based on node data
  if (node.data?.status === 'error') {
    style.fill = '#f44336';
  }

  return style;
};

<ng-diagram-minimap [nodeStyle]="nodeStyle" />

See MinimapNodeStyle for all available style properties.

Customization via Templates

For complete control over node rendering, you can provide custom Angular components per node type using minimapNodeTemplateMap. This is useful when you need to display icons, images, or complex visuals in the minimap.

Performance Consideration

Custom templates use foreignObject and Angular components, which can impact performance with large diagrams. Use templates sparingly and only for node types that truly require custom rendering. For simple styling changes, prefer the nodeStyle function or CSS variables.

Creating a Custom Template

Your component must implement the NgDiagramMinimapNodeTemplate interface:

import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { MinimapNodeStyle, NgDiagramMinimapNodeTemplate, Node } from 'ng-diagram';

@Component({
  selector: 'app-image-minimap-node',
  standalone: true,
  template: `<img [src]="imageUrl" alt="" />`,
  styles: [
    `
      :host {
        display: contents;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ImageMinimapNodeComponent implements NgDiagramMinimapNodeTemplate {
  node = input.required<Node>();
  nodeStyle = input<MinimapNodeStyle>();

  get imageUrl(): string {
    const data = this.node().data as { imageUrl?: string };
    return data?.imageUrl ?? 'placeholder.png';
  }
}

Registering Templates

Create a NgDiagramMinimapNodeTemplateMap and pass it to the minimap:

import { NgDiagramMinimapNodeTemplateMap } from 'ng-diagram';

minimapNodeTemplateMap = new NgDiagramMinimapNodeTemplateMap([
  ['image', ImageMinimapNodeComponent],
  ['custom-type', CustomMinimapNodeComponent],
]);

<ng-diagram-minimap [minimapNodeTemplateMap]="minimapNodeTemplateMap" />

Nodes with types not in the map will use the default rectangle rendering.

Example

diagram.component.ts

import '@angular/compiler';

import { Component } from '@angular/core';
import {
  initializeModel,
  NgDiagramBackgroundComponent,
  NgDiagramComponent,
  NgDiagramMinimapComponent,
  provideNgDiagram,
  type NgDiagramConfig,
} from 'ng-diagram';

@Component({
  imports: [
    NgDiagramComponent,
    NgDiagramBackgroundComponent,
    NgDiagramMinimapComponent,
  ],
  providers: [provideNgDiagram()],
  templateUrl: './diagram.component.html',
  styleUrls: ['./diagram.component.scss'],
})
export class DiagramComponent {
  config = {
    zoom: {
      zoomToFit: {
        onInit: true,
        padding: [50, 250, 50, 50],
      },
    },
  } satisfies NgDiagramConfig;

  model = initializeModel({
    nodes: [
      { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
      { id: '2', position: { x: 300, y: 0 }, data: { label: 'Node 2' } },
      { id: '3', position: { x: 150, y: 150 }, data: { label: 'Node 3' } },
      { id: '4', position: { x: 0, y: 300 }, data: { label: 'Node 4' } },
      { id: '5', position: { x: 300, y: 300 }, data: { label: 'Node 5' } },
    ],
    edges: [
      {
        id: 'e1',
        source: '1',
        sourcePort: 'port-right',
        target: '2',
        targetPort: 'port-left',
        data: {},
      },
      {
        id: 'e2',
        source: '4',
        sourcePort: 'port-right',
        target: '5',
        targetPort: 'port-left',
        data: {},
      },
    ],
  });
}

diagram.component.html

<div class="not-content diagram">
  <ng-diagram [model]="model" [config]="config">
    <ng-diagram-background />
  </ng-diagram>
  <ng-diagram-minimap />
</div>

diagram.component.scss

:host {
  position: relative;
  display: flex;
}

.diagram {
  position: relative;
  display: flex;
  width: 100%;
  height: var(--ng-diagram-height);
  border: var(--ng-diagram-border);
}

---