1. Project Overview

ByteDance (ByteDance) recently open-sourced its node-based workflow construction engine: FlowGram. It is also used as the core visual workflow engine in products such as Feishu workflow, Coze automation, etc.

FlowGram.AI

Plugin-based workflow construction engine

High-performance, extensible, customizable

FlowGram is a node-based workflow construction engine that helps developers quickly create fixed layout or free layout patterns, and provides a set of interactive best practices. It is very suitable for visual workflows with clear input and output.

In the current AI boom, we will also focus on how to enable workflows with AI, and have specially added the AI suffix.

FlowGram = Flow + Program, implying that workflows are like programs, with Condition, Loop, and TryCatch nodes.

2. Open Source License

Licensed under MIT

3. Screenshots

Coze

 

 

Feishu low-code platform workflow

 

 

Feishu multi-dimensional table

 

4. Feature Overview

FlowGram is a node-based workflow construction engine that helps developers quickly create fixed layout or free layout workflows.

Comparison with ReactFlow

ReactFlow is an excellent open-source project, with clear architecture and code, but it is biased towards the underlying architecture of workflow rendering engines (Node, Edge, Handle), and requires a large amount of functionality to be developed on top to adapt to complex scenarios (such as fixed layout, which requires data modeling to write layout algorithms), and high-end features are charged.

Compared to ReactFlow, FlowGram aims to provide a complete out-of-the-box solution for workflow editing.

• Below is the official ReactFlow pro paid functionality

• ReactFlow events are bound to atomic DOM nodes, and are built-in, with high interaction customization costs, requiring understanding of its source code to deeply develop, such as when the canvas is scaled down, it is difficult to select a point

Source: FlowGram.AI official website documentation

5. Tech Stack

Installation

Install via npx

MacOS / Linux / WSL / Git Bash

npx@flowgram.ai/create-app@latest

# Select demo
- fixed-layout # Fixed layout best practice
- free-layout # Free layout best practice
- fixed-layout-simple # Fixed layout basic usage
- free-layout-simple # Free layout basic usage

Install via npm

MacOS / Linux / WSL / Git Bash

npm install @flowgram.ai/fixed-layout-editor

MacOS / Linux / WSL / Git Bash

npm install @flowgram.ai/free-layout-editor