Angularのノードベースライブラリ ngx-vflow を使ってみた

はじめに

@denwaya34です。😆
angularのNodeベースのアプリケーション開発ライブラリ:ngx-vflowを使ってみたのでレポートします。

ngx-vflow とは

ngx-vflowはノードベースのアプリケーションを作成するためのAngularライブラリです。
Reactにはreact-flowというライブラリがありますが、ngx-vflowはそれと類似のAngular向けのライブラリです。
こんな感じでフロー図を作成できます。

使い方

Node(=図の四角部分)は以下のように定義します。

const node = {
    id: '1',                  // Nodeの識別子
    point: { x: 60, y: 150 }, // Nodeの位置
    type: 'default',          // Nodeの種類
    text: '1',                // Node上に表示するテキスト
};

Edge(=Node間の線)は以下のように定義します。

const edge = {
    id: '1 -> 3',  // Edgeの識別子
    source: '1',   // Edgeの始点となるNodeの識別子
    target: '3',   // Edgeの終点となるNodeの識別子
};

NodeとEdgeを定義したら、以下のように<vflow>タグに渡します。
全体のコードは以下です。

app.component.ts

import {ChangeDetectionStrategy, Component, signal} from '@angular/core';
import {Vflow, Node, Edge} from 'ngx-vflow';

@Component({
  selector: 'app-root',
  imports: [Vflow],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <vflow
      view="auto"
      [nodes]="nodes()"
      [edges]="edges()"
      [snapGrid]="[25, 25]"
      [background]="{ type: 'dots' }"
    >
      <mini-map />
    </vflow>
`,
})
export class AppComponent {
  public nodes = signal<Node[]>(
    [
      {
        id: '1',
        point: { x: 60, y: 150 },
        type: 'default',
        text: '1',
      },
      {
        id: '2',
        point: { x: 300, y: 100 },
        type: 'default',
        text: '2',
      },
    ]
  );

  public edges = signal<Edge[]>([
    {
      id: '1 -> 2',
      source: '1',
      target: '2',
    },
    {
      id: '1 -> 3',
      source: '1',
      target: '3',
    },
  ]);
}

実際に動くコード

• stackblitz
• Github