Getting Started with Foblex Flow

Foblex Flow is a flexible library for Angular, designed for creating interactive graphs and diagrams. This guide will assist you in integrating Foblex Flow into your project and leveraging its unique features.

Installation

To install Foblex Flow, run the following command in your Angular project:

npm install @foblex/flow

pnpm install @foblex/flow

yarn install @foblex/flow

This command will add Foblex Flow to your package.json and offer to create a default theme.

Using Components

Add the f-flow component to your HTML template:

• f-flow component acts as the primary container, managing the layout and interactions of all child visualization components within the flow.

• f-canvas component within f-flow component provides the foundation for placing other components such as nodes and connections.

• f-connection component creates a visual link between fNodeOutput and fNodeInput directives. In this case, it connects a output with fOutputId="1" to an input with fInputId="2".

• fNode directive represents a node in the flow and can be configured using properties like fNodePosition to define its position.

• The fNodeOutput and fNodeInput directives inside the nodes define connection points (outputs and inputs respectively) for establishing connections.