В статье – не теория, а готовый рабочий пайплайн: от «запустил и увидел» до сборки кастомной ES5-версии библиотеки из исходников.
Результат – в тонком клиенте 1С появляется возможность использовать bpmn-js, как будто вы используете https://bpmn.io/. Всё интерактивно, а главное можно выгружать диаграммы из 1С в онлайн сервис и наоборот.
Два режима работы с материалом
- Практический – для быстрого прототипирования. Готовая обработка, которая работает «из коробки».
- Инженерный – для тех, кто собирается сопровождать библиотеку, применять патчи или влиять на сборку.
Архитектура решения
Ключевые компоненты
- bpmn-js – открытая JavaScript-библиотека для визуализации и редактирования BPMN-диаграмм. Исходный код библиотеки доступен для скачивания: https://bpmn.io/toolkit/bpmn-js/download/
- Платформа 1С:Предприятие 8.3 (8.3.27.1719).
- ДиаграмммыBPMN – обработка 1С, обеспечивающая загрузку, отображение и сохранение диаграмм, а также двустороннее взаимодействие с bpmn-js через JavaScript.
Схема взаимодействия
- Пользователь работает с BPMN-диаграммой в интерфейсе обработки 1С.
- Все изменения фиксируются в памяти редактора bpmn-js.
- По команде пользователя или автоматически состояние диаграммы сериализуется в XML/SVG/HTML.
- Данные передаются в 1С для дальнейшей обработки или хранения.
- Возможна обратная загрузка диаграмм из 1С в редактор.
Часть 1. Быстрый старт: пощупать BPMN в 1С
Всё, что нужно – скачать обработку из репозитория (https://github.com/adlero4ek/1C-Bpmn-js/blob/main/ДиаграмммыBPMN.epf). Она самодостаточна: не требует внешних зависимостей, работает в тонком клиенте.
Для примера добавлены следующие кнопки, демонстрирующие взаимодействие 1С с JavaScript:
- Создать задачу – создает новый элемент типа Task с уникальным идентификатором на диаграмме BPMN.
- Загрузить из XML – загрузка диаграммы из XML-файла.
- Сохранить в HTML – сохраняет диаграмму в HTML файл.
- Сохранить в SVG – сохраняет диаграмму в SVG файл
- Сохранить в XML – сохраняет диаграмму в XML файл.
Взаимодействие строится через вызов методов JavaScript-объекта, созданного на основе demo.html. Поддерживается автоматическое сохранение состояния при каждом изменении диаграммы.
Часть 2. Сборка bpmn-js под WebKit (ES5) для 1С
Почему это нужно?
Оригинальный bpmn-js рассчитан на современные браузеры (ES6+). WebKit в 1С:Предприятие 8.3 (актуальная версия 8.3.27.1719) требует ES5-совместимого кода.
Последовательность шагов, чтобы подключить библиотеку в решения 1С на платформе 1С:Предприятие 8.3 (8.3.27.1719).
- Скачать и установить https://nodejs.org/en/download. На момент написания статьи актуальная версия v24.14.1. После установки обязательно перезагрузить компьютера.
- Установить интегрированную среду разработки (IDE), например, у меня «IntelliJ IDEA», но для задачи подойдет «Visual Studio Code» или «Cursor».
- Создать новый каталог «Z:\Bpmn-JS» и откройте каталог в IDE
- Откройте в IDE новый терминал. В IntelliJ IDEA это комбинация клавиш Alt + F12
-
Введите команду: npm install bpmn-js, которая выполняет следующее действия:
-
NPM (Node Package Manager) находит библиотеку bpmn-js в своем онлайн-реестре.
-
Сама библиотека и все необходимые для её работы зависимости загружаются в ваш проект.
-
Все файлы помещаются в папку node_modules, а информация о пакете добавляется в файлы package.json и package-lock.json
-
- Текущая реализация bpmn-js ориентирована на современные браузеры и необходимо пересобрать библиотеку под WebKit платформы 1С:Предприятие 8.3 (8.3.27.1719). Для этого необходимо в каталог «Z:\Bpmn-JS» скопировать из репозитория (https://github.com/adlero4ek/1C-Bpmn-js/tree/main/Скрипты сборки) все файлы, сохранив структуру каталогов
- Введите команду: npm install, которая:
- NPM (Node Package Manager) прочитает файл package.json в текущей папке
- Установит все зависимости из раздела "dependencies" и "devDependencies"
- Введите команду: npm run build:bpmn-es5 пересоберет bpmn-js под WebKit (ES5) платформы 1С:Предприятие 8.3 (8.3.27.1719) . В процессе сборки будет создан каталог «Z:\Bpmn-JS\bpmn\*» c файлами, которые обеспечивают функционирование движка bpmn-js
- В случае успешного выполнения можно проверить, открыв в браузере файл demo.html. Файл demo.html:
- Это демонстрационная веб-страница для BPMN-редактора, построенного на библиотеке bpmn-js. Предоставляет интерактивный редактор диаграмм бизнес-процессов (BPMN) прямо в браузере, позволяя отображать и редактировать BPMN-диаграммы.
- В файл добавлен код на JavaScript, который будет использоваться при организации взаимодействия библиотеки bpmn-js и 1С. Методы файла позволяют, используя JavaScript:
- Автоматически сохранять текущее состояние (XML и SVG) при каждом изменении.
- Программно добавлять задачи, используя createTask().
- Получать актуальные данные диаграммы, getBpmnState().
- Функции createTask, getBpmnState можно вызывать как из 1С, так и напрямую из консоли браузера.
- В обработке, есть два макета:
- bpmn_zip – собранная библиотека. Это zip архив каталога «Z:\Bpmn-JS\bpmn\dist» загруженный как двоичные данные.
- bpmn_txt – код файла demo.html, загруженный как текстовый документ.
- Инициализация библиотеки выполняется в методах ПриСозданииНаСервере, ПриОткрытии. Код обработки подробно прокомментирован, что позволит разобраться очень быстро в текущей реализации.
Готовая сборка с выполненными шагами: https://github.com/adlero4ek/1C-Bpmn-js/tree/main/Готовая сборка
Итог
Вы получаете:
- Нативный BPMN 2.0-редактор внутри 1С
- Полный цикл экспорта/импорта XML, SVG, HTML
- Управляемую ES5-сборку под WebKit
- Возможность кастомизировать поведение через JavaScript
Дальше – только архитектура вашего процесса!
В заключении хотелось бы отметить, что текущая статья открывает огромные возможности для реализации полноценного модуля моделирования в нотации BMMN, но вы столкнётесь с большим количеством архитектурных задач, которые, к счастью, в большинстве своем имеют возможности реализации типовыми средствами платформы.
Для написания кода на JavaScript я использовал GigaCode (AI-ассистент разработчика, продукт компании «СберТех»), но можно использовать Cursor, но GigaCode бесплатный.
Ссылка репозиторий: https://github.com/adlero4ek/1C-Bpmn-js
Вступайте в нашу телеграмм-группу Инфостарт