synergycodes/ng-diagram/ng-diagram-auto-layout

import ELK, { type ElkExtendedEdge, type ElkNode } from 'elkjs';
import { type Edge, type Node, type Point } from 'ng-diagram';
const elk = new ELK(); // one instance, reused
const layoutOptions = {
  'elk.algorithm': 'layered',
  'elk.direction': 'RIGHT',
  'spacing.nodeNode': '50',
  'layered.spacing.nodeNodeBetweenLayers': '50',
};
export interface LayoutResult {
  nodes: { id: string; position: Point }[];
  edges: { id: string; routingMode: 'manual' | 'auto'; points?: Point[] }[];
}
export async function layoutWithElk(nodes: Node[], edges: Edge[]): Promise<LayoutResult> {
  const portKey = (nodeId: string, portId: string) => `${nodeId}:${portId}`;
  const ports = new Set<string>();
  const children = nodes.map(
    (node): ElkNode => ({
      id: node.id,
      width: node.size?.width ?? 0,
      height: node.size?.height ?? 0,
      // measuredPorts positions are relative to the node, as ELK expects
      layoutOptions: { portConstraints: 'FIXED_POS' },
      ports: (node.measuredPorts ?? []).map((port) => {
        ports.add(portKey(node.id, port.id));
        return { id: portKey(node.id, port.id), ...port.position, ...port.size };
      }),
    })
  );
  // An edge end that names a port ELK does not know is attached to the node instead
  const end = (nodeId: string, portId?: string) =>
    portId && ports.has(portKey(nodeId, portId)) ? portKey(nodeId, portId) : nodeId;
  const graph: ElkNode = {
    id: 'root',
    layoutOptions,
    children,
    edges: edges.map(
      (edge): ElkExtendedEdge => ({
        id: edge.id,
        sources: [end(edge.source, edge.sourcePort)],
        targets: [end(edge.target, edge.targetPort)],
      })
    ),
  };
  const result = await elk.layout(graph);
  const placed = new Map((result.children ?? []).map((child) => [child.id, child]));
  const routed = new Map((result.edges ?? []).map((edge) => [edge.id, edge]));
  return {
    nodes: nodes.map(({ id, position }) => ({
      id,
      position: { x: placed.get(id)?.x ?? position.x, y: placed.get(id)?.y ?? position.y },
    })),
    edges: edges.map(({ id }) => {
      const section = routed.get(id)?.sections?.[0];
      // No route from ELK: let ng-diagram route the edge (a manual edge without points draws nothing)
      return section
        ? {
            id,
            routingMode: 'manual' as const,
            points: [section.startPoint, ...(section.bendPoints ?? []), section.endPoint],
          }
        : { id, routingMode: 'auto' as const };
    }),
  };
}

@Injectable()
export class LayoutService {
  private readonly diagram = inject(NgDiagramService);
  private readonly modelService = inject(NgDiagramModelService);
  private readonly viewport = inject(NgDiagramViewportService);
  private busy = false;
  private rerun = false;
  private fitRequested = false;
  /** Lays out the visible graph. A call made while a layout runs returns at once; its run (and fit) is merged into one more run. */
  async layout(fit = false): Promise<void> {
    this.fitRequested ||= fit;
    if (this.busy) {
      this.rerun = true;
      return;
    }
    this.busy = true;
    try {
      do {
        this.rerun = false;
        await this.applyLayout();
      } while (this.rerun);
      if (this.fitRequested) {
        this.fitRequested = false;
        await this.viewport.zoomToFit();
      }
    } finally {
      this.busy = false;
    }
  }
  private async applyLayout(): Promise<void> {
    // getModel() reads are fresh; the nodes()/edges() signals can lag right after an await
    const model = this.modelService.getModel();
    // Top-level visible nodes only: a group is one box, its content moves with it
    const nodes = model.getNodes().filter((node) => !node.computedHidden && !node.groupId);
    const ids = new Set(nodes.map((node) => node.id));
    const edges = model.getEdges().filter((edge) => ids.has(edge.source) && ids.has(edge.target));
    const result = await layoutWithElk(nodes, edges);
    // updateNodes on a group does not move its children: shift all descendants by the group's offset
    const positions = result.nodes.flatMap(({ id, position }) => {
      const node = this.modelService.getNodeById(id);
      if (!node) return [];
      const dx = position.x - node.position.x;
      const dy = position.y - node.position.y;
      const descendants = this.modelService.getChildrenNested(id);
      return [
        { id, position },
        ...descendants.map((child) => ({ id: child.id, position: { x: child.position.x + dx, y: child.position.y + dy } })),
      ];
    });
    // One commit for all positions and edge geometry
    await this.diagram.transaction(() => {
      this.modelService.updateNodes(positions);
      this.modelService.updateEdges(result.edges);
    });
  }
  /** Manual (layout) edges do not follow moved nodes: hand them back to ng-diagram routing. */
  releaseManualEdges(event: SelectionMovedEvent): void {
    const toAuto = new Map<string, { id: string; routingMode: 'auto' }>();
    for (const node of event.nodes) {
      for (const edge of this.modelService.getConnectedEdges(node.id)) {
        if (edge.routingMode === 'manual') toAuto.set(edge.id, { id: edge.id, routingMode: 'auto' });
      }
    }
    if (toAuto.size > 0) void this.modelService.updateEdges([...toAuto.values()]);
  }
}

<!-- .canvas { display: flex; height: 100%; visibility: hidden } .canvas.ready { visibility: visible } -->
<div class="canvas" [class.ready]="ready()">
  <ng-diagram
    [model]="model"
    (diagramInit)="onInit()"
    (selectionMoved)="layoutService.releaseManualEdges($event)"
    (edgeDrawEnded)="onEdgeDrawEnded($event)"
    (selectionRemoved)="onSelectionRemoved($event)"
  />
</div>

protected readonly layoutService = inject(LayoutService);
readonly ready = signal(false);
// After diagramInit the rendered nodes are measured, so ELK gets real sizes
async onInit(): Promise<void> {
  await this.layoutService.layout(true); // layout, then zoomToFit
  this.ready.set(true);
}
onEdgeDrawEnded(event: EdgeDrawEndedEvent): void {
  if (event.success) void this.layoutService.layout();
}
onSelectionRemoved(event: SelectionRemovedEvent): void {
  if (event.deletedNodes.length > 0 || event.deletedEdges.length > 0) void this.layoutService.layout();
}