Custom Edges

When ngDiagram’s default edge customizations are not sufficient, you can create custom edges that provide more precise control over edge rendering, including routing.

You can create a custom edge by extending NgDiagramBaseEdgeComponent and implementing NgDiagramEdgeTemplate

@Component({
  selector: 'custom-edge',
  template: `<ng-diagram-base-edge
    [edge]="customEdge()"
    stroke="var(--ngd-default-edge-stroke)"
  />`,
  imports: [NgDiagramBaseEdgeComponent],
})
export class CustomEdgeComponent implements NgDiagramEdgeTemplate {
  edge = input.required<Edge>();

  customEdge = computed(() => {
    const edge = this.edge();
    const { sourcePosition, targetPosition } = edge;

    if (!sourcePosition || !targetPosition) {
      return edge;
    }

    // Create custom points for the edge path
    const points = [
      { x: sourcePosition.x, y: sourcePosition.y },
      { x: targetPosition.x, y: targetPosition.y },
    ];

    return {
      ...edge,
      points,
      routing: 'polyline',
      routingMode: 'manual' as const,
    };
  });
}

Registering Custom Edge Types

Custom edge types need to be registered in the edgeTemplateMap and passed to the ngDiagram component.

  imports: [NgDiagramComponent],
  providers: [provideNgDiagram()],
  template: `
    <ng-diagram [model]="model" [edgeTemplateMap]="edgeTemplateMap" />
  `,
  styles: `
    :host {
      flex: 1;
      display: flex;
      height: 100%;
    }
  `,
})
export class Diagram {
  edgeTemplateMap = new NgDiagramEdgeTemplateMap([
    ['custom', CustomEdgeComponent],
  ]);

  model = initializeModel({
    metadata: {
      viewport: { x: 0, y: 0, scale: 0.88 },
    },
    nodes: [
      {
        id: '1',
        position: { x: 150, y: 150 },
        data: { label: 'Node 1' },
        rotatable: true,
      },
      { id: '2', position: { x: 500, y: 150 }, data: { label: 'Node 2' } },
    ],
    edges: [
      {
        id: '1',
        source: '1',
        sourcePort: 'port-right',
        targetPort: 'port-left',
        target: '2',
        type: 'custom',
        data: {},
      },
    ],
  });
}

Custom Routing

Custom routing is an extensible mechanism that allows you to create sophisticated edge paths tailored to your specific needs. You can implement custom routing algorithms, create dynamic paths based on node positions, or define manual waypoints for precise control.

Routing Learn about routing algorithms and how to customize them in ngDiagram

Adding Edge Labels

To add labels to your custom edges, integrate the BaseEdgeLabelComponent within your custom edge component. Here’s an implementation example:

@Component({
  selector: 'labeled-edge',
  template: `<ng-diagram-base-edge
    [edge]="edge()"
    stroke="var(--ngd-default-edge-stroke)"
  >
    <ng-diagram-base-edge-label [id]="'test-label'" [positionOnEdge]="0.5">
      <div class="custom-label">Label</div>
    </ng-diagram-base-edge-label>
  </ng-diagram-base-edge>`,
  styleUrl: './labeled-edge.component.scss',
  imports: [NgDiagramBaseEdgeComponent, BaseEdgeLabelComponent],
})
export class LabeledEdgeComponent implements NgDiagramEdgeTemplate {
  edge = input.required<Edge>();
}

Edge Labels Learn more about adding and customizing labels on edges in ngDiagram