The Flowchart View

The Flowchart View allows visually editing a flowchart by setting up nodes, making connections between the nodes to form a tree structure and adding information that will be associated with each node. See also the manual section for flowcharts.

The Flowchart ViewThe Flowchart View

Asides from showing the nodes and the connections between them, there is also a status bar at the bottom which displays the current zoom level, the caption of the last selected node and the index, and the name and value of the last selected output.

Adding and deleting nodes

To add new nodes, right-click in any empty space of the flowchart view and tap the Add option.

Context menu option to add a nodeContext menu option to add a node

To delete a node you can do one of two things:

  • Right-click on the caption of a node or any part which is not an output and choose the Delete option.
  • Press Backspace or Delete after a node has been selected.
Context menu option to delete a nodeContext menu option to delete a node

Editing nodes

Once a node has been created, there are a number of things that can be edited about them, including:

Adding outputs
This can be done by:

  • Right-clicking on the node and choosing the Add option from the context menu.

  • Clicking on the Add link at the bottom left of each node.

  • Clicking the Add link in the Properties Bar when it is showing properties for a node.

Context menu option Node link Properties bar
Deleting outputs
This can be done by:

  • Right-clicking on the output and choosing the Delete option from the context menu.

  • Clicking the corresponding Remove link in the Properties bar when it is showing properties for a node.

Context menu option Properties bar
Editing the tag
This can be done by:

  • Typing in the labelled text box in the node itself.

  • Editing the corresponding property in the Properties bar.

Tag text box Properties bar
Editing an output's name
This can be done by:

  • Double clicking on an output's name.

  • Right-clicking on an output's name and choosing the Edit option.

  • Editing the corresponding property in the Properties bar.

Context menu option Properties bar
Editing an output's value
This can be done by:

  • Double clicking on an output's value.

  • Right-clicking on an output's value and choosing the Edit option.

  • Clicking on the button next to the value.

  • Editing the corresponding property in the Properties bar.

Button next to value Properties bar

A few properties of nodes can only be edited from the Properties Bar, such as Start node and Caption.

Sorting outputs in a node

After an output is added to a node it is possible to change its position by clicking and dragging it to be on top or below another output in the same node.

Connecting nodes

To connect two nodes click an output icon and then drag to the input of another node. This can be done the other way around too, clicking and dragging from an input icon into an output icon.

Input Icon Output Icon

Unlinking nodes

To remove the connection between two nodes, right click on the corresponding output or input and choose the Unlink option from the context menu.

Unlink from Output Icon

Connecting many outputs to the same input

In the case of connecting multiple outputs to the same input, each of the parent nodes will start showing a Parent Index property, both in the node and the Properties bar.

The Parent Index can be used with some actions and expressions that need to choose which parent to use in the case a node has more than one.

Parent Index in node Properties Bar

Moving and resizing nodes

Nodes can be moved by clicking and dragging from the caption and can be resized by clicking and dragging from the borders.

The columns in each node can also be resized by clicking and dragging between them.

Move drag Resize drag Column resize drag

Multi-selection

By holding Shift while selecting nodes and outputs it is possible to select multiple elements at the same time.

Doing this it is possible to delete multiple nodes and outputs at the same time as well as moving multiple nodes at the same time.

Rectangle selection tool

Clicking and dragging in empty space will trigger the appearance of a selection rectangle. Any nodes overlapping the rectangle when the pointer is released will be selected. If Shift is held down the nodes will be added to any existing selection.

Cut, copy and paste

Cut, copy and paste of nodes is supported through context menu options and the common keyboard shortcuts. Cutting or copying when there is an active multi-selection will perform the appropriate action on the whole selection.

Once there is flowchart content on the clipboard it is also possible to paste it in a different flowchart to the original.

Scrolling and Zooming

There are a few ways to scroll in the Flowchart View:

  • Use the vertical and horizontal scrollbars at the edges of the view.
  • Scroll the mouse wheel to scroll vertically. You can also hold Shift to scroll horizontally.
  • Hold the middle mouse button and drag the mouse.
  • Hold Space and move the mouse.

On desktop systems, middle-mouse dragging is probably the most convenient way to move around the flowchart.

To zoom hold Control (Meta on Mac) and scroll the mouse wheel.

Make sure to check the Keyboard shortcuts section of the manual for a complete list.

Construct 3 Manual 2024-04-18