Features

Diagram area (canvas)

The diagram area is an infinite workspace that allows users to freely arrange elements:

1. Users can manually place nodes anywhere on the canvas.

2. The system also provides an option to automatically arrange the nodes on the canvas (ELK-based auto layout feature) – horizontally or vertically.

The library of elements (nodes)

1. The library contains a predefined list of elements that users can drag and drop onto the diagram area.

2. Items in the library can be displayed in two ways:

   1. Simplified view – as a single list.

   2. Grouped view – organized into logical categories.

3. All elements in the palette are predefined – users cannot modify them (e.g., add new elements, delete existing ones, or change their order).

Ready-to-use nodes

1. Trigger Nodes: Initiate workflows through specific events, such as receiving an email, form submissions, or scheduled times.

2. Action Nodes: Execute tasks like sending emails, creating database records, or updating CRM systems.

3. Condition Nodes: Branch workflows based on conditions, enabling "if/else" logic.

4. Delay Nodes: Pause workflows for a specified duration before resuming.

5. Decision Nodes: Route workflows based on user input or specific data values.

Properties Panel

1. When a node or a link is selected, an additional panel appears, allowing users to define or edit properties.

2. The panel supports various field types:

   1. Text inputs

   2. Drop-down menus

   3. Checkboxes

   4. Numeric fields

   5. WYSIWYG text editor for rich text content

3. Properties are defined dynamically using a JSON Schema, enabling real-time updates to the properties panel without requiring code changes.

Relationships and Connections

1. Relationship Lines:

   1. One predefined type of relationship line is available.

   2. Users cannot customize the color or style of these lines.

2. Connecting Nodes:

3. Users manually draw connection lines between nodes.

   1. Only one connection can exist between any two nodes.

   2. A single node can have multiple incoming connections.

   3. Connections are not validated for correctness by the system – users are free to create any relationships.

4. Deleting Connections:

   1. Users can delete connections without validation from the system.

5. Labels on Links:

   1. Users can define labels for relationship lines and choose to show or hide them.

   2. Labels are draggable, allowing precise placement for better clarity.

Auto-save functionality

1. The system automatically saves data before the user exits the application.

2. Supports two storage methods: local storage and API-based storage for seamless data persistence.

Read-only mode

1. A dedicated mode for users who are not authorized to make changes.

2. All nodes on the canvas are frozen, preventing modifications while still allowing users to view node properties.

Snack bar notifications

1. User-friendly notifications provide real-time feedback on actions and system statuses.

2. After major actions (e.g., saving or loading a diagram), a snackbar notification displays the result as either a success or error message.

Zoom in/out

1. Users can adjust the view of their diagram:

   1. Zoom in for detailed editing.

   2. Zoom out to see the broader structure.

2. Zooming can be controlled using a dedicated button.

Undo/redo recent actions

1. Users can undo or redo node-related actions using keyboard shortcuts or a dedicated button.

2. Features a customizable action manager to define which actions are included in the undo/redo history.

Keyboard shortcuts

1. Copy

2. Paste

3. Cut

4. Select All

5. Undo

6. Redo