Визуализация древовидной иерархии в HTML

Я смотрю вдохновения для того, чтобы сделать дизайн взаимодействия на hierachy/tree структуре. (продукты со многими промежуточными результатами, правила, которые касаются выбора промежуточных результатов).

Я хочу иметь дерево, где существует видимое соединение между подузлами и их родительским узлом. И я также хочу визуализировать, какие правила, которые касаются выбора их.

Типичные правила:

• обязательный: выберите только один из одного промежуточного результата
• дополнительный: выберите 0 или больше из нескольких промежуточных результатов
• взаимный эксклюзивный: выберите только один из нескольких промежуточных результатов

Я надеюсь, что Вы получаете идею.

Я ищу любое вдохновение в этой области. Любые предложения, примеры, подсказки приветствуются