Создание блок-схемы

[maksmkv]

Всем привет. Подскажите, может уже и реализовывали отображение данных по типу блок-схема, а именно например:
https://ds04.infourok.ru/uploads/ex/..._m72850b31.jpg

Только, нажимаем первый элемент - под ним отображается другой элемент и т.д. Идея нарисовать саму блок схему, по координатам расставить объекты, а вот как их отображать при нажатии пока не нашел. Может что-то подскажите? Спасибо

[laimas]

А почему нет перехода на "Перейти дорогу" с "Ждать зеленого света", дождались и стоим на месте? )

[maksmkv]

Картинка для примера ))) взял из интернета.

[laimas]

Может такая библиотека и есть не знаю, но данные должны быть связаны, если на примере этого, то типа:

var data = {[
                {begin: {
                            action: "Посмотреть на светофор", type: 'rectangle', side: "center", 
                                child: [
                                    {action: "Свет зеленый?", type: 'rhombus', side: "center",
                                        child: [
                                            {action: "Перейти дорогу", type: 'rectangle', side: "left"},
                                            {action: "Ждать зеленого света", type: 'rectangle', side: "right"}
                                        ]
                                    }
                                ]
                    }
                },
                {end: {action: "Конец", type: 'ellipse', side: "center"}} 
            ]
};

Обходом в цикле можно построить и посредством html/css, где type задает стили блока (например эллипс рисуется добавлением радиуса бордюру, ромб поворотом квадрата, и т.п.). Положение side означает ветвление, причем "left", это "Да", "right", это "Нет", и соответственно добавляются стрелки между родителем и ребенком. Основой могут быть строки из UL-LI, в которых и размещаются элементы.