How to draw relationship arrows between DOM elements?

Question

There are columns with elements.

I need to draw relationship arrows between elements.

Relations can be within the same column, between adjacent or non-adjacent columns. Also, the spaces between items should be added automatically to free space for arrows.

Here is the prototype of what it may look like.

Could you please recommend the direction for investigation?

Are there some libraries for that? Should I use SVG, or canvas (or a library based on canvas)? Maybe a table with thousands of cells and with color borders?

Answer 1

There's currently no simple way to do this. As mentioned in the comments there are libraries that will help you do this, or you can manually produce your own solution.

One way to do this would be to put a canvas element over the top of your entire table and then manually draw the lines onto the canvas.

As you haven't included code, I can't really give any more specific guidance.