The Angular diagram library that speaks signals

import { Component, signal } from '@angular/core';
import { DiagramCanvasComponent, GrafloriaNodeDefDirective } from '@grafloria/angular';

@Component({
  selector: 'app-flow',
  imports: [DiagramCanvasComponent, GrafloriaNodeDefDirective],
  template: `
    <grafloria-diagram-canvas
      [(nodes)]="nodes" [(edges)]="edges"
      [layout]="'elk'">
      <ng-template grafloriaNode="job" let-data="data">
        <div class="job-card">{{ data['title'] }}</div>
      </ng-template>
    </grafloria-diagram-canvas>
  `,
})
export class FlowComponent {
  nodes = signal([
    { id: 'a', type: 'job', position: { x: 0, y: 0 }, data: { title: 'Extract' } },
    { id: 'b', position: { x: 240, y: 0 }, label: 'Load' },
  ]);
  edges = signal([{ source: 'a', target: 'b' }]);
}