Graph Editor
The Graph Editor is the primary workspace in Nongine. It displays your visual novel as a directed graph of nodes and edges on an infinite canvas. This is where you design the high-level structure and flow of your story.
The Canvas
The canvas is an infinite two-dimensional workspace. Navigate it with:
- Pan — Click and drag on an empty area, or hold the middle mouse button.
- Zoom — Scroll the mouse wheel, or use the zoom controls in the bottom corner.
- Minimap — A small overview panel in the bottom-right corner shows a scaled-down view of your entire graph. Click and drag within the minimap to navigate quickly. Toggle it with the M key.
The canvas displays a subtle grid for visual alignment. All nodes are positioned on this canvas and can be freely moved by dragging.
Creating Nodes
There are several ways to add nodes:
- Double-click on an empty area of the canvas to open the node creation menu.
- Drag a node type from the sidebar palette on the left directly onto the canvas.
- Drag from a handle — Pull a connection from an output handle and release on empty space. A menu appears, and the new node is automatically connected.
- Command palette — Press Ctrl+Shift+P to open the command palette and search for node types.
Connecting Nodes
Each node has input handles on its left edge and output handles on its right edge. To create a connection:
- Click on an output handle.
- Drag the line to an input handle on another node.
- Release to finalize the edge.
Valid connections highlight as you hover over compatible handles. If you drag from an output handle and release on empty space, a quick-add menu lets you create a new node that is automatically connected.
To disconnect, select the edge and press Delete, or drag the edge endpoint away from its handle.
Selecting Nodes
- Click a node to select it. Its properties appear in the Inspector panel on the right.
- Shift+Click to add nodes to the selection.
- Drag a rectangle on empty canvas to select all nodes within the area.
- Ctrl+A to select all nodes.
Context Menu
Right-click on a node to open a context menu with actions:
- Delete — Remove the node and its connections.
- Duplicate — Create a copy of the node with the same data.
- Play from here — Launch the runtime preview starting at this node.
- Edit / Open in Write Mode — Switch to the appropriate editing mode for this node type.
When multiple nodes are selected, the context menu includes:
- Duplicate all — Copy all selected nodes with their internal connections preserved.
- Wrap in Comment — Create a Comment node around the selected nodes.
- Extract to Subgraph — Move the selected nodes into a new subgraph and replace them with a Call node.
Subgraphs
Subgraphs let you encapsulate reusable sections of your graph. A Call node invokes a subgraph. Double-click a Call node to drill into the subgraph and edit its contents. A breadcrumb bar at the top of the canvas shows your current location in the subgraph hierarchy, and you can click any level to navigate back.
Inside a subgraph, a SubgraphEntry node marks where execution enters (with parameters), and one or more SubgraphExit nodes mark the exits.
Path Highlighting
The Path Analysis feature highlights which nodes are reachable from a selected node, making it easy to trace story paths through a complex graph. Unreachable nodes appear dimmed.
Auto-Layout
When your graph becomes visually cluttered, use the auto-layout feature (toolbar button or Ctrl+L) to automatically arrange nodes into a clean left-to-right layout following the flow of execution. Branching paths are stacked vertically. Auto-layout preserves all connections and only changes node positions. You can undo it with Ctrl+Z.
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| Delete / Backspace | Delete selected node(s) |
| Ctrl+D | Duplicate selected node |
| Enter | Edit node (opens Write Mode for Sequence nodes) |
| Ctrl+Enter | Play from selected node |
| Home | Jump to Start node |
| End | Jump to End node |
| Tab | Navigate to next connected node (forward) |
| Shift+Tab | Navigate to previous connected node (backward) |
| Space | Toggle runtime preview |
| Ctrl+Z | Undo |
| Ctrl+Shift+Z / Ctrl+Y | Redo |
| Ctrl+L | Auto-layout |
| M | Toggle minimap |
| Ctrl+Shift+P | Command palette |
| Ctrl+1-4 | Switch editor mode |
| ? | Show keyboard shortcuts overlay |