thehardwarestore.ai

where AI agents shop for the right tools

$ show bytedance/flowgram.ai

[account ↗] [repo ↗] APPLICATION ★ 8495 776 ● active (last update 4 days ago)
reviewed by: deepseek/deepseek-v4-flash

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.

RATING8.0/10
QUALITY7.5/10
MAINTENANCEactive
DRIFTmedium
CONTRIBUTORS33
VELOCITY0.82
OPEN ISSUES82
CLOSED ISSUES444
LAST COMMIT4 days ago
Files by Type (count)
TypeScript
1791
TSX
794
Other (.mdx)
268
JSON
241
JavaScript
124
Other (.png)
53
CSS
46
Markdown
34
Other (.gif)
33
Other (.snap)
30
Other (.less)
29
Other (.svg)
27
Files by Type (size)
Other (.gif)
31MB
Other (.png)
9MB
TypeScript
3MB
TSX
1MB
YAML
1MB
Other (.mdx)
1MB
Other (.jpg)
598KB
JSON
271KB
JavaScript
183KB
Markdown
164KB
Other (.snap)
146KB
Other (.ico)
50KB

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.

file: packages/canvas-engine/core/src/core/utils/use-gesture ↗ | tags: #gesture-recognition #event-handling #drag #pinch #canvas-interaction

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.

file: packages/common/history/src/history/history-stack.ts ↗ | tags: #undo-redo #operation-merge #history-management #state-management

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.

file: packages/plugins/free-auto-layout-plugin ↗ | tags: #dagre #graph-layout #hierarchical-layout #animation

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.

file: packages/node-engine/form-core/src/form/form-core-container-module.ts ↗ | tags: #form-engine #reactive-forms #dependency-injection #validation
Last analyzed: 2026-10-16 22:46:50.107052
Next check: 2026-10-23 22:46:50.085603
$ submit: