Делаем крутой редактор алгоритмов

Привет!

Продолжаю делиться реальными кейсами из моей работы. Напомню, что в целях сохранения тайн моей компании, я показываю кейсы в оболочке вымышленных предприятий. Сегодня продолжаем говорить о том, какие ноу-хау использует НИИ "Предельные энергии" - главном плацдарме изучения тёмной материи в романе "Чёрная дыра как нечто прекрасное".

Что нужно сделать? Суть в следующем: существует некое приложение, интерфейс которого разрабатывает команда разработки. В этом приложении пользователь будет видеть блок-схему некоего алгоритма, и сможет настраивать для каждого блока этого алгоритма настройки параметров. То есть в итоговом приложении пользователь будет видеть SVG-представление блок-схемы и наборы переключателей и текстовых полей для каждого блока алгоритма в отдельности и для всего алгоритма в целом. Стояла задача - создать инструмент, который будет служить единым окном правды для бизнес- и системных аналитиков, членов команды разработки, тестировщиков. Кроме того, решение должно позволить ускорить работу фронтенд разработчиков с помощью автоматической генерации программного кода.

Что должно быть на выходе? JSON блок-схемы алгоритма - он будет визуализирован в приложении. Код для настроек параметров алгоритма для всей блок-схемы и для отдельных её узлов.

Каково решение? Реальное боевое решение я делала с помощью корпоративного ИИ GLM-5, но вам покажу альтернативную версию для НИИ "Предельные энергии", сделанную с помощью Qwen. Итак, раз у нас могут быть разные компоненты системы, и в каждом - не известное заранее число алгоритмов, а в каждом алгоритме - не известное число блоков, то напрашивается использовать дерево. Дерево будет размещено слева и будет редактируемым.

В центральной части будут две вкладки - с таблицей параметров алгоритма (та самая "правда" от БА, записанная СА), а также блок-схема алгоритма. Да, мы сразу же визуализируем алгоритм (это правда от БА, на которую будут ориентироваться и разработчики, и тестировщики).

А справа мы сделаем панель, в которой будем управлять отдельными блоками алгоритма. Здесь мы регулируем подпись блока в блок-схеме, указываем в какой блок идёт от него стрелка, и какие параметры алгоритма в этом блоке будут настраиваться с помощью каких элементов управления. Тут же будет превью набора элементов управления и генератор HTML (в боевом решении был React). Блок-схему алгоритма в целом, параметры и их настройки - всё это можно экспортировать в JSON. В примере, ссылку на который я дам ниже, экспорт JSON содержит сразу всё. В реальном же решении доступен экспорт от каждого блока дерева в отдельности.

Что в итоге? В итоге получилось одностраничное веб-приложение, которое позволяет не только описывать блок-схему алгоритма, но и генерировать программный код для команды разработки. Так, любые изменения в блок-схеме быстро найдут своё отражение в GUI и не потребует ручного копирования названий параметров алгоритма из confluecne. В реальном боевом решении JSON можно сохранять, открывать, а само приложение является по сути просмотрщиком JSON и его редактором. В примере JSON находится уже внутри веб-страницы. https://github.com/RZKsenia/Sozvezdiye/blob/main/MVP_Редакто

Делаем крутой редактор алгоритмов | Сетка — социальная сеть от hh.ru