Scheme editor with step-by-step animations using @foblex/flow

This is an example of using the @foblex/flow library in an Angular project. You can use this example as a starting point for your own project.

DEMO

Used library capabilities

• Zoom (with mouse wheel, double click, and buttons)
• Select elements (single selection using the mouse, multiple selection using the Shift key and the mouse)
• Drag and drop
• Create new connections
• Reassign connections
• Connection text
• Change connection markers
• Change connection type
• Change connection behavior
• Change connection style
• Change connection text
• Create new nodes using drag and drop from the palette
• Draggable background
• Change background

Installation

Run npm install to install the required packages.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

License

This example is distributed under the MIT License. See the LICENSE file for more information.