Drawflow: редактор блоков и связей для сценариев в своём продукте

Заказчик хочет собирать цепочку мышкой

Обычная просьба к админке: менеджер сам собирает цепочку бота, правило обработки заявки или рассылку по шагам. «Если клиент молчит сутки, напомнить, через трое суток позвать человека». Таблица с галочками выдерживает три ветки, на пятой в ней теряются. Нужна схема из блоков и линий.

Готовые системы вроде n8n или SmythOS Studio приносят свой интерфейс, свои учётные записи и свой сервер. Когда схема нужна внутри вашего продукта, под вашим входом и в вашем дизайне, нужна библиотека редактора. Где хватает готового конструктора, а где нужна разработка, я писал в отдельной статье.

Что это за проект и что я проверил

Проверял 19.10.2026 по GitHub API, файлам репозитория и npm. Репозиторий jerosoler/Drawflow описан как «Simple flow library». Он лежит на личном аккаунте Jero Soler. Создан 21 апреля 2020 года, не архивирован, около 6,1 тысячи звёзд и 888 форков. В файле LICENSE текст MIT с копирайтом 2020 года.

В истории 231 коммит, 205 из них сделал сам автор, всего участников 13 по списку GitHub. Релизов 60, последний 0.0.60 и последний коммит в master датированы 3 сентября 2024 года, версии 1.0 нет. На 19.10.2026 открыто 247 обращений и 26 запросов на слияние. Признаки жизни есть: в сентябре 2026 пользователи открывали обращения, а автор 8 сентября отвечал в одном из них. По данным npm, за неделю 12-18 октября пакет скачали около 10,5 тысячи раз.

Что умеет редактор

По README: узлы с несколькими входами и выходами, несколько связей на выход, добавление и удаление входов на лету, изломы линий, зум, модули (отдельные схемы внутри одного редактора), режимы «правка», «зафиксировано» и «только просмотр», события, экспорт и импорт данных. Для сценариев важнее другое: внутрь узла кладётся обычный HTML. Атрибут df-имя на поле ввода, списке или текстовой области связывает поле с данными узла. Узел «Отправить сообщение» получается маленькой формой с текстом и списком.

Файл dist/drawflow.min.js весит 46 190 байт, CSS 1 910 байт. README заявляет «no dependencies», в package.json версии 0.0.60 нет ничего, кроме инструментов сборки. Для Vue заявлены компоненты в узлах. Обёртки для React в README нет, типы для TypeScript идут отдельным пакетом. На телефонах в README указаны долгое нажатие и щипок для зума, в коде есть обработчики касаний. Работу на телефоне сам не проверял.

Схема в JSON, исполнение на вашем сервере

Метод export() отдаёт JSON: для каждого узла идентификатор, имя, данные, HTML, список входов и выходов со связями, координаты. Метод import() принимает его обратно. Выполнения в библиотеке нет: в исходнике я не нашёл ни обхода графа, ни проверки циклов. Сервер читает JSON и идёт по связям от стартового узла.

Условный пример. Узел «Новая заявка» ведёт в узел «Сумма выше порога» с двумя выходами. Первый выход идёт на «Позвать менеджера», второй на «Ответить шаблоном». Сервер берёт тип узла и его поля и вызывает свой код для этого типа. Дальше мои рекомендации, в библиотеке их нет.

Проверка перед сохранением: один стартовый узел, нет висящих выходов, обязательные поля заполнены, циклов нет, а если цикл нужен, у него явный лимит повторов.

Версии: каждое сохранение создаёт новую версию схемы, запущенные цепочки доходят по той версии, с которой стартовали. Отдельный номер формата нужен для миграции, когда у узла меняются поля.

Безопасность: import() вставляет поле html в страницу через innerHTML (видно в src/drawflow.js). Присланный JSON с произвольным HTML открывает путь для XSS. Храните на сервере только тип и параметры узла, а HTML собирайте из своих шаблонов.

Drawflow, React Flow, Rete.js, LiteGraph

Только по README и карточкам репозиториев на 19.10.2026, эти проекты я тоже не запускал. Все четыре под MIT.

React Flow (репозиторий xyflow/xyflow) строится для React и Svelte, около 38,7 тысячи звёзд, изменения в октябре 2026. README просит организации, которые зарабатывают на библиотеке, поддерживать проект через платную подписку Pro или спонсорство, лицензия остаётся MIT. Для админки на React это первый кандидат.

Rete.js описан как фреймворк для визуального программирования. README обещает отрисовку для нескольких фреймворков и обработку графов по схемам dataflow и control flow. Около 12,3 тысячи звёзд, последний релиз v2.0.6 от 30 июня 2025.

LiteGraph (jagenjo/litegraph.js) рисует на canvas, графы можно исполнять в NodeJS, около 8,2 тысячи звёзд. Последнее обновление там 1 августа 2024, релиз от марта 2024, возраст как у Drawflow.

Drawflow проще и не привязан к фреймворку: узел в нём это обычный HTML.

Что важно учесть

Один человек. Из 231 коммита 205 принадлежат автору. Если он уйдёт, форк придётся поддерживать вам, MIT это разрешает. Автотестов нет: скрипт test в package.json выводит «no test specified».

README и примеры на английском, русской документации я не нашёл.

Доступность. В исходнике нет атрибутов aria. Из клавиатурных действий в коде обработано только удаление клавишей Delete, связи программно создаёт метод addConnection. Для скринридера и работы без мыши редактор в таком виде не подойдёт, нужен запасной список шагов в форме. Проверку по WCAG я не делал.

В перечне возможностей README нет выделения нескольких узлов, мини-карты и отмены действий.

Что можно сделать уже сейчас

Выпишите типы узлов продукта: триггер, условие, действие, пауза, конец, и поля с выходами каждого. Такую схему удобно сначала нарисовать в draw.io.

Соберите прототип на одной странице: подключите файл, зарегистрируйте три узла, сохраните результат export() в базу и откройте его через import().

Напишите на сервере проверку схемы и пробный прогон на тестовых данных.

Если конструктор нужен в вашей админке, а писать его некому, я делаю такое в рамках автоматизации бизнес-процессов: редактор, хранение версий, проверки и исполнение.

Частые вопросы

Можно ли использовать Drawflow в коммерческом продукте?

Лицензия MIT это допускает при сохранении текста лицензии и копирайта. Юридическую проверку для вашего случая я не делал.

Подойдёт ли Drawflow для React?

Обёртки в README нет. Библиотека не зависит от фреймворков и работает в обычном div, поэтому её можно подключить внутри эффекта компонента. Я этого не проверял. Если админка на React, сравните с React Flow.

Выполняет ли Drawflow сам сценарий?

Нет. Он рисует схему и отдаёт её в JSON. Выполнение, повторы и журнал пишутся отдельно.

Коротко о главном

Drawflow под MIT даёт лёгкий редактор блоков и связей для вставки в свой продукт, с HTML внутри узлов и экспортом в JSON. Исполнение, проверки, версии и защита от чужого HTML остаются на разработчике. Автор один, обновлений два года нет, доступность не из коробки.

Если хотите визуальный конструктор цепочек в своей админке, напишите мне в Telegram кодовое слово «УЗЛЫ». Выберем библиотеку под ваш стек и соберём прототип.