This is why our diagram connections float dynamically instead of breaking
How to design a geometry-driven connection engine that calculates attachment points on the fly and shifts overlapping parallel paths.
01The limitation of hardcoded connection ports
In traditional charting applications, connecting lines are tied to hardcoded ports on a box, such as "port-right" or "port-bottom". While this makes manual wiring simple, it is highly fragile for dynamic or automated layouts. If an AI generates a diagram or a user swaps a template, the nodes are rearranged automatically. If lines remain locked to their original ports, they cross over the boxes, double back on themselves, or clip through other elements. A premium canvas needs edges that calculate their attachment points dynamically based on where the boxes are positioned relative to each other.
02Calculating attachment vectors using box geometry
To make edges float, we treat each node as a bounding box defined by a center coordinate, width, and height. When drawing a line between a source box and a target box, the rendering engine first calculates the delta between their center points. By analyzing the vertical and horizontal differences, the algorithm determines the dominant axis of the path. If the horizontal distance is greater than the vertical distance, the line attaches to the Left or Right borders of the nodes. If the vertical distance is greater, it attaches to the Top or Bottom borders. This ensures that the line always takes the shortest, most natural path between the shapes.
03Uncluttering parallel paths using perpendicular shift offsets
When two components have bidirectional communication (e.g., a Client calling an API, and the API returning a stream), drawing straight lines from center to center makes them overlap, rendering them as a single line. We resolve this by counting how many edges share a connection path between two nodes. We sort the connection IDs lexicographically to establish a stable order. Then, we apply a perpendicular shifting offset (such as adding or subtracting 15 pixels) to the attachment coordinates along the border. This shifts the lines outward, creating clean, parallel visual tracks that denote separate request and response flows.
04Drawing bezier curves and path markers
SVG paths are drawn using cubic Bézier mathematical formulas. A Bézier curve takes a start point, an end point, and two control points that determine how the line bends. By placing the control points outward from the selected borders, the line curves gracefully around the node boundaries rather than cutting diagonally. Finally, arrowheads and indicators are drawn using SVG markers attached to the path endpoints, automatically rotating to match the tangent angle of the curve where it touches the box.