Flow Overview

STANDARD PREMIUM ULTIMATE

A flow overview visualizes all the important information about a flow in different sections. A flow overview includes the following sections:

• Main section

• Description section

• Flow Diagram section

• Details section

• API section

• Involved nodes section

• How to install section

• Links section

• Related community flows section

Main Section

The main section includes the basic information about the flow for example category, name, and copy flow functionality.

Description Section

The description section visualizes the description of a Flow in an expandable and collapsable expansion panel. If the description content is huge then it is hidden at first and gives a possibility to the user to load more on click.

Flow Diagram

The Flow Diagram section visualizes the flow within an expandable and collapsible panel. This panel includes a 'full screen' button that allows users to enter and exit full-screen mode. The diagram itself supports dragging and zooming in or out.

Visualization Modes

The Flow Diagram is displayed in two different ways, depending on the number of diagrams present in the flow.

• Single Diagram (Without Tabs): When there is only one diagram in the flow, it is visualized without tabs, as shown below.

• Multiple Diagrams (With Tabs): When there are multiple diagrams in the flow, they are visualized with tabs. Each tab header displays the name of the corresponding flow. If the flow has multiple tabs, you can exit full screen mode by pressing the Esc button.

Detailed Explanation

Node Colors and Icons

• Node Colors: Each node is represented with specific colors, matching the flow editor, providing a visual distinction between different types of nodes.

• Icons: Nodes also come with icons, either default or customized ones.

Custom Icons:

• If node icons are customized for Node-RED nodes, the custom icons are retrieved from the Font Awesome library.

Missing Icons:

• If icon information is missing for a node, no icon will be displayed. It is recommended to use fallback icons (e.g., a generic default icon) in future versions to ensure visual consistency.

Details Section

The detail section visualizes tags, last update, and publisher of a flow in an expandable and collapsable expansion panel.

Initial Render and User Interaction

• Initial Render: The initial render of the diagram is fixed to the top-left corner of the container and expands based on the diagram's size.

• Zooming and Dragging:

  • Users can zoom in or out on the diagram by using the mouse scroll

  • The diagram also supports dragging to explore various parts of the flow.

• Subflows: Subflows are currently not displayed in separate tabs within the flow diagram, but this may be subject to change in future updates.

API Section

The API section lists the Open API operations in tabs view with a possibility to expand and collapse the API section.

If an Open API has more than one node then a select dropdown with the list of nodes is displayed. From the nodes dropdown, a user can select a node then the view will refresh and load the API of that particular node.

Involved Nodes Section

The section visualizes the involved nodes of a flow in an expandable and collapsable expansion panel. The nodes are clickable and redirect to the node overview page on click.

How to Install Section

This section list the steps required to install a flow also in an expandable and collapsable expansion panel.

Links Section

The links section visualizes a list of links of a particular flow in an expandable and collapsable expansion panel. Links are clickable and will be opened in a new tab after click.

Related Community Flows Section

This section visualizes the first five related flows which have at least one tag common also in an expandable and collapsable expansion panel. The flow card is clickable and redirects to the flow overview page on click.