f-flow icon indicating copy to clipboard operation
f-flow copied to clipboard

[Feature]: user-defined path of connections

Open stan1025 opened this issue 3 months ago • 1 comments

Describe the Feature

Is it planned to have a kind of custom connection type that the path of the connection can be defined by the user by multipe draggable handles on each polygon point of a line?

What problem does it solve?

For diagrams in the industrial context like P&ID diagrams, circuit diagrams or process flow diagrams it would be helpful to position the connection paths manually / programmatically.

Have you considered any alternatives?

No response

stan1025 avatar Nov 07 '25 19:11 stan1025

Thanks for the suggestion! We do have plans to support customizable connection paths (with draggable control points), but this won’t be included in the very next release. The approximate timeline for this feature is around four months. Once we have a more concrete estimate, I’ll update this issue.

Also, if this feature is important for your workflow, please describe how you imagine the UX?

Your input will help us make the final implementation more user-friendly 🙌

And if you like the library, please consider giving it a ⭐️ — it really helps support the project! :)

siarheihuzarevich avatar Nov 11 '25 10:11 siarheihuzarevich

Good news: we’ve added this capability in v18.0.0 🎉

You can now route connections around nodes using Connection Waypoints:

  • Add <f-connection-waypoints> inside your <f-connection>
  • Drag a candidate point on the connection to create a new waypoint
  • Drag an existing waypoint to move it and reshape the path
  • Right-click a waypoint to remove it

✅ Example: https://flow.foblex.com/examples/connection-waypoints
✅ Release: https://github.com/Foblex/f-flow/releases/tag/v18.0.0

If you try it out — let me know how it goes!
And if you like what we’re building, please consider starring the repo — it really helps ⭐️

siarheihuzarevich avatar Jan 26 '26 19:01 siarheihuzarevich