Angular Flow is a component that allows you to create a flow diagram using Angular. Live Demo link
Stackblitz Demo link
npm install @ngu/flowimport{Component}from"@angular/core";import{FlowComponent,FlowChildComponent}from"@ngu/flow";
@Component({selector: "app-root",standalone: true,imports: [FlowComponent,FlowChildComponent],template: ` <ngu-flow class="flow"> @for (item of lists; track item.id; let i = $index) { <div [flowChild]="item" class="child">{{ i }}</div> } </ngu-flow> `,styles: ` .flow { min-height: 90vh; background: #eee; } .child { border: 1px solid #ccc; width: 100px; height: 50px; background: white; display: flex; align-items: center; justify-content: center; } `,})exportclassAppComponent{lists=[{id: "1",x: 0,y: 0,deps: []},{id: "2",x: 0,y: 0,deps: ["1"]},];}