Connectors and lines

Two kinds of link

Port connectors

• Draw one. Drag from a free port to another object (or one of its free ports); the port it will land on is ringed. A drop anywhere else changes nothing and says why.
• Select and change. Click a connector to select it (Shift adds more). Style then changes its colour, width, solid, dashed or dotted stroke, route, the arrowhead at each end and its flow. With one connector selected, Connector labels holds a start, middle and end label; double-click the connector to edit its middle label on the board. New connectors take the current style. Labels use the bundled font, up to 128 single-line characters each.
• Move an end. Drag an end of the selected connector to another free port. Moving an end is one undo step.
• Delete. Delete removes selected connectors. Deleting an object removes its connectors with it, since a connector cannot have a free end. Delete and reconnect (in the Connectors panel or the command palette) removes one object in the middle of a flow and joins what came in to what went out.
• Quick connect. One selected shape or workflow step shows four arrows round it. Press one, or Ctrl+Arrow, to add the next step already connected. Alt+Arrow moves the selection to the connected object in that direction. From a decision, the step starts at the free output that faces that way.
• Manage. The Connectors panel lists every connector and attached line on the page: all of them, those of the selection, or only lines with a free end (Loose ends). Each row has Select and Remove. Select all connectors (Ctrl+Shift+E), Select connected objects and Connect selected objects are there and in the command palette.
• Line settings. The Connectors panel sets Line jumps (none, arcs or gaps where a line crosses one drawn before it) and Elbow lines go round objects. Both belong to the drawing, apply on every page and can be undone. A drawing saved before version 21 opens with both off, so it looks as it did.

To connect without a pointer, open Connectors › Connect with the keyboard, choose From node/output port and To node/input port, then a label and a Straight, Elbow or Curve route. Moving components keeps their endpoints attached. These are visual workflow diagrams; the app does not execute them.

Attached arrows and line labels

Start or end a line or arrow on a shape, text, image or workflow object and that end attaches to it: the object is outlined while you drag, and the end settles on its outline facing the other end. An attached end follows the object when you move, resize, rotate or flip it, in the same undo step. Drag an end onto another object to attach it there, or onto empty canvas to detach it. Moving or reshaping the line on its own detaches its ends. Hold Ctrl (Cmd) while you draw or drag an end to keep it free.

A selected line shows an attached end filled with a green ring and a free end hollow, so you can see which ends will follow before anything moves. Attached ends in Style says what each end is attached to and offers Detach. Deleting an object leaves the arrows attached to it, their ends where they were; Shift+Delete deletes those arrows too.

Double-click a line or arrow, or choose Edit label, to give it a label. It sits centred on the middle of the line, which breaks around it; it moves with the line and takes the text size, font and alignment settings. Copies keep attachments only between objects copied together.

Bends, routes and arrowheads

• Point by point. With the line or arrow tool, a drag draws a straight line. A click starts a line point by point instead: each click adds a point, and a double-click, Enter or Escape finishes it. Releasing a point on an object attaches the end there and finishes the line. A line can have up to 100 points.
• Bending. A selected line shows a handle on each point and a smaller one halfway along each segment. Drag a point to move it, or a halfway handle to bend that segment with a new point. Double-click a middle point to remove it.
• Routes. Line route in Style sets Straight, Elbow (right angles: the line leaves and enters attached objects away from them and goes round them) or Curved (smoothly through the points). Shift+R changes the route of the selected lines and connectors, and Alt+Shift+R (Reset route) removes the bends you placed. Elbow corners follow the attached objects when they move.
• Arrowheads. None, arrow, triangle, dot, bar, outlined triangle, outlined dot, diamond, outlined diamond and crow's foot. The line stops at the edge of an outlined head, so its inside stays clear.

Flowing lines

Style › Flow makes a line, arrow or connector move: flowing dashes (its own pattern moves) or travelling dots, slow, normal or fast, from start to end or back. Flowing lines move on the board; Pause in the bottom bar stops them, and if your system asks for less motion they start paused. PNG, SVG and PDF show the first moment.

Under Export image, Video for LinkedIn records the flow as a video, MP4 where the browser can and WebM otherwise (LinkedIn accepts both). Choose a length from 3 to 15 seconds. The video is sized within LinkedIn's limits: at most 1920 by 1080, between 2.4:1 wide and 1:2.4 tall, padded with the background if the drawing is narrower or wider. Keep the tab in front while it records; the status says when it is done and how large the file is. Looping GIF makes a GIF that loops forever, for chat and web pages; LinkedIn shows GIFs as still pictures.