Skip to content
NgDiagram

Background

The background of your diagram canvas can be easily customized in ngDiagram.
You can choose between built-in patterns (solid, grid, dotted), or provide your own custom background.

Available Background Types

Section titled “Available Background Types”

Solid Color

Section titled “Solid Color”

You can set a solid color background by overriding the background color of the diagram container.

To do this, simply override the CSS variable or set the background style directly on the ng-diagram component. To use solid background, you don’t need to add the <ng-diagram-background> component.

Example:

--ngd-diagram-background-color: darkgray;

or

ng-diagram {
  background: darkgray; /* Your desired color */
}

Grid Background

Section titled “Grid Background”

The grid background displays a grid pattern with minor and major lines.

Grid backgrounds are commonly used in design, industry, and technical diagramming applications to provide a visual reference for layout and spacing. Our grid pattern is fully customizable, allowing you to adjust preferences.

Usage:

<ng-diagram ...props>
  <ng-diagram-background type="grid" />
</ng-diagram>

Configurable settings:

CSS Variables:

:root {
  --ngd-background-line-minor-color: #c2c0c0; /* Color of minor grid lines */
  --ngd-background-line-major-color: #6f7480; /* Color of major grid lines */
  --ngd-background-line-minor-width: 0.5; /* Width of minor grid lines */
  --ngd-background-line-major-width: 1; /* Width of major grid lines */
  --ngd-background-line-minor-opacity: 0.5; /* Opacity of minor grid lines */
  --ngd-background-line-major-opacity: 0.6; /* Opacity of major grid lines */
}

Dotted Background

Section titled “Dotted Background”

The dotted background displays a repeating pattern of dots. This is the default background type.

Usage:

<ng-diagram-background type="dots" />
<!-- or simply -->
<ng-diagram-background />

Configurable settings:

CSS Variables:

:root {
  --ngd-background-dot-color: #6f7480; /* Dot color */
}

Custom Background

Section titled “Custom Background”

You can provide any custom SVG, HTML, or image as the background by projecting content into the <ng-diagram-background> component. When you apply a custom background, it will completely replace any built-in patterns.

Usage:

<ng-diagram-background>
  <!-- Your custom SVG, image, or HTML here -->
  <svg width="100%" height="100%"><!-- Your SVG content --></svg>
</ng-diagram-background>

Custom background will be stretched to cover the entire diagram area.

Such background would not be panned or zoomed along with the diagram content. You can write a custom logic to achieve that if needed.

Example

Section titled “Example”
import '@angular/compiler';


import { Component, signal } from '@angular/core';
import {
  initializeModel,
  NgDiagramBackgroundComponent,
  NgDiagramComponent,
  provideNgDiagram,
  type NgDiagramConfig,
} from 'ng-diagram';
import {
  SidebarContainer,
  type BackgroundStyle,
} from './sidebar/sidebar.component';


@Component({
  imports: [NgDiagramComponent, SidebarContainer, NgDiagramBackgroundComponent],
  providers: [provideNgDiagram()],
  templateUrl: './diagram.component.html',
  styleUrls: ['./diagram.component.scss'],
})
export class DiagramComponent {
  backgroundStyle = signal<BackgroundStyle>('dot');


  onBackgroundStyleChange(style: BackgroundStyle) {
    this.backgroundStyle.set(style);
  }


  config = {
    zoom: {
      zoomToFit: {
        onInit: true,
        padding: [50, 285, 50, 50],
      },
    },
    // background: {
    //   cellSize: { width: 20, height: 20 }, // Size of each minor cell in the 'grid' background
    //   dotSpacing: 30, // Spacing between dots in the 'dot' background
    //   majorLinesFrequency: { x: 10, y: 10 }, // Frequency of major lines in the 'grid' background
    // },
  } satisfies NgDiagramConfig;


  model = initializeModel({
    nodes: [
      { id: '1', position: { x: 100, y: 150 }, data: { label: 'Node 1' } },
      { id: '2', position: { x: 400, y: 150 }, data: { label: 'Node 2' } },
    ],
    edges: [
      {
        id: '1',
        source: '1',
        sourcePort: 'port-right',
        targetPort: 'port-left',
        target: '2',
        data: {},
      },
    ],
  });
}