Skip to content

Canvas controls

Pan, zoom, select and tidy a workflow of any size. This page covers moving around the canvas and the floating toolbar on its right edge.

The editor canvas zoomed in on a Scheduler, HTTP Request and Log workflow, with the zoom and Fit to window buttons on the floating toolbar at the right.The editor canvas zoomed in on a Scheduler, HTTP Request and Log workflow, with the zoom and Fit to window buttons on the floating toolbar at the right.

Pan

  • Scroll wheel or two-finger trackpad swipe.
  • Middle mouse button and drag.
  • Hold ⌘ / Ctrl, then click and drag.

Zoom

  • ⌘ / Ctrl + scroll wheel: zoom around the cursor.
  • Trackpad pinch: zoom around the cursor.
  • Keyboard: + or = to zoom in, - to zoom out.
  • Floating toolbar: Zoom in, Zoom out and Fit to window.

The zoom range is 10% to 200%. The keyboard and toolbar buttons zoom in steps and stop at about 50% on the way out. Scroll and pinch go all the way down to 10%.

Fit to window

Click Fit to window in the floating toolbar to bring every node into view. Use it when you've lost a node somewhere on the canvas.

The floating toolbar

A column of buttons on the right edge of the canvas:

Button What it does
Undo / Redo Step back or forward through your edits.
Add note Add a sticky note. See Sticky notes.
Zoom in / Zoom out Zoom one step.
Fit to window Show every node.
Clean workflow Re-arrange the nodes into a tidy left-to-right layout. Flero asks you to confirm. Connections, versions and run history are untouched, and you can undo it.
Close-up of the floating toolbar on the right edge of the canvas: Undo, Redo, Add note, Zoom in, Zoom out, Fit to window and Clean workflow, with the Fit to window tooltip showing.Close-up of the floating toolbar on the right edge of the canvas: Undo, Redo, Add note, Zoom in, Zoom out, Fit to window and Clean workflow, with the Fit to window tooltip showing.

Selecting

  • Click a node to select it.
  • ⌘ / Ctrl + click to add a node to the selection or remove it.
  • Drag on empty canvas to draw a selection box.
  • ⌘A / Ctrl+A selects every node.
  • Esc clears the selection.

Drag any selected node to move the whole selection. Alignment guides appear while you drag, to help you line nodes up.

With two or more nodes selected, a bar at the bottom offers Convert to sub-workflow. See Converting to a sub-workflow.

The canvas background

The canvas has a dot grid. Nodes don't snap to it.

Viewport memory

When you save, Flero stores the zoom and position. Reopening the workflow returns you to that view.

Tips & gotchas

  • Plain scrolling pans, it doesn't zoom. Hold ⌘ / Ctrl to zoom with the scroll wheel.
  • Browser zoom and canvas zoom are separate. Use canvas zoom for editing and browser zoom to make the whole interface larger.
  • There are no right-click menus. Node actions are in the hover toolbar that appears over each node, and workflow actions are in the workflow menu next to the name.
  • Clean workflow is undoable. Press ⌘Z / Ctrl+Z if you prefer your own layout.

Found something out of date? This page lives in the Flero docs content set.