Вам нужен SVG или Canvas. Но самостоятельно реализовать такое будет довольно сложно. Попробуйте посмотреть в сторону каких-то
готовых решений по построению блок-схем.
Что касается проверки: кажется, ваш подход имеет место быть. Я не знаю, какие у вас есть условия для проверки корректности соединений, но в любом случае вам нужна какая-то абстракция, которая будет представлять вашу модель в виде некой структуры данных. Например, так:
// device - это ваш прибор, input# - это разъемы, массивы содержат подсоединенные элементы.
const device = {
input1: [],
input2: [],
...
};
// это объект, в котором есть список разъемов с разрешенными элементами
const allowedConnnections = {
input1: ['element1', 'element2'],
input2: ['element3'],
...
};
Таким образом при добавлении нового элемента в разъем, нужно проверять, разрешен он или нет
// функция должна вызываться каждый раз на добавление нового элемента
function checkInput(inputId, elementId) {
// возвращает true/false если элемент есть в списке разрешенных для разъема
return allowedConnnections[inputId].indexOf(elementId) !== -1;
}
