# bytedance/flowgram.ai

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/bytedance-flowgram-ai).**

8,146 stars · 733 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/bytedance/flowgram.ai
- Homepage: https://flowgram.ai
- awesome-repositories: https://awesome-repositories.com/repository/bytedance-flowgram-ai.md

## Topics

`ai` `automation` `coze` `data-flow` `diagram` `flow` `flowchart` `graph` `integration-framework` `javascript` `no-code` `node-based-ui` `react` `typescript` `typescript-library` `visualization` `workflow` `workflow-automation`

## Description

Flowgram.ai is a workflow development framework for building AI workflow platforms. It provides a visual drag-and-drop canvas for constructing workflows, an Entity-Component-System (ECS) based document model for structuring workflow nodes as a tree, and a node-based form engine for managing configuration forms with built-in rendering, validation, side effects, and error handling. The framework also includes a workflow execution engine that parses directed graph workflows and runs nodes step by step with state tracking and array iteration.

The framework distinguishes itself through a layered reactive canvas that updates only affected layers on data changes, a command-based document history enabling undo and redo, and a path-pattern side effect engine that triggers custom logic when node data changes. It supports variable scope chains with type inference, constraining variable visibility to specific nodes and automatically deriving types from upstream data structures. The canvas offers both free-form and structured layouts, with alignment guides, auto-layout, branch group management, sub-canvas editing, and clipboard operations.

The framework covers configuration and extensibility through custom layers, modular data model extension, node form configuration, and viewport event listening. It includes data storage and sync capabilities such as auto-save, data loading, document management, form validation, and variable definition with scope and type inference. Workflow execution features include conditional branching, loop iteration, side effects, state tracking, and step-by-step execution. The framework also provides monitoring and observability through canvas data observation, external form data watching, and variable inspection.

## Tags

### Artificial Intelligence & ML

