Alignment Guides
Show horizontal and vertical guides while dragging, then snap a node to nearby edges or centers when alignment is close enough.
Alignment guides are a drag-time assist for canvas layout. As you move a node, the system checks whether it is close to lining up with nearby nodes and then shows guides or snaps the position when a match is found.
This is not a separate layout tool with its own setup panel. It appears during dragging, so the feedback happens exactly when you are positioning a node.
Drag to trigger alignment
This preview uses the real alignment guide overlay and snapping calculation from the canvas.
What it actually checks
The alignment logic compares the key boundaries of the moving node against nearby nodes:
- left edge to left edge
- horizontal center to horizontal center
- right edge to right edge
- top edge to top edge
- vertical center to vertical center
- bottom edge to bottom edge
That means the feature is not guessing visually. It is matching explicit edge and center positions on both axes.
What happens while dragging
When a match is close enough, you see one or both of these overlays:
- a vertical guide when the node lines up on the X axis
- a horizontal guide when the node lines up on the Y axis
If both axes qualify at the same time, the node can snap into a clean intersection instead of only correcting one direction.
What happens when you release
The feature does more than draw reference lines. Once the dragged node is close enough to a valid match, releasing it snaps the position to the calculated alignment target.
This removes the need for tiny manual corrections when you want cards to share the same edge or center line.
Why it helps on a real canvas
Alignment guides are especially useful when the canvas starts to grow:
- prompt, reference, and result nodes are easier to organize into stable rows or columns
- new nodes can quickly align against existing anchor nodes
- small layout adjustments take less visual comparison and less nudging by hand
How to read this preview
The demo in this article is not a fake illustration. It reuses the real alignment overlay and snapping calculation from the canvas. Drag the middle node toward the two anchor nodes to see when guides appear and how the release position gets corrected automatically.