Technical Documentation
Connector/Anchor UX Benchmark — Miro, Visio, Lucidchart, draw.io, FigJam
Connector/Anchor UX Benchmark — Miro, Visio, Lucidchart, draw.io, FigJam
Scope: how each tool surfaces connection anchors, routes lines, and handles drag-to-empty-space and reroute-on-move, for grounding Falcon Flowmira's connector UX decisions.
1. Miro
| Dimension | Behavior |
|---|---|
| Anchor visibility | Hover-triggered: blue dots appear around a shape only on hover/select; not always-on. |
| Anchors per shape | 4 side-midpoint anchors (N/E/S/W); no corner anchors; connector tool (hotkey L). |
| Drag-to-empty-space | Draws a standalone dangling line — no shape auto-created. |
| Routing | Straight / orthogonal (elbow) / curved — user picks, no obstacle avoidance. |
| Reroute on move | Lines stay glued and re-route automatically. |
| Shortcuts | L line tool, Shift = 45° constrain, Cmd/Ctrl = disable snap. |
Source: https://help.miro.com/hc/en-us/articles/360017730733-Connection-lines
2. Microsoft Visio
| Dimension | Behavior |
|---|---|
| Anchor visibility | Blue AutoConnect arrows on hover; green X points when connector tool active or shape selected. |
| Anchors per shape | 4 side points by default, extensible per stencil via ShapeSheet. |
| Drag-to-empty-space | Auto-drops a shape (last-used / same stencil) and connects it. |
| Routing | Orthogonal dynamic + straight + curved; reflows around intervening shapes. |
| Reroute on move | Dynamic connectors recompute route and endpoint side on move. |
| Shortcuts | No single-key hotkey; ribbon / Ctrl+3 (classic) for connector tool. |
Sources: https://support.microsoft.com/en-us/office/add-connectors-between-visio-shapes-eaa045c8-5ce9-4d4b-bd30-bb87dc8ac65a · https://learn.microsoft.com/en-us/office/client-developer/visio/connection-points-row-connection-points-section
3. Lucidchart
| Dimension | Behavior |
|---|---|
| Anchor visibility | Blue anchors (plain connect) + red quick-add anchors, hover-triggered. |
| Anchors per shape | 4 side blue nodes + red side/corner quick-add nodes. |
| Drag-to-empty-space | Opens auto-prompt shape picker; quick-add branches a same-type shape. Configurable. |
| Routing | Straight / angled / curved. |
| Reroute on move | Glued, auto re-route; togglable. |
| Shortcuts | Shift for 45° constrain; primary flow is hover+drag. |
Source: https://help.lucid.co/hc/en-us/articles/16157138194836-Add-and-style-lines-in-Lucidchart
4. draw.io (diagrams.net)
| Dimension | Behavior |
|---|---|
| Anchor visibility | Green directional arrows + X fixed connection points on hover; blue perimeter halo. |
| Anchors per shape | Fixed X points AND floating anywhere-on-perimeter connect. |
| Drag-to-empty-space | Directional arrows drop a copy of source shape and auto-connect; free connectors leave dangling end. |
| Routing | Straight / orthogonal / curved / entity-relation with obstacle-aware line jumps. |
| Reroute on move | Floating recomputes attachment; fixed keeps point, segment reroutes. |
| Shortcuts | No dedicated hotkey; double-click edge for waypoints. |
Sources: https://www.drawio.com/docs/manual/connectors/connector-fixed-vs-floating/ · https://www.drawio.com/docs/manual/styles/connector-styles/
5. FigJam
| Dimension | Behavior |
|---|---|
| Anchor visibility | Implicit — lines snap onto shapes; no persistent dots. |
| Anchors per shape | Floating/perimeter-snap. |
| Drag-to-empty-space | Leaves unattached endpoint. |
| Routing | Straight / curved / bent (orthogonal). |
| Reroute on move | Glued, auto-updates on move. |
| Shortcuts | Shift+C connector tool, then click source → target. |
Sources: https://help.figma.com/hc/en-us/articles/1500004414542-Create-diagrams-and-flows-with-connectors-in-FigJam · https://developers.figma.com/docs/plugins/api/properties/figma-createconnector/
Falcon Flowmira: Gap → Fix Table
| # | Gap | Fix |
|---|---|---|
| 1 | Always-on anchors add clutter | ✅ Already hover-gated in FlowNode (opacity 0 → 100 on hover; selected boosts corners). |
| 2 | Only fixed side/corner anchors — no floating perimeter connect | Add floating-connect mode with nearest-point-on-perimeter hit-test. Ship as an "Any-point connect" toggle. |
| 3 | Dragging to empty canvas silently succeeds with a plain node | ✅ Shipped — onConnectEnd now creates a node + auto-connects at the drop point. Next: replace with a shape-picker mini toolbar (rect / diamond / circle / same-as-source) matching Lucid/Visio. |
| 4 | Orthogonal edges don't avoid obstacles | Add A*/manhattan router with node-bbox avoidance; fallback to smoothstep when routing fails. Store per-edge routing: 'auto' | 'manual'. |
| 5 | Reroute-on-move verified via React Flow — endpoints already reference nodeId/handleId, so paths auto-recompute. | No action; regression-test with Playwright. |
| 6 | No keyboard connect flow | Add Shift+C to arm connector tool → click source → click target; Esc cancels. |
| 7 | No "quick-add branch" affordance | Add outer-ring + buttons on hover that spawn a duplicate shape offset in that direction with an auto-drawn edge. |
| 8 | No user setting to disable auto-create | Add document-level toggle: "Auto-create shape on drag to empty canvas: On/Off". |