$ show bytedance/flowgram.ai
FlowGram is a comprehensive, production-grade visual workflow development framework from ByteDance. The codebase implements two distinct editing paradigms — fixed-layout (automatic positioning with composite nodes like loops, branches) and free-layout (node-position-free with lines) — both built on a shared plugin architecture using inversify for dependency injection. The framework includes a form engine with reactive fields, validation, and effects; a variable engine with AST-based type inference and scoped lifecycle; and a runtime engine capable of executing workflows with executors for LLM, HTTP, code (QuickJS sandbox), and conditions. The repository contains over 40 packages managed via Rush monorepo, encompassing core libraries, plugins (history, minimap, auto-layout, group, snap, clipboard, export), UI material libraries (Semi UI, Ant Design), a CLI tool for scaffolding, multiple demo applications, and comprehensive documentation. The system is actively maintained with regular commits, CI workflows, and E2E tests. Notable technical decisions include a local fork of the use-gesture library for canvas interaction, heavy decorator-based IoC, and support for both React 17 and 18. While the architecture is well-structured and extensible, the codebase shows signs of duplication between fixed and free layouts, numerous demo-specific components, and some deprecated APIs that indicate ongoing refactoring.
The LLM identified 4 files worth highlighting for reuse:
A self-contained, custom implementation of gesture recognition for canvas interaction, supporting drag, pinch, scroll, wheel, move, and hover events. Implements a configurable resolver system for each gesture type with proper coordinate transformations, timeout handling, and state management. Demonstrates deep understanding of multi-touch and mouse events, and is structured as independent modules (config, engines, types) that could be extracted into a standalone gesture library with minimal adaptation.
A production-quality undo/redo stack that supports operation batching, merge strategies (replace, merge, skip), and max stack depth. Implements inverse operations and provides hooks for custom merge logic. Fully independent of the rest of the codebase — uses only TypeScript basics and is reusable in any application requiring undo/redo with compound operations.
A plugin that implements automatic graph layout using the Dagre algorithm, including order, cross-count, sort-subgraph, and feasible-tree stages. Provides animated transitions between layout states and integrates with the free-layout editor's node/line services. The algorithm and animation logic are self-contained and could be reused in any graph visualization tool, not tied to the editor's DI system.
The core form engine with a reactive model supporting fields, arrays, validation triggers, effects, and plugin-based extensions. Uses inversify for DI, but the underlying FormModel and Field abstractions are designed to be agnostic of UI framework. The ability system (setter, decorator, visibility, effect, default) demonstrates a clean separation of concerns and is reusable as a standalone reactive form solution.