When you drag an element around the canvas, livediagram quietly helps you line it up. As an edge or centre comes within a few pixels of a neighbour's, the element snaps into alignment and a faint guide line appears to show the match, so a tidy layout falls into place without nudging pixels by hand.
What snapping lines up
While you drag, the element snaps to nearby elements':
- Edges: left, right, top, or bottom edges line up flush.
- Centres: horizontal and vertical centres align, so things sit centred on one another.
- Even spacing: when an element sits between or beyond two others it snaps to an equal gap, and a short guide marks the matched spacing. This works across directions too: drop a box under one of two side-by-side boxes and it snaps to the same gap they keep between them.
A guide line only appears once a match is actually in effect, so the canvas stays clean until alignment is doing something. The same guides show when you drag a free arrow endpoint into line with a box's edge or centre, or with the arrow's other end. When the endpoint pins to a shape, its connection dots show instead of guides.
Snapping while you resize and draw
Resizing snaps too. Dragging a resize handle lines the moving edge up with a neighbour's edge or centre, and also matches sizes: drag a box to within a few pixels of a neighbour's width or height and it takes exactly that width or height, so siblings share a size without typing numbers. With Shift held (or the aspect ratio locked), only the leading side snaps and the other follows the ratio.
Drawing a shape to size by dragging on the canvas snaps both corners the same way, with the same guides.
A few things never snap: a multi-selection being resized, and a rotated element being resized.
Dragging freely: hold Cmd or Ctrl
Sometimes you want a deliberately off-grid position and snapping gets in the way. Hold Cmd (⌘) on a Mac, or Ctrl on Windows and Linux, while you drag or resize to switch snapping off for that gesture: no snap, no size matching, no guide lines, and the element follows your pointer exactly. You can press or release the key mid-drag and it takes effect on the next move. Let go and the next drag snaps as usual, so it's a per-drag override, not a mode you have to remember to turn back on.
The modifier works the same for a single element, a multi-selection and a resize handle: anything you move or resize follows the pointer freely while the key is held. On an arrow's endpoint it turns off only the alignment guides; the endpoint still pins to a shape and still locks to 45°. To size an element exactly, type the numbers in Size.
On an event storming board, holding the key is also the one way to put a note between two lanes: without it, a note always lands on the nearest lane.
Hiding the guide lines
The guide lines can be switched off in Settings, under Editor, with Alignment Guides. That hides the lines only: elements still snap as you drag and resize. To place or size one element without snapping, hold Cmd or Ctrl as above. See Alignment Guides.
Reach for ⌘/Ctrl-drag for the last fine adjustment: let snapping line most of a diagram up for you, then hold the key for the one element you want sitting slightly off the grid.
Was this article helpful?