Как рисовать динамические блок схемы со связями прямо в браузере?

Question

[Eugene Zalivadnyi]

Доброго времени суток.

1. Как реализовать функционал как на рисунке, прямо в браузере?
   
2. Стоит использовать html5 canvas?
   
3. Что нужно изучить, чтобы делать подобное? Какие есть готовые библиотеки для подобного функционала?
   
4. Какие технологии стоит использовать для написания полноценного редактора интегральных схем и ментальных карт?
   

Требуемый функционал:

• Отсутствие сторонних плагинов для браузера, всё на фронтенде.
  
• Для блоков нужен drug n drop. Если перетащить родительский блок под дочерние - соседние блоки должны подвинуться. При этом связи между блоками должны равномерно распределиться и не наползать на другие блоки.
  
• Можно создавать новые блоки и пробрасывать связи между ними.
  
• При клике на блок он разворачивает/сворачивает своих детей.
  
• Состояние схемы должно сохраняться для возможности возврата к редактированию с того же места, на котором остановились.
  

Answer 1

[Александр]

Используйте jointjs.com