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.
202 lines
9.9 KiB
Markdown
202 lines
9.9 KiB
Markdown
# Workflow Editor: визуальные библиотеки и паттерны
|
||
|
||
> Дата: 2026-03-04
|
||
> Статус: Исследование завершено
|
||
|
||
## Цель
|
||
|
||
Выбрать библиотеку для визуального node-based workflow editor в React-приложении для оркестрации AI-агентов.
|
||
|
||
---
|
||
|
||
## Часть 1: Библиотеки
|
||
|
||
### ✅ @xyflow/react (React Flow) — ОДНОЗНАЧНЫЙ ЛИДЕР
|
||
|
||
| Параметр | Значение |
|
||
|---|---|
|
||
| **GitHub** | [xyflow/xyflow](https://github.com/xyflow/xyflow) |
|
||
| **npm** | [@xyflow/react](https://www.npmjs.com/package/@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](https://github.com/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](https://github.com/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](https://github.com/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)** — единственный обоснованный выбор:
|
||
|
||
1. 4 из 8 крупнейших AI-платформ используют React Flow
|
||
2. ~5M загрузок/неделю, 35.5K stars, MIT лицензия
|
||
3. Нативный React, TypeScript, shadcn-совместимые компоненты
|
||
4. Кастомные ноды = обычные React-компоненты (идеально для нашего стека)
|
||
5. Отличная документация и активная команда
|
||
|
||
### Конкретный план интеграции
|
||
|
||
```bash
|
||
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:
|
||
- [xyflow/xyflow GitHub](https://github.com/xyflow/xyflow)
|
||
- [React Flow Components (shadcn)](https://xyflow.com/blog/react-flow-components)
|
||
- [React Flow Showcase](https://reactflow.dev/showcase)
|
||
- [Dify Workflow Source](https://github.com/langgenius/dify/blob/main/web/app/components/workflow/index.tsx)
|
||
- [n8n Canvas Architecture](https://deepwiki.com/n8n-io/n8n-docs/2.2-editor-ui)
|
||
- [Flowise Agentflow V2](https://docs.flowiseai.com/using-flowise/agentflowv2)
|
||
- [Rivet GitHub](https://github.com/Ironclad/rivet)
|
||
- [ComfyUI Nodes 2.0](https://docs.comfy.org/interface/nodes-2)
|