LiteGraph.js Визуальное программирование прямо в браузере

Представьте, что вы можете проектировать сложные логические цепочки и алгоритмы, просто соединяя блоки мышкой — как в Unreal Engine Blueprints, но прямо в браузере. Именно это и предлагает LiteGraph.js — легковесная JavaScript-библиотека для создания и редактирования нодных графов.

Кому это нужно?

Если вы:

• Разрабатываете инструменты для визуального программирования
• Хотите дать пользователям гибкость в настройке логики без написания кода
• Создаёте образовательные платформы по программированию
• Работаете с обработкой данных или медиа-контентом

...то LiteGraph.js стоит добавить в ваш арсенал.

Главные преимущества

1. Полноценный редактор в браузере

Библиотека включает готовый редактор с:

• Поиском нод
• Групповым выделением
• Горячими клавишами
• Контекстным меню

Попробуйте демо — почувствуете мощь инструмента за пару минут.

2. Простота интеграции

Всего два файла:

<link rel="stylesheet" href="litegraph.css">
<script src="litegraph.js"></script>

И вы можете встраивать графы в любые веб-приложения.

3. Гибкость настройки

• Кастомизация внешнего вида (цвета, формы нод)
• Поддержка TypeScript
• Возможность создавать сложные иерархии через подграфы
• Режим "живого" исполнения для UI-элементов

4. Работа на стороне сервера

Хотя некоторые ноды (аудио, графика) требуют браузера, базовую логику можно исполнять и в Node.js:

var LiteGraph = require("./litegraph.js").LiteGraph;
var graph = new LiteGraph.LGraph();
// Добавляем ноды и связи
graph.start();

Как создавать свои ноды?

Вот пример ноды для сложения двух чисел:

function MyAddNode() {
  this.addInput("A","number");
  this.addInput("B","number");
  this.addOutput("A+B","number");
}

MyAddNode.title = "Sum";

MyAddNode.prototype.onExecute = function() {
  var A = this.getInputData(0) || 0;
  var B = this.getInputData(1) || 0;
  this.setOutputData(0, A + B);
}

LiteGraph.registerNodeType("basic/sum", MyAddNode);

Или ещё проще — можно обернуть существующую функцию:

LiteGraph.wrapFunctionAsNode("math/sum", (a,b) => a+b, ["Number","Number"], "Number");

Где уже используется?

• ComfyUI — мощный интерфейс для работы с Stable Diffusion
• WebGLStudio — среда разработки 3D-графики
• MOI Elephant — система для создания алгоритмов

Стоит ли пробовать?

LiteGraph.js — отличное решение, когда нужно:

• Быстро создать визуальный конструктор без разработки с нуля
• Дать пользователям гибкость в настройке логики
• Реализовать сложные цепочки обработки данных

Библиотека активно развивается (7.6k звёзд на GitHub), имеет MIT-лицензию и работает как в браузере, так и в Node.js. Для старта достаточно взять пример из README и адаптировать под свои нужды.

Совет: Начните с демо-версии — за 10 минут поймёте, подходит ли инструмент для ваших задач.