- [AI Workflow Builders](https://awesome-repositories.com/f/artificial-intelligence-ml/ai-workflow-builders.md) — Provides a drag-and-drop canvas with zoom, pan, and node alignment for constructing AI workflows visually.
- [Large Language Model Integration](https://awesome-repositories.com/f/artificial-intelligence-ml/large-language-models/large-language-model-integration.md) — Provides built-in LLM integration for calling models with system and user prompts within workflow steps. ([source](https://flowgram.ai/guide/runtime/introduction.html))
- [Workflow Step Sequencers](https://awesome-repositories.com/f/artificial-intelligence-ml/machine-learning/infrastructure/machine-learning-training/pipelines-and-orchestration/training-orchestration-systems/training-loop-managers/step-by-step-execution-controls/workflow-step-sequencers.md) — Workflow builder parses a workflow definition and runs each node in sequence, managing data flow and the full lifecycle. ([source](https://flowgram.ai/guide/runtime/introduction.html))
- [Workflow Variable Injections](https://awesome-repositories.com/f/artificial-intelligence-ml/workflow-variable-injections.md) — Workflow builder creates named typed containers that pass data between workflow nodes, acting as structured messengers for user inputs and computed results. ([source](https://flowgram.ai/guide/variable/basic.html))
- [Workflow Branching Control](https://awesome-repositories.com/f/artificial-intelligence-ml/workflow-branching-control.md) — Provides branch group management with collapse and expand for simplifying complex workflow layouts. ([source](https://flowgram.ai/guide/getting-started/introduction.html))

### Development Tools & Productivity

- [AI Workflow Platforms](https://awesome-repositories.com/f/development-tools-productivity/development-workflow-extensions/ai-workflow-platforms.md) — An extensible framework for building AI workflow platforms with a visual canvas, forms, and variable management.
- [Canvas Workflow Automation](https://awesome-repositories.com/f/development-tools-productivity/canvas-workflow-automation.md) — Provides a free-form workflow canvas for placing nodes anywhere with flexible connection lines. ([source](https://cdn.jsdelivr.net/gh/bytedance/flowgram.ai@main/README.md))
- [Workflow Node Clipboard Operations](https://awesome-repositories.com/f/development-tools-productivity/clipboard-management/clipboard-copying/workflow-node-clipboard-operations.md) — Workflow builder provides selection and clipboard services for copying, cutting, and pasting workflow nodes. ([source](https://flowgram.ai/api/index.html))
- [Document State Commands](https://awesome-repositories.com/f/development-tools-productivity/command-execution/command-standardizers/workflow/document-state-commands.md) — Workflow builder dispatches and manages commands that modify the workflow document state. ([source](https://flowgram.ai/api/index.html))
- [Modular Workflow Editor Extensions](https://awesome-repositories.com/f/development-tools-productivity/email-service-integrations/workflow-extensibility/modular-workflow-editor-extensions.md) — Extending workflow editors with custom layers, data models, and form engines via modular architecture.
- [Plugin Configuration Forms](https://awesome-repositories.com/f/development-tools-productivity/extensible-configuration-interfaces/plugin-interface-configurations/plugin-configuration-forms.md) — Offers built-in configuration forms with variable scope chains for setting up workflow node properties. ([source](https://flowgram.ai/guide/getting-started/introduction.html))
- [Workflow Node Form Definitions](https://awesome-repositories.com/f/development-tools-productivity/extensible-configuration-interfaces/plugin-interface-configurations/plugin-configuration-forms/workflow-node-form-definitions.md) — Provides a single-configuration form engine for workflow nodes with built-in rendering and validation. ([source](https://flowgram.ai/guide/form/form.html))
- [State Auto-Saving](https://awesome-repositories.com/f/development-tools-productivity/automatic-file-saving/state-auto-saving.md) — Monitors canvas changes and triggers debounced auto-save to persist the latest workflow state. ([source](https://flowgram.ai/guide/free-layout/load.html))

### User Interface & Experience

- [Visual Workflow Builders](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/visual-workflow-builders.md) — Provides a drag-and-drop visual canvas for constructing AI workflows with zoom, pan, and animations. ([source](https://flowgram.ai/guide/getting-started/introduction.html))
- [Reactive Canvas Layers](https://awesome-repositories.com/f/user-interface-experience/canvas-workspace-management/layered-canvas-composition/canvas-layer-management/reactive-canvas-layers.md) — Provides a layered reactive canvas that updates only affected layers on data changes.
- [Document Command Executions](https://awesome-repositories.com/f/user-interface-experience/document-transformation-commands/document-command-executions.md) — Workflow builder executes predefined operations on the workflow document through a command service for structured modifications. ([source](https://flowgram.ai/api/index.html))
- [Canvas-Based Workflow Editors](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/visual-workflow-builders/canvas-based-workflow-editors.md) — Building drag-and-drop workflow editors with zoom, pan, and node alignment for AI pipelines and process automation.
- [Free-Form Canvas Layouts](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-elements/free-form-movement/free-form-canvas-layouts.md) — Provides a free-form canvas for placing nodes anywhere with flexible connection lines. ([source](https://cdn.jsdelivr.net/gh/bytedance/flowgram.ai@main/README.md))
- [Canvas Pan and Zoom Controls](https://awesome-repositories.com/f/user-interface-experience/2d-panning-controllers/image-pan-and-zoom-controls/plot-pan-and-zoom-controls/canvas-pan-and-zoom-controls.md) — Ships interactive pan and zoom controls for navigating the workflow canvas at different detail levels. ([source](https://flowgram.ai/guide/advanced/zoom-scroll.html))
- [Canvas Auto-Layout Arrangers](https://awesome-repositories.com/f/user-interface-experience/auto-layout-wrappers/canvas-auto-layout-arrangers.md) — Provides auto-layout functionality to organize scattered workflow nodes into clean arrangements. ([source](https://flowgram.ai/guide/getting-started/introduction.html))
- [Nested Sub-Canvas Editors](https://awesome-repositories.com/f/user-interface-experience/reusable-workflow-blueprints/composable-sub-workflows/nested-sub-canvas-editors.md) — Provides nested sub-canvases for editing loops and sub-processes without cluttering the main workflow. ([source](https://flowgram.ai/guide/getting-started/introduction.html))
- [Canvas Node Multi-Selection](https://awesome-repositories.com/f/user-interface-experience/selectable-lists/multiple-selections/canvas-node-multi-selection.md) — Supports box-selection and simultaneous dragging of multiple workflow nodes on the canvas. ([source](https://flowgram.ai/guide/getting-started/introduction.html))
- [Custom Layer Renderers](https://awesome-repositories.com/f/user-interface-experience/ui-layer-rendering/custom-layer-renderers.md) — Allows inserting custom React layers into the canvas for drawing visuals like SVG lines. ([source](https://flowgram.ai/guide/advanced/custom-layer.html))
- [Canvas Node Selection States](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/area-selection/path-based-node-selection/canvas-node-selection-states.md) — Manages selection state of workflow nodes for user interaction and focus on specific elements. ([source](https://flowgram.ai/api/index.html))

### Business & Productivity Software

- [Workflow Execution Engines](https://awesome-repositories.com/f/business-productivity-software/workflow-execution-engines.md) — Parsing directed graph workflows and running nodes step by step with state tracking and array iteration.
- [Workflow State Tracking](https://awesome-repositories.com/f/business-productivity-software/workflow-state-tracking.md) — Workflow builder records execution history and current state, giving visibility into the progress of a running workflow. ([source](https://flowgram.ai/guide/runtime/introduction.html))

### Content Management & Publishing

- [Workflow Document State Managers](https://awesome-repositories.com/f/content-management-publishing/document-state-management/workflow-document-state-managers.md) — Managing tree-based workflow documents with undo/redo, clipboard, and batch node operations.

### Data & Databases

- [Data Loading](https://awesome-repositories.com/f/data-databases/json-editors/data-loading.md) — Workflow builder loads workflow data into the editor from a JSON object or external source, supporting initial load and dynamic reload. ([source](https://flowgram.ai/guide/free-layout/load.html))
- [Component-Based Data Composition](https://awesome-repositories.com/f/data-databases/relational-data-modeling/complex-data-modeling/data-object-builders/component-based-data-composition.md) — Assembles complex data objects from independent components for targeted subsystem consumption. ([source](https://flowgram.ai/guide/concepts/ecs.html))

### DevOps & Infrastructure

- [Directed Graph Workflow Definitions](https://awesome-repositories.com/f/devops-infrastructure/infrastructure/infrastructure-as-code/orchestration-and-workflows/infrastructure-as-code-workflows/workflow-definitions-as-code/directed-graph-workflow-definitions.md) — Workflow builder describes a workflow using a JSON structure of nodes and edges to specify task order and logic. ([source](https://flowgram.ai/guide/runtime/introduction.html))

### Game Development

- [Entity Component Systems](https://awesome-repositories.com/f/game-development/engine-architecture/entity-component-systems.md) — Uses an Entity-Component-System architecture to manage workflow nodes as composable entities.

### Graphics & Multimedia

- [Structured Workflow Canvases](https://awesome-repositories.com/f/graphics-multimedia/immersive-interactive-systems/user-interaction/canvas-node-manipulation/structured-workflow-canvases.md) — Provides a structured grid canvas with drag-and-drop for building predictable workflow layouts. ([source](https://cdn.jsdelivr.net/gh/bytedance/flowgram.ai@main/README.md))
- [Snap Alignment Libraries](https://awesome-repositories.com/f/graphics-multimedia/precision-alignment-tools/snap-alignment-libraries.md) — Ships snap alignment libraries for aligning nodes to visual guides during drag operations. ([source](https://flowgram.ai/guide/getting-started/introduction.html))

### Programming Languages & Runtimes

- [Type-Inferred Scope Chains](https://awesome-repositories.com/f/programming-languages-runtimes/variable-scope-controls/scope-chain-management/type-inferred-scope-chains.md) — Provides variable scope chains with automatic type inference from upstream data structures.
- [Workflow Variable Scopes](https://awesome-repositories.com/f/programming-languages-runtimes/variable-scope-controls/scoped-type-variables/automatic-variable-type-inference/workflow-variable-scopes.md) — Defining, scoping, and auto-inferring typed variables that pass data between workflow nodes.
- [Cross-Step Variable Stores](https://awesome-repositories.com/f/programming-languages-runtimes/variable-scope-controls/scoped-type-variables/automatic-variable-type-inference/workflow-variable-scopes/cross-step-variable-stores.md) — Workflow builder keeps variable data available throughout a workflow run, letting steps read and write shared values. ([source](https://flowgram.ai/guide/runtime/introduction.html))
- [Workflow Variable Scopes](https://awesome-repositories.com/f/programming-languages-runtimes/variable-scope-controls/workflow-variable-scopes.md) — Workflow builder restricts each variable's visibility to specific workflow nodes, preventing data pollution and unintended cross-node access. ([source](https://flowgram.ai/guide/variable/basic.html))
- [Workflow](https://awesome-repositories.com/f/programming-languages-runtimes/variable-assignments/workflow.md) — Implements variable assignment nodes with automatic type inference for workflow data flow management. ([source](https://flowgram.ai/materials/introduction.html))
- [Automatic Variable Type Inference](https://awesome-repositories.com/f/programming-languages-runtimes/variable-scope-controls/scoped-type-variables/automatic-variable-type-inference.md) — Automatically infers and synchronizes variable types across connected workflow nodes. ([source](https://flowgram.ai/guide/variable/basic.html))

### Software Engineering & Architecture

- [Path-Pattern Side Effects](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/design-patterns/functional-design-patterns/side-effect-management/lifecycle-side-effects/path-pattern-side-effects.md) — Workflow builder runs custom logic when node data is initialized or modified, using path patterns to target specific fields. ([source](https://flowgram.ai/guide/form/form.html))
- [Operational Command Histories](https://awesome-repositories.com/f/software-engineering-architecture/command-execution-engines/command-history-trackers/operational-command-histories.md) — Implements a command-based history system that records document mutations for undo and redo.
- [Conditional Branching](https://awesome-repositories.com/f/software-engineering-architecture/conditional-branching.md) — Workflow builder evaluates a condition at a decision point and sends execution down the matching branch path. ([source](https://flowgram.ai/guide/runtime/introduction.html))
- [Document Model](https://awesome-repositories.com/f/software-engineering-architecture/ecs-libraries/document-model.md) — Structures workflow nodes as a tree using an Entity-Component-System architecture for data and behavior separation.
- [Workflow Node Form Management](https://awesome-repositories.com/f/software-engineering-architecture/node-runtime-configuration/workflow-node-form-management.md) — Manages node configuration forms with full CRUD, validation, side effects, and error handling. ([source](https://cdn.jsdelivr.net/gh/bytedance/flowgram.ai@main/README.md))
- [AI Workflow Node Configurations](https://awesome-repositories.com/f/software-engineering-architecture/node-runtime-configuration/workflow-node-form-management/ai-workflow-node-configurations.md) — Configuring AI model, code, HTTP, database, and conditional nodes with forms, validation, and variable scoping.
- [Code Editors](https://awesome-repositories.com/f/software-engineering-architecture/node-runtime-configuration/workflow-node-form-management/ai-workflow-node-configurations/code-editors.md) — Workflow builder provides a code editor for writing and running custom script logic within workflow nodes. ([source](https://flowgram.ai/materials/introduction.html))
- [Prompt Editors](https://awesome-repositories.com/f/software-engineering-architecture/node-runtime-configuration/workflow-node-form-management/ai-workflow-node-configurations/prompt-editors.md) — Workflow builder offers a prompt editor with optional variable insertion for configuring large language model interactions. ([source](https://flowgram.ai/materials/introduction.html))
- [Node-Tree Data Models](https://awesome-repositories.com/f/software-engineering-architecture/node-tree-data-models.md) — Organizes workflow nodes in a parent-child tree using an ECS architecture for data and behavior separation. ([source](https://flowgram.ai/guide/concepts/canvas-engine.html))
- [Incremental Rendering Updates](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/data-handling-throughput/large-dataset-optimizations/incremental-rendering-updates.md) — Workflow builder updates only the visual parts affected by a data change, avoiding full re-renders for better performance. ([source](https://flowgram.ai/guide/concepts/ecs.html))
- [Workflow Document Trees](https://awesome-repositories.com/f/software-engineering-architecture/tree-traversal-algorithms/document-tree-traversers/workflow-document-trees.md) — Organizes workflow nodes in a tree-based document model with full CRUD and traversal operations.
- [Workflow Iteration Engines](https://awesome-repositories.com/f/software-engineering-architecture/workflow-iteration-engines.md) — Workflow builder runs a sub-workflow for each element in an array, processing items one at a time. ([source](https://flowgram.ai/guide/runtime/introduction.html))
- [Workflow Nodes](https://awesome-repositories.com/f/software-engineering-architecture/workflow-nodes.md) — Renders workflow nodes on the canvas using built-in renderers for fixed or free layout editors. ([source](https://flowgram.ai/api/index.html))
- [Canvas Node Renderers](https://awesome-repositories.com/f/software-engineering-architecture/workflow-nodes/canvas-node-renderers.md) — Renders workflow nodes on the canvas with dedicated components for different layout modes. ([source](https://flowgram.ai/api/index.html))
- [Modular Data Model Extensions](https://awesome-repositories.com/f/software-engineering-architecture/component-functional-extensions/rendering-and-data-extensions/modular-data-model-extensions.md) — Enables modular extension of data models with new types and rendering logic without altering existing code. ([source](https://flowgram.ai/guide/concepts/ecs.html))
- [SQL Editors](https://awesome-repositories.com/f/software-engineering-architecture/node-runtime-configuration/workflow-node-form-management/ai-workflow-node-configurations/sql-editors.md) — Workflow builder provides a SQL editor with variable support and condition rows for configuring database operations. ([source](https://flowgram.ai/materials/introduction.html))
- [Loop Node Implementations](https://awesome-repositories.com/f/software-engineering-architecture/workflow-nodes/node-type-registries/loop-node-implementations.md) — Provides loop nodes that iterate over arrays with automatic type derivation for item and index variables. ([source](https://flowgram.ai/materials/introduction.html))

### Testing & Quality Assurance

- [Workflow Node Input-Output Schemas](https://awesome-repositories.com/f/testing-quality-assurance/node-input-output-testing/workflow-node-input-output-schemas.md) — Ships a form engine for defining and validating node inputs and outputs with automatic schema generation. ([source](https://flowgram.ai/materials/introduction.html))

### Web Development

- [Undo-Redo History](https://awesome-repositories.com/f/web-development/history-management/undo-redo-history.md) — Implements a command-based undo/redo history for reverting and reapplying workflow edits. ([source](https://flowgram.ai/guide/getting-started/introduction.html))
- [Data Composition Components](https://awesome-repositories.com/f/web-development/component-composition/data-composition-components.md) — Ships a component-based data composition system for assembling complex workflow data objects.
- [Path-Based Form Validators](https://awesome-repositories.com/f/web-development/form-data-validation/path-based-form-validators.md) — Workflow builder checks field values against rules on data change or blur, supporting path-based matching and dynamic validators. ([source](https://flowgram.ai/guide/form/form.html))

### Networking & Communication

- [JSON Editors](https://awesome-repositories.com/f/networking-communication/http-request-builders/json-editors.md) — Workflow builder provides a JSON editor with variable support for configuring HTTP request bodies and parameters. ([source](https://flowgram.ai/materials/introduction.html))