How to draw dynamic block diagrams with links directly in the browser?

Question

JavaScript

Good day.

1. How to implement the functionality as in the picture, right in the browser?
   
2. Should I use html5 canvas?
   
3. What do you need to learn to do this? What are the ready-made libraries for such functionality?
   
4. What technologies should be used to write a full-fledged editor of integrated circuits and mind maps?
   

Required functionality:

• No third-party browser plugins, everything is on the frontend.
  
• Blocks require drug n drop. If you drag the parent block under the child blocks, the neighboring blocks should move. At the same time, the links between the blocks should be evenly distributed and not creep onto other blocks.
  
• You can create new blocks and forward links between them.
  
• When a block is clicked, it expands/collapses its children.
  
• The state of the scheme must be saved so that you can return to editing from the same place where you left off.
  

Answer 1

Use jointjs.com