Getting Started

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

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:

Example:

<f-flow fDraggable>
  <f-canvas>
    <f-connection fOutputId="output1" fInputId="input1"></f-connection>
    <div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="output1" fOutputConnectableSide="right"> Drag me </div>
    <div fNode fDragHandle [fNodePosition]="{ x: 244, y: 24 }" fNodeInput fInputId="input1" fInputConnectableSide="left"> Drag me </div>
  </f-canvas>
</f-flow>