JS/React: Автоматическое построение модели бизнес процессов в виде графа

1. Общее
Язык программирования: Javascript (желательно React)
Представление: или отдельная веб страница отрисовывающая граф, или библиотека, которая умеет рисовать на странице
Поддержка бразуеров: обязательно только Chrome, жалетально работа на планшетах и мобильных устройствах, желательно работа в Firefox и других браузерах
Возможно использование любых сторонних open source библиотек

Данные будут предоставляться через API в JSON формате
На данный момент задача только отобразить граф из готовых данных.
Внесение изменений, ручное создание модели, шаблоны, движение и прочее – уже отдельная задача.
Дизайн есть в фигме (скриншот тут), если нужна верстка, можем предоставить.  

Какой способ отрисовки вы выберете – не важно, но страница не должна тормозить.
Часть отризованных элементов будет кликабельна.

2. Главные элементы в модели
(Location) Локация – реальное месторастоложение девайсов
используется для группировки, имеет заголовок и описание, выделяется цветом
внутри одной локации может быть один или несколько девайсов
(Device) Девайс – оборудование, которые мы используем в процессе: сервера или другие различные устройства 
основной элемент. Имеет имя, серийный номер, приложения и связи. Отображается в виде прямоугольника с данными внутри
(Application) Приложение – софт, который мы используем в процессе. Всегда является частью девайса и отображается внутри него в виде: иконки, названия и иногда небольшой строки данных.
внутри девайса может быть много приложений, все приложения кликабельны. (адреса ссылкок будут в апи)
(Link) Связь – 2 девайса связываются между собой. Точки связи тоже кликабельны для получения детальной информации и имеют небольшой текст рядом с собой
из одной точки могут выходить несколько связей, и в одно точку тоже могут приходить несколько связей 
(Endpoint) Точка выхода из процесса, отображается как приложение и отличается только иконкой
(Legend) Легенда – название и описание бизнес процесса, что это и для чего.
просто текстовое описание из апи над зоной отрисовки графа.

3. Связи 
Связи могут быть только между девайсами. Связь не может быть от девайса к себе же. Связь может быть как между разными локациями, так и внутри одной
Связи могут быть 4 типов
Internet (direct)
Internet (with proxy)
Private Network
Local Network
Первые 3 типа используются для передачи сигнала между разными локациями и отображаются разными иконками
Локальная сеть это передача сигнала только внутри одной локации.
Internet (direct) = связь отображается со знаком интернета внутри и IP адресом, который используется для доставки сигнала
Internet (with proxy) = связь отображается со знаком интернета внутри и названием прокси сервера для передачи
Private Network = связь отображается со знаком локальной сети внутри и IP адресом, который используется для доставки сигнала
Local Network = просто тонкая линия 

4. Отображение
Граф всегда строится по горизонтали: Первый элемент слева, последний справа.
Элементы должны быть правильно расположены на уровнях как по вертикали, так и по горизонтали
Как первых так и последних элементов может быть больше одного.
Тоже самое со связями: из одной точки может выходить больше одной линии (или не выходить вообще ничего)
Желтельно чтобы линии пересекались минимальное число раз (на сложных графах) и вообще не пересекались на простых
Правильное и красивое отображение – основная часть задачи