Adding ports to shapes

Hey, Lately I have been experimenting with diagram-js to create my custom editor.
In my use case, I need ports to my shape ( example below ). These ports are the only locations a shape can be connected to or from. In my example
ports are custom shapes that are attached to the attachers array of the host object.
I don’t really like this solution because it creates lots of additional shapes just to have this functionality. In case you know a better solution for this I would like to hear about it.

Screenshot 2022-03-23 102923