# Features

**Diagram area (canvas)**&#x20;

The diagram area is an infinite workspace that allows users to freely arrange elements:&#x20;

1. Users can manually place nodes anywhere on the canvas.&#x20;
2. The system also provides an option to automatically arrange the nodes on the canvas (ELK-based auto layout feature) – horizontally or vertically. &#x20;



**The library of elements (nodes)**&#x20;

1. The library contains a predefined list of elements that users can drag and drop onto the diagram area.&#x20;
2. Items in the library can be displayed in two ways:&#x20;
   1. Simplified view – as a single list.&#x20;
   2. Grouped view – organized into logical categories.&#x20;
3. All elements in the palette are predefined – users cannot modify them (e.g., add new elements, delete existing ones, or change their order).&#x20;







**Ready-to-use nodes**&#x20;

1. Trigger Nodes: Initiate workflows through specific events, such as receiving an email, form submissions, or scheduled times.&#x20;
2. Action Nodes: Execute tasks like sending emails, creating database records, or updating CRM systems.&#x20;
3. Condition Nodes: Branch workflows based on conditions, enabling "if/else" logic.&#x20;
4. Delay Nodes: Pause workflows for a specified duration before resuming.&#x20;
5. Decision Nodes: Route workflows based on user input or specific data values.&#x20;



**Properties Panel**&#x20;

1. When a node or a link is selected, an additional panel appears, allowing users to define or edit properties.&#x20;
2. The panel supports various field types:&#x20;
   1. Text inputs&#x20;
   2. Drop-down menus&#x20;
   3. Checkboxes&#x20;
   4. Numeric fields&#x20;
   5. WYSIWYG text editor for rich text content&#x20;
3. Properties are defined dynamically using a JSON Schema, enabling real-time updates to the properties panel without requiring code changes.&#x20;



**Relationships and Connections**&#x20;

1. Relationship Lines:&#x20;
   1. One predefined type of relationship line is available.&#x20;
   2. Users cannot customize the color or style of these lines.&#x20;
2. Connecting Nodes:&#x20;
3. Users manually draw connection lines between nodes.&#x20;
   1. Only one connection can exist between any two nodes.&#x20;
   2. A single node can have multiple incoming connections.&#x20;
   3. Connections are not validated for correctness by the system – users are free to create any relationships.&#x20;
4. Deleting Connections:&#x20;
   1. Users can delete connections without validation from the system.&#x20;
5. Labels on Links:&#x20;
   1. Users can define labels for relationship lines and choose to show or hide them.&#x20;
   2. Labels are draggable, allowing precise placement for better clarity.&#x20;



**Internationalization**

1. Architecture ready to support multilanguage





**Auto-save functionality**&#x20;

1. The system automatically saves data before the user exits the application.&#x20;
2. Supports two storage methods: local storage and API-based storage for seamless data persistence.&#x20;



**Read-only mode**&#x20;

1. A dedicated mode for users who are not authorized to make changes.&#x20;
2. All nodes on the canvas are frozen, preventing modifications while still allowing users to view node properties.&#x20;



**Snack bar notifications**&#x20;

1. User-friendly notifications provide real-time feedback on actions and system statuses.&#x20;
2. After major actions (e.g., saving or loading a diagram), a snackbar notification displays the result as either a success or error message.&#x20;



**Zoom in/out**&#x20;

1. Users can adjust the view of their diagram:&#x20;
   1. Zoom in for detailed editing.&#x20;
   2. Zoom out to see the broader structure.&#x20;
2. Zooming can be controlled using a dedicated button.&#x20;



**Undo/redo recent actions**&#x20;

1. Users can undo or redo node-related actions using keyboard shortcuts or a dedicated button.&#x20;
2. Features a customizable action manager to define which actions are included in the undo/redo history.&#x20;



**Keyboard shortcuts**&#x20;

1. Copy&#x20;
2. Paste&#x20;
3. Cut&#x20;
4. Select All&#x20;
5. Undo&#x20;
6. Redo&#x20;
