Virtualization in Angular Diagram Component

24 Aug 20254 minutes to read

Virtualization is a performance optimization technique that significantly improves diagram rendering and interaction speed, particularly when working with large-scale diagrams containing hundreds or thousands of nodes and connectors.

Understanding Virtualization in Diagram

Virtualization enhances diagram performance by implementing on-demand loading of diagramming objects. Only the nodes and connectors currently visible within the diagram’s viewport are rendered and processed, while objects outside the visible area remain unloaded until they enter the view during scrolling or panning operations.

This selective rendering approach provides substantial performance benefits:

• Reduced Memory Usage: Only visible objects consume memory resources
• Faster Initial Load: Diagrams render quickly regardless of total object count
• Smooth Interactions: Dragging, zooming, and panning remain responsive
• Scalable Performance: Performance remains consistent as diagram size increases

When to Enable Virtualization

Virtualization is recommended for diagrams that meet any of these criteria:

• Contain 100 or more nodes and connectors
• Experience performance issues during scrolling or zooming
• Require frequent updates to large datasets
• Display complex organizational charts, network diagrams, or flowcharts

Enabling Virtualization

To activate virtualization, include the Virtualization constraint in the diagram’s constraints property. The virtualization feature works in conjunction with the diagram’s scrolling capabilities to manage object loading dynamically.

To enable virtualization in a diagram, you need to include the virtualization constraint in the diagram’s constraints. For more information, refer to the diagram constraints.

The following code example demonstrates how to enable Virtualization mode in the diagram:

app.component.ts

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramConstraints, DiagramComponent, NodeModel } from '@syncfusion/ej2-angular-diagrams';

@Component({
  imports: [DiagramModule],
  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram id="diagram" width="100%" height="580px" [nodes]='nodes' [constraints]='constraints' ></ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})

export class AppComponent {
  public nodes: NodeModel[] = [];
  @ViewChild('diagram')
  public diagram!: DiagramComponent;
  
  ngOnInit() {
    this.nodes = this.createNodes();
  }
  
  public constraints = DiagramConstraints.Default | DiagramConstraints.Virtualization;

  private createNodes(): NodeModel[] {
    const nodes: NodeModel[] = [];
    const nodeWidth = 50;
    const nodeHeight = 50;
    const space = 50;
    const nodesPerRow = 50;
    const totalNodes = 500;

    for (let i = 0; i < totalNodes; i++) {
      const row = Math.floor(i / nodesPerRow);
      const col = i % nodesPerRow;

      const node: NodeModel = {
        id: `node${i + 1}`,
        width: nodeWidth,
        height: nodeHeight,
        offsetX: col * (nodeWidth + space) + nodeWidth / 2,
        offsetY: row * (nodeHeight + space) + nodeHeight / 2,
        style: { fill: '#6BA5D7', strokeColor: 'white' },
        annotations: [{ content: `${i + 1}` }],
      };
      nodes.push(node);
    }
    return nodes;
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));