Skip to content

The Visual Editor

The FlowDrop visual editor is a drag-and-drop interface for building workflows. This guide covers the editor layout and all available interactions.

Opening the Editor

From the workflow listing at Administration > FlowDrop > Workflows, click the dropdown on a workflow and select Open in Editor.

URL pattern: /admin/structure/flowdrop-workflow/{workflow-id}/flowdrop-editor

Editor Layout

The editor has four main areas:

Editor layout with labeled regions

Area Location Purpose
Canvas Center The main workspace where you place and connect nodes
Node Palette Left (click +) Browse and add available nodes by category
Configuration Panel Right sidebar Configure the selected node's parameters
Toolbar Top Save, undo, zoom controls, and other actions

Adding Nodes

  1. Click the + button on the left side of the editor.
  2. Browse nodes by category or type in the search box to filter.
  3. Click a node to add it to the canvas.

Node palette browser

Searching for a node

Node Categories

Nodes are organized into categories for easy browsing:

  • Data Processing — Transform and extract data
  • Control Flow — Branching, loops, and conditional logic
  • Entity Operations — Query, load, and save Drupal entities
  • Text & Output — Text input, formatting, and output
  • HTTP & Integration — Make HTTP requests to external services
  • Human-in-the-Loop — Pause for user input or confirmation
  • Utility — Date/time, calculations, and notes

Selecting and Moving Nodes

  • Select — Click on a node to select it
  • Move — Click and drag a node to reposition it on the canvas
  • Deselect — Click on empty canvas space

Configuring Nodes

Click any node to open its configuration panel on the right side of the editor.

Node configuration panel

Node parameters come in two flavors:

  • Configurable parameters — Appear as form fields in the configuration panel. These are static values set at design time.
  • Connectable parameters — Appear as input ports on the node. These receive dynamic values at runtime through edge connections.

Some parameters are both configurable and connectable — you can set a default value in the configuration panel that gets overridden when data arrives through an edge.

Node Visual Types

Nodes appear in different shapes depending on their function:

Shape Node Type Examples
Rectangle Standard processor TextInput, Logger, HttpRequest
Compact Simple/lightweight Note, Idea
Diamond Gateway (branching) IfElse, SwitchGateway, BooleanGateway

Deleting Nodes and Edges

  • Delete a node — Select the node by clicking on it, then press the Delete or Backspace key.
  • Delete an edge — Click on the edge to select it, then press Delete or Backspace.

Connecting and Disconnecting Nodes

  • Create an edge — Click and drag from an output port (right side of a node) to an input port (left side of another node).
  • Remove an edge — Select the edge and press Delete, or drag the edge endpoint away from the port to disconnect it.

For details on port types, data type colors, and connection rules, see Connecting Nodes.

Canvas Navigation

Action How
Zoom in/out Scroll wheel or pinch gesture
Pan Click and drag on empty canvas space
Fit to view Double-click on empty canvas space

Toolbar Actions

The toolbar at the top of the editor provides these actions:

Button Action
Save Persist all changes to the workflow
Undo Undo the last action
Redo Redo a previously undone action
Fullscreen Toggle fullscreen mode

Saving

Click Save in the toolbar to persist your changes. The workflow definition (nodes, edges, and their configurations) is saved to the Drupal configuration entity.

Warning

Changes are not auto-saved. Always click Save before navigating away from the editor.

Fullscreen Mode

Toggle fullscreen mode for an immersive editing experience without the Drupal admin toolbar.

Fullscreen editor mode

Next Steps