Как сделать схему-граф на сайте?

Question

[HitGirl]

Здравствуйте!
Я новичок в вебе. Подскажите, пожалуйста, насколько сложно реализовать описанный ниже функционал, какие технологии необходимо использовать и как вообще это лучше сделать? Что читать, смотреть по данной теме?
Функционал:
Есть секция сайта в которой находятся картинки (квадраты), в секции также могут находится другие html-элементы. Квадраты также могут содержать подписи и другие связанные с ними элементы. Если нажать на квадрат, то справа от него отрисовываются от 0 до 10 новых квадратов. Они соединяются с предыдущим квадратом линиями. На новые квадраты также можно нажать и добавить следующий набор квадратов. Секция автоматически расширяется по вертикали, по горизонтали её можно прокручивать влево и вправо при необходимости. Контент квадратов и количество новых квадратов просчитывается на сервере.

Answer 1

[Владимир Коротенко]

Зайдите в галерею там есть готовые варианты
https://d3js.org/

Answer 2

[Александр Черемхин]

Редактор блок схем
https://demo.bpmn.io/

Answer 3

[Antonio Solo]

это рисуется в HTML canvas

можете поискать какие-нибудь библиотеки, но у вас все довольно примитивно , я бы рисовал без них.

Comments

[HitGirl]

Достаточно ли мощности у canvas для этого? Здесь я имел всё-таки интерактивную схему, а не просто примитивный рисунок. На схеме могут быть доп. элементы ( не только квадраты), при наведении на квадрат могут появляться подсказки и т.д.

[Antonio Solo]

HitGirl, а какие у вас альтернативы ?

[HitGirl]

SVG может быть. В этом и суть вопроса - как это сделать.

[Antonio Solo]

HitGirl, svg это картинка, хоть и векторная.

Answer 4

[Михаил]

https://js.cytoscape.org/
Как раз предназначена для рисования графов. Можно и внешний вид узлов менять (круги, квадраты, что-то более сложное и т.д.), связи рисуются, нажатия обрабатывать и мн. другое.

Можно и самому на Canvas рисовать. Простое рисование не сложно, но много придётся заморачиваться с масштабированием, прокруткой и пр. Если потренироваться - то можно, а если интересен быстрый результат - то лучше библиотеку использовать.