← All docs

Docs

Connect objects

How to draw a connection between two objects on the canvas by dragging from a docking point, what a connection represents, and how to select, restyle, redock, and delete it.

A connection is a line you draw between two objects on the canvas — a Miro-style link that shows how one object feeds into another.

When to use

  • You want to wire a prompt into an image so a render reads from it.
  • You want to route a prompt through a router into a target image.
  • You just want a visual link between two objects to show they belong together.

Draw a connection

  1. Select an object (click it). Four small docking points appear just outside its edges — top, bottom, left, and right.
  2. Press on a docking point and drag. A line follows your cursor. Each dock point enlarges and turns blue as you hover it, so it is easy to target.
  3. Drag toward another object. As you get close, that object’s own docking points light up so you can see where the line will land.
  4. Release on a docking point. The line snaps to the nearest dock, the connection is created, and it stays selected so you can restyle it right away.

How it works

  • Docking points sit a short distance outside each edge, so they never overlap the object’s content.
  • Drop the endpoint on a dock to link the two objects. Drop it in empty space and the line ends at a floating point (a plain image-to-image link can float; a prompt widget or router must land on an image).
  • The line is directional — it carries an arrow pointing toward the object being fed, which reads as the flow direction of your pipeline.
  • What the line means depends on what you connect. Drag from a prompt widget onto an image and the prompt feeds that image. Drag out of a router into an image to route a prompt there. Drag between two plain images and you get a simple visual link.
  • INTERSTITIAL checks each connection as you draw it. If a link isn’t allowed — for example, connecting one prompt widget to another, or pointing a prompt at something that isn’t an image — the line is refused and a short message explains why.

Restyle a connection

  1. Click a connection to select it. The Connection toolbar appears at the top of the canvas.
  2. Stroke color — pick from the color swatches.
  3. Width — drag the slider to make the line thinner or thicker.
  4. Opacity — drag the slider to fade the line.
  5. Line style — choose Solid, Dashed, or Dotted.

Select several connections at once and the toolbar shows the count (for example, “3 Connections”) and applies your change to all of them. When the selected connections differ on a setting, that control is marked as mixed so you know the values aren’t the same.

Redock or delete

  • Redock an endpoint — grab either endpoint of a connection and drag it onto a different object’s docking point. Release on the new dock to move that end there.
  • Float an endpoint — drop an end in empty space to detach it from its object.
  • Delete — click the trash icon in the toolbar, or press Delete.
  • Deselect — click the ✕ in the toolbar, or press Esc.

Tips

  • Drag slowly near the target. The target’s docking points only light up once you’re close, and the line snaps to the nearest one.
  • Connections are reversible. Drawing, redocking, or deleting a connection can be undone with Ctrl/Cmd + Z.
  • On phones, connection lines are hidden by default to save memory. Toggle them back on with the Toggle Connection Lines button in the canvas controls (keyboard shortcut C).