Nodes with adjacent labels and edges connecting both labels and nodes

[AngeloChecked]

Hi cytoscapers!

i'm looking for a way to reproduce a graph like this:

Each node can be linked to a square label, and edges may connect directly to nodes or to these square labels.

I've been considering the notion of treating these square labels as regular nodes, but I'm unsure how to link them to their respective nodes. Is there a method to position them close to each other?

Do you have any suggestions, advice, or directions on how to achieve this?

Considering that I need to insert text inside boxes, I can accomplish this using either plain Cytoscape or D3.js.

[AngeloChecked]

I've been considering solving this limit me using custom arrows, but I haven't found a method to utilize a custom SVG/html as an arrow. Do you have any tips, or do you know if this approach is feasible? Are there more advanced options than the default target-arrow-shape? Any advice or suggestions?