![image](https://private-user-images.githubusercontent.com/53087914/322212612-5cbd3669-10a5-4ecb-9a1f-c9ae4eb5fb5a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM5Njg0MTEsIm5iZiI6MTcyMzk2ODExMSwicGF0aCI6Ii81MzA4NzkxNC8zMjIyMTI2MTItNWNiZDM2NjktMTBhNS00ZWNiLTlhMWYtYzlhZTRlYjVmYjVhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE4VDA4MDE1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTdjOGY1YTEwMjYxNDIxZDU0NTNkMTYzOTg5NjQ3YzlhMzEyNzVlMjAzZjlhMDBmZGQyMTAxYTI0YTc1YjE5ZmYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.omAb0Fg6_uaErWdEW2YPnm4sl8kphmSSukWMRG-XMpc)
ngx-vflow
is an Angular library for creating node-based applications. It aims to assist you in building anything from a static diagram to a visual editor. You can utilize the default design or apply your own by customizing everything using familiar technologies.
npm i ngx-vflow --save
The following code describes 3 nodes and creates 2 edges between them.
@Component({
template: `<vflow [nodes]="nodes" [edges]="edges" />`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [VflowModule]
})
export class DefaultEdgesDemoComponent {
public nodes: Node[] = [
{
id: '1',
point: { x: 10, y: 200 },
type: 'default',
text: '1'
},
{
id: '2',
point: { x: 200, y: 100 },
type: 'default',
text: '2'
},
{
id: '3',
point: { x: 200, y: 300 },
type: 'default',
text: '3'
},
]
public edges: Edge[] = [
{
id: '1 -> 2',
source: '1',
target: '2'
},
{
id: '1 -> 3',
source: '1',
target: '3'
},
]
}
The code above renders to this:
![image](https://private-user-images.githubusercontent.com/53087914/316996757-2a1b778a-2bfa-4176-9d50-065fdb1f1dec.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM5Njg0MTEsIm5iZiI6MTcyMzk2ODExMSwicGF0aCI6Ii81MzA4NzkxNC8zMTY5OTY3NTctMmExYjc3OGEtMmJmYS00MTc2LTlkNTAtMDY1ZmRiMWYxZGVjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE4VDA4MDE1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWRmNTVmZTk2NWEyN2NiYjU4NWI2OTBmODMyN2M0Y2ExYmU2ZWJkNjJiMjBkMWVkZGRjODUxMDEyNDIzYWIzMWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.f1udFr1pZ5ekGPHgsLBhC_haexdB20PtzwTQnnfos5Y)
For more complex example you may see the documentation: https://www.ngx-vflow.org/
vflow
component API is described here: https://www.ngx-vflow.org/api/ngx-vflow/classes/VflowComponent
Host directives for vflow
that you may find helpful:
- https://www.ngx-vflow.org/api/ngx-vflow/classes/ConnectionControllerDirective
- https://www.ngx-vflow.org/api/ngx-vflow/classes/ChangesControllerDirective
MIT