1f35e86f0a
- Updated README to specify CLI runtime capabilities for headless environments. - Introduced a comprehensive implementation plan for the diff view feature, detailing phases, required packages, types, IPC channels, backend services, and UI components. - Added new documentation on competitors in AI orchestration platforms and research on local image storage and markdown rendering pipeline. - Included a workflow editor research document to evaluate visual libraries for node-based workflow orchestration.
9.9 KiB
Workflow Editor: визуальные библиотеки и паттерны
Дата: 2026-03-04 Статус: Исследование завершено
Цель
Выбрать библиотеку для визуального node-based workflow editor в React-приложении для оркестрации AI-агентов.
Часть 1: Библиотеки
✅ @xyflow/react (React Flow) — ОДНОЗНАЧНЫЙ ЛИДЕР
| Параметр | Значение |
|---|---|
| GitHub | xyflow/xyflow |
| npm | @xyflow/react |
| Stars | ~35,500 |
| npm загрузки/неделю | ~4,900,000 (старый reactflow + новый @xyflow/react) |
| Версия | v12.10.1 (2025) |
| Лицензия | MIT |
| Bundle size | ~40-50 kB min+gzip |
| TypeScript | Полная поддержка, написан на TypeScript |
| React | Нативная React-библиотека |
Ключевые фичи:
- Drag & drop нод, zoom/pan, minimap, controls — из коробки
- Кастомные ноды и edges = обычные React-компоненты
- Hooks API (
useNodes,useEdges,useReactFlow) - Новые React Flow Components на базе shadcn/ui (2025)
- Performance: перерисовываются только изменённые ноды
Кто использует: Stripe, n8n (Vue Flow), Langflow, Flowise, Dify — 4 из 8 крупнейших AI-платформ
Надёжность: 10/10 | Уверенность: 10/10
Rete.js
| Параметр | Значение |
|---|---|
| GitHub | retejs/rete |
| Stars | ~11,900 |
| npm загрузки/неделю | ~42,700 |
| Лицензия | MIT |
| React | Через плагин rete-react-plugin |
Фреймворк-агностик (React, Vue, Angular, Svelte). Более "инженерный" подход с типизированными портами. Rete Studio — уникальная фича code ↔ visual. Но значительно меньше комьюнити и слабее документация.
Надёжность: 7/10 | Уверенность: 8/10
AntV X6
| Параметр | Значение |
|---|---|
| GitHub | antvis/X6 |
| Stars | ~6,400 |
| npm загрузки/неделю | ~68,200 |
| Лицензия | MIT |
Enterprise-grade, часть экосистемы Ant Design. SVG/HTML рендеринг. Но документация преимущественно на китайском, React-интеграция через обёртки.
Надёжность: 7/10 | Уверенность: 8/10
JointJS / JointJS+
| Параметр | Значение |
|---|---|
| GitHub | clientIO/joint |
| Stars | ~5,170 |
| Лицензия | MPL 2.0 (open source) / Commercial (JointJS+ от $2,990) |
Самая зрелая библиотека (с 2010). BPMN 2.0, UML, ERD, Visio import/export. Но коммерческая лицензия дорогая, open source часть ограничена.
Надёжность: 8/10 | Уверенность: 8/10
Drawflow, Flume, BaklavaJS, LiteGraph.js, jsPlumb
| Библиотека | Stars | React | TypeScript | Статус |
|---|---|---|---|---|
| Drawflow | 6,000 | Нет | Нет | Заброшен |
| LiteGraph.js | 7,800 | Нет (Canvas2D) | Нет | ComfyUI мигрирует на Vue |
| jsPlumb | 7,800 | Через Toolkit ($990) | Частично | Community заброшен |
| Flume | 1,500 | Да | Частично | Полу-заброшен |
| BaklavaJS | 1,500 | Нет (только Vue) | Да | Нишевый |
Все перечисленные не подходят для нашего проекта из-за отсутствия React-поддержки, TypeScript, или заброшенности.
Сводная таблица
| Библиотека | Stars | npm/нед. | React | TS | Лицензия | Цена | Рекомендация |
|---|---|---|---|---|---|---|---|
| @xyflow/react | 35,500 | 4,900,000 | Нативный | Да | MIT | Free | ✅ Выбор |
| Rete.js | 11,900 | 42,700 | Плагин | Да | MIT | Free | Альтернатива |
| AntV X6 | 6,400 | 68,200 | Обёртка | Да | MIT | Free | Для Ant Design |
| JointJS | 5,200 | 51,900 | @joint/react | Да | MPL/Comm. | от $2,990 | Enterprise |
| Остальные | <8K | <15K | Нет/Частично | Нет | MIT | Free | Не подходят |
Часть 2: Как AI-платформы реализуют workflow editors
Кто какую библиотеку использует
| Платформа | Stars | Библиотека | Фреймворк |
|---|---|---|---|
| n8n | ~177K | Vue Flow (Vue-порт React Flow) | Vue 3 + Pinia |
| Langflow | ~130K | React Flow | React + FastAPI |
| Dify | ~119K | React Flow | Next.js + React 19 + Flask |
| Flowise | ~43K | React Flow | React + Express |
| ComfyUI | ~103K | LiteGraph.js → Vue (мигрирует) | Vue 3 + Pinia |
| Rivet | ~4.5K | Кастомный canvas | React + Tauri |
| Promptflow | ~11K | Кастомный DAG в VS Code | VS Code webview |
| Haystack | ~24K | Закрытый фронтенд | Python + hosted UI |
React Flow используют 4 из 8 платформ — де-факто стандарт.
Лучшие UX-паттерны для заимствования
| Паттерн | Из платформы | Описание |
|---|---|---|
| Relationships Panel | Dify | Shift+click подсвечивает связи узла, затемняя остальное |
| Real-time data flow | Rivet | При execution видны данные, текущие через каждый wire |
| Inline prompt editor | Dify, Langflow | Редактирование промпта прямо в узле на канвасе |
| AI Graph Creator | Rivet | CMD+I — AI создает/редактирует граф по промпту |
| Prompt optimization | Dify | AI-ассистент автоматически оптимизирует промпт |
| Auto-fix code | Dify | Если Code-узел падает, AI генерирует исправление |
| HITL checkpoint | Flowise | Агент останавливается и запрашивает confirmation у человека |
| Flow-as-subflow | Flowise, Rivet | Flow вызывает другой flow как функцию |
| YAML/JSON export | Rivet, Promptflow | Графы как код = version control и diff |
| Typed & colored ports | ComfyUI, Dify | Цветовое кодирование портов по типу данных |
| Playground/Chat | Langflow, Dify | Встроенный чат для тестирования без деплоя |
| Variable live tracking | Dify | При debug-запуске видны значения переменных в каждом узле |
Главный тренд 2025: Agent Node
Dify, Flowise, Langflow — все добавили "Agent Node" — узел, где LLM сам решает какие tools вызывать. Workflow перестаёт быть чисто детерминированным DAG-ом и включает LLM-driven branching.
React Flow vs Custom Canvas — когда что
| Подход | Когда использовать | Пример |
|---|---|---|
| React Flow | <500 нод, нужна быстрая разработка, Rich UI | Dify, Langflow, Flowise |
| Custom Canvas2D | Тысячи нод, max performance | ComfyUI (но мигрирует на Vue!) |
| Кастомный canvas | Desktop app, полный контроль | Rivet (Tauri) |
ComfyUI мигрирует с Canvas2D на Vue-компоненты — показатель того, что гибкость UI важнее raw performance.
Решение
@xyflow/react (React Flow) — единственный обоснованный выбор:
- 4 из 8 крупнейших AI-платформ используют React Flow
- ~5M загрузок/неделю, 35.5K stars, MIT лицензия
- Нативный React, TypeScript, shadcn-совместимые компоненты
- Кастомные ноды = обычные React-компоненты (идеально для нашего стека)
- Отличная документация и активная команда
Конкретный план интеграции
pnpm add @xyflow/react
Типы нод для нашего workflow editor:
- AgentNode — Claude Code агент (настройка модели, промпта, tools)
- TeamNode — группа агентов с ролями
- TaskNode — задача для агента
- ConditionNode — IF/ELSE ветвление
- MCP ServerNode — подключение MCP-сервера
- SkillNode — подключение skill/plugin
- TriggerNode — запуск workflow (cron, webhook, manual)
- OutputNode — результат (файл, PR, сообщение)
Sources: