This project demonstrates how to build an interactive node-based diagram editor using the @foblex/flow Angular library.
It includes features such as zooming, drag & drop, node creation, customizable connections, and full control over layout and behavior.
Additionally, this example integrates:
- ✅ Persistent IndexedDB state saving
- 🎨 Custom color picker (inspired by Figma)
- 🖼️ Custom image picker for background or node assets
- 🧱 UI components built using Angular Material
You can also watch a short demo video (example.mov) available in the repository:
- 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
- Save/load flow state from localStorage
- Custom image picker (like in Figma)
- Custom color picker
- Angular Material UI components
Run npm install to install the required packages.
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.
This example is distributed under the MIT License. See the LICENSE file for more information.