Controls

NodeFlow includes several controls and shortcuts to help you efficiently navigate, organize, and edit your graph.


Graph Navigation

Panning

You can move around the graph editor by using either of the following controls:

  • Hold the Middle Mouse Button and move the mouse.

  • Hold Alt + Left Mouse Button and drag.


Zooming

Use the Mouse Scroll Wheel to zoom in and out of the graph.

As you zoom or move around, the minimap updates automatically to reflect your current view position.


Node Selection

Single Selection

Left-click a node to select it.


Multi Selection

You can select multiple nodes in two different ways:

  • Hold down the Left Mouse Button and drag a selection box around the nodes.

  • Hold Ctrl while clicking nodes to add or remove them from the current selection.


Select All

Press:

Ctrl + A

to select all nodes currently inside the graph.


Moving Nodes

To move a node:

  • Hold down the Left Mouse Button on the node and drag it.

If multiple nodes are selected, all selected nodes move together.


Snapping Guidelines

While moving nodes, horizontal and vertical snapping guidelines will appear automatically.

These guidelines help align nodes neatly and make organizing the graph easier.


Reparenting Nodes

Nodes without a parent can be dragged onto another node to make them a child of that node.

When hovering over a valid target, a blue highlight appears at the bottom of the node. Release the mouse button to create the parent-child connection.


Rearranging Nodes

To rearrange the execution order of a node or child node:

  1. Right-click the node.

  2. Select one of the rearrange options from the context menu.

Each node displays its execution order directly in the header. Main nodes use numbers such as 1 and 2, while child nodes use hierarchical numbering such as 1.1 and 1.2.


Tagging Dialogue Nodes

(Dialogue Graph only)

Dialogue nodes can be tagged to create jump points for story flow navigation.

To tag a node:

  1. Right-click the node.

  2. Select Tag from the context menu.

  3. A popup window will appear where you can enter the tag name.

Once a node has been tagged, other dialogue nodes can use the Jump story flow type to jump directly to that tagged node.

Tagged nodes can also be quickly navigated to by clicking Jump labels inside the graph.


Node Controls

Each node contains quick action buttons for common actions.

Add Subtask

(Quest Graph only)

The Add Subtask button creates a new Subtask connected to the selected node.

This makes it easier to quickly expand quest flow and create connected objectives directly from an existing Task node.

Add Subnodes

(Dialogue Graph only)

The Dialogue Graph contains additional buttons for creating connected subnodes.

Add Subtext

Creates a new Text Node connected to the selected node.

Add Subchoice

Creates a new Choice Node connected to the selected node.

Add Subrandom

Creates a new Random Node connected to the selected node.

Delete Node

The Delete button removes the node from the graph.

You can also delete selected nodes by pressing:

Delete

on your keyboard.


Delete Sticky Note

Sticky Notes contain a Delete button located in the top-right corner of the note.

Clicking this button will permanently remove the Sticky Note from the graph.


Context Menu

Right-clicking a node opens the context menu.

Detach From Parent

Detach From Parent

This removes the selected node and all of its child nodes from the current parent connection.

Automatic Layout

Under:

Layout

you can automatically arrange nodes in different directions:

  • Top Down

  • Left

  • Right

If multiple nodes are selected, the layout operation applies to all selected nodes automatically.

Refresh Graph

Right-clicking either a node or empty space in the graph provides the option:

Refresh Graph

If changes were made to the Quest or Dialogue outside of the graph editor while the graph is still open, refreshing updates the editor and displays the latest changes.


Minimap Controls

The minimap is located in the bottom-left corner of the graph editor.

You can quickly move around the graph by clicking inside the minimap.

The graph view will automatically reposition to the clicked location.

Last updated