FlowGram Review: ByteDance's Open Source Workflow Orchestration Engine for Visual AI Workflows

ByteDance Finally Open Sourced Coze's Workflow Engine

In February 2025, ByteDance released FlowGram on GitHub—a React-based visual workflow development framework. As of August 2026, the project has accumulated 8,300+ stars and 765 forks, making it one of ByteDance's most significant open source contributions in the AI workflow space.

FlowGram is not another ready-made workflow platform (like n8n or Dify). It's a framework that helps you build workflow platforms. It provides all the underlying capabilities needed to build visual workflows: canvas engine, node forms, variable scope chains, and ready-to-use materials (LLM, conditionals, code editors, etc.).

In one sentence: If you want to build a workflow editor like Coze, FlowGram is the scaffold that helps you do it quickly.

From Coze to FlowGram: From Product to Engine

To understand FlowGram's positioning, you need to know its origins.

ByteDance's Coze is an AI Bot building platform for general users. One of its core capabilities is visual workflow orchestration—users can build complex AI processing flows by dragging nodes and connecting lines. This workflow editor has been validated at scale within Coze, serving millions of users.

FlowGram is exactly the engine layer extracted from this production-grade product. ByteDance open sourced the frontend framework of Coze's workflow editor, but stripped away business logic and backend services. This means:

• Coze = FlowGram engine + business backend + user interface
• FlowGram = pure frontend workflow framework (you need to bring your own backend)

This relationship is similar to the difference between Dify and FlowGram: Dify is a full-stack platform, FlowGram is a frontend engine. Choosing FlowGram means you have complete control—custom backend, custom data model, custom deployment.

Core Features: Dual Layout Modes and Four Engines

Free Layout vs Fixed Layout

FlowGram's biggest differentiating feature is supporting two canvas layout modes simultaneously.

Free Layout: - Nodes can be placed anywhere on the canvas - Nodes connected by free-form curves - Supports zoom, pan, minimap navigation - Ideal for complex, unstructured workflows

Fixed Layout: - Nodes auto-arranged, dragged to specified positions - Supports compound nodes (branches, loops) - Ideal for processes with clear hierarchical structure

Both layouts can coexist in the same project—rare among similar frameworks.

Four Core Engines

FlowGram's architecture consists of four independent engines:

1. Canvas Engine React-based high-performance canvas rendering, supporting smooth interaction with thousands of nodes. Built-in undo/redo, shortcuts, selection box, and other editing capabilities.

2. Form Engine Every node needs parameter configuration. The form engine dynamically renders configuration panels based on JSON Schema, with built-in validation rules and linkage logic, supporting custom component extensions.

3. Variable Engine Data flow management within workflows. Supports scope chains (each node can access parent variables), type inference, and structure checking—catching data flow errors at design time.

4. Runtime Engine The workflow execution engine, responsible for node scheduling, data passing, error handling, and breakpoint debugging. Supports both browser-side and server-side execution modes.

Built-in Materials

FlowGram provides a set of ready-to-use node materials:

Material	Function	Description
LLM Node	Large model invocation	Supports OpenAI, Claude, and multi-model switching
Condition	Conditional branch	Determines execution path based on expressions
Code Editor	Code node	Embedded Monaco editor, supports JS/Python
HTTP Request	HTTP request	Call external APIs
Loop	Loop node	Array traversal and batch processing
Start/End	Start/end nodes	Workflow entry and exit points

All materials are pluggable—you can replace built-in materials or add your own node types.

Technical Architecture: Modular Design and Execution Engine

FlowGram's architecture reflects ByteDance's experience in large-scale frontend engineering. The entire framework uses a Monorepo structure, with core code divided into 8 packages:

packages/
├── canvas-engine/      # Canvas rendering and interaction
├── node-engine/        # Node lifecycle management
├── variable-engine/    # Variable scope and type inference
├── runtime/            # Workflow execution engine
├── materials/          # Built-in node materials
├── plugins/            # Plugin system
├── client/             # Client SDK
└── common/             # Shared utilities

Node Engine

Each node is an independent state machine, containing: - Input ports: Receive upstream data - Configuration panel: User-set parameters - Output ports: Pass results downstream - Execution logic: The node's core processing function

Nodes connect through ports to form a DAG (Directed Acyclic Graph), with the runtime engine executing in topological order.

Variable Scope Chain

This is FlowGram's core innovation. Each node has its own variable scope, forming a scope tree:

Start Node
├── Variable: userInput (string)
└── LLM Node
    ├── Variable: prompt (string, references userInput)
    └── Code Node
        └── Variable: result (object, references prompt)

Child nodes can access parent node variables, but not vice versa. This design avoids variable pollution and makes data flow clearer.

Runtime Execution Modes

FlowGram supports two execution modes:

Browser-side execution: - Suitable for lightweight workflows - No backend service needed, pure frontend execution - Limitation: Cannot access file systems, databases, and other backend resources

Server-side execution: - Suitable for production-grade workflows - Requires deploying runtime services - Supports async nodes, long-running tasks

The runtime engine provides breakpoint debugging capabilities—you can pause execution at any node, inspect variable states, then continue or rollback.

FlowGram vs n8n vs Dify vs Node-RED: Workflow Tool Comparison

Before choosing a workflow tool, clarify your needs. This comparison helps you定位 quickly:

Dimension	FlowGram	n8n	Dify	Node-RED
Positioning	Workflow frontend dev framework	Automation workflow platform	AI app development platform	IoT event stream tool
License	MIT	Sustainable Use (fair-code)	Apache 2.0	Apache 2.0
Tech Stack	React/TypeScript	Vue/Node.js	Flask/React	Node.js
Layout Modes	Free + Fixed layout	Free layout	Fixed layout (linear)	Free layout
Usage	Embed in your app	Deploy and use independently	Deploy and use independently	Deploy and use independently
AI Capabilities	Built-in LLM/Code materials	Needs external nodes	Native AI orchestration	Self-integration required
Custom Nodes	Fully customizable	Supported	Limited	Supported
Backend Binding	None (pure frontend)	Built-in backend	Built-in backend	Built-in backend
Use Cases	Building workflow products	Business automation	AI app building	IoT/event-driven
Stars	8.3k	59k+	67k+	21k+

Key Differences:

• FlowGram is a framework, the other three are platforms. If you're building a workflow product like Coze, choose FlowGram; if you just want to use workflows to automate tasks, choose n8n or Dify.
• n8n's fair-code license restricts commercial use (fees required above revenue threshold), FlowGram's MIT license has no such restrictions.
• Dify focuses on AI applications, workflow is just one of its features; FlowGram is a general workflow engine, AI is just one application scenario.

Quick Start: 3-Minute Development Environment Setup

Environment Preparation

# Node.js 18+ required
node --version  # Confirm >= 18

# Create project using scaffold
npx @flowgram.ai/create-app@latest

The scaffold will prompt you to choose a template:

? Choose template:
❯ Free Layout Demo ⭐️    # Free layout (recommended)
  Fixed Layout Demo       # Fixed layout
  Next.js + Ant Design    # Production template
  Vite + React            # Lightweight template

Start Project

cd demo-free-layout
npm install
npm start

Open http://localhost:3000 in your browser, and you'll see a complete workflow editor interface.

Project Structure

demo-free-layout/
├── src/
│   ├── components/       # UI components
│   ├── nodes/            # Custom node definitions
│   ├── plugins/          # Plugin configuration
│   ├── editor.tsx        # Editor entry
│   └── App.tsx           # Application entry
├── package.json
└── tsconfig.json

Hands-on: Building an AI Content Generation Workflow

Let's build a real AI workflow with FlowGram: Input topic → Generate outline → Write sections → Polish → Output article.

Step 1: Define Workflow JSON

FlowGram workflows are described in JSON format with nodes and connections:

{
  "nodes": [
    {
      "id": "start",
      "type": "start",
      "data": {
        "outputs": {
          "topic": { "type": "string", "value": "AI Agent Trends" }
        }
      }
    },
    {
      "id": "outline",
      "type": "llm",
      "data": {
        "model": "gpt-4",
        "prompt": "Generate an article outline for this topic, return JSON array: {{start.topic}}",
        "temperature": 0.7
      }
    },
    {
      "id": "write_loop",
      "type": "loop",
      "data": {
        "array": "{{outline.output.sections}}",
        "itemVar": "section"
      },
      "children": [
        {
          "id": "write_section",
          "type": "llm",
          "data": {
            "model": "gpt-4",
            "prompt": "Write detailed content based on outline {{loop.section}}, topic: {{start.topic}}",
            "temperature": 0.5
          }
        }
      ]
    },
    {
      "id": "polish",
      "type": "llm",
      "data": {
        "model": "gpt-4",
        "prompt": "Polish the following article content, improve expression and coherence: {{write_loop.output}}",
        "temperature": 0.3
      }
    },
    {
      "id": "end",
      "type": "end",
      "data": {
        "outputs": {
          "article": "{{polish.output}}"
        }
      }
    }
  ],
  "edges": [
    { "source": "start", "target": "outline" },
    { "source": "outline", "target": "write_loop" },
    { "source": "write_loop", "target": "polish" },
    { "source": "polish", "target": "end" }
  ]
}

Step 2: Load in Editor

import { FlowGramEditor } from '@flowgram.ai/editor';

function App() {
  return (
    <FlowGramEditor
      initialWorkflow={workflowJson}
      layout="free"
      onExecute={async (nodeId, inputs) => {
        // Custom execution logic
        if (nodeId === 'outline') {
          const response = await fetch('/api/llm', {
            method: 'POST',
            body: JSON.stringify(inputs)
          });
          return response.json();
        }
      }}
    />
  );
}

Step 3: Custom Execution Backend

FlowGram's frontend editor handles visual display, actual execution requires you to implement backend logic:

// runtime/executor.ts
import { WorkflowRuntime } from '@flowgram.ai/runtime';

const runtime = new WorkflowRuntime({
  // Register custom node executors
  executors: {
    llm: async (node, inputs) => {
      const { model, prompt, temperature } = node.data;
      const response = await openai.chat.completions.create({
        model,
        messages: [{ role: 'user', content: prompt }],
        temperature,
      });
      return { output: response.choices[0].message.content };
    },
    code: async (node, inputs) => {
      const { language, code } = node.data;
      // Execute user code safely (use sandbox in production)
      const fn = new Function('inputs', code);
      return fn(inputs);
    },
    http: async (node, inputs) => {
      const { url, method, headers } = node.data;
      const response = await fetch(url, { method, headers });
      return response.json();
    },
  },
});

// Execute workflow
const result = await runtime.execute(workflowJson, {
  topic: 'AI Agent Trends'
});
console.log(result.article);

Code Integration: Embed in Your React App

FlowGram's greatest value lies in its embeddability. You can integrate it into any React app, rather than having to use a standalone workflow platform.

Basic Integration

import { FlowGramEditor } from '@flowgram.ai/editor';
import '@flowgram.ai/editor/dist/style.css';

function WorkflowBuilder() {
  const [workflow, setWorkflow] = useState(initialWorkflow);

  return (
    <div style={{ height: '100vh' }}>
      <FlowGramEditor
        workflow={workflow}
        onChange={setWorkflow}
        layout="free"
        // Custom node panels
        nodePanels={{
          myCustomNode: MyCustomNodePanel,
        }}
        // Custom toolbar
        toolbar={[
          'undo', 'redo', '|',
          'zoomIn', 'zoomOut', 'fitView', '|',
          'execute', 'save',
        ]}
      />
    </div>
  );
}

Custom Node Types

Create your own node types to extend workflow capabilities:

// nodes/DatabaseQueryNode.ts
import { defineNode } from '@flowgram.ai/node-engine';

export const DatabaseQueryNode = defineNode({
  type: 'database-query',
  label: 'Database Query',
  icon: 'database',
  // Input port definitions
  inputs: {
    sql: { type: 'string', label: 'SQL Statement' },
    params: { type: 'object', label: 'Parameters' },
  },
  // Output port definitions
  outputs: {
    rows: { type: 'array', label: 'Query Results' },
    count: { type: 'number', label: 'Row Count' },
  },
  // Configuration form
  form: {
    fields: [
      {
        key: 'database',
        type: 'select',
        label: 'Database',
        options: ['mysql', 'postgresql', 'sqlite'],
      },
      {
        key: 'timeout',
        type: 'number',
        label: 'Timeout (ms)',
        default: 5000,
      },
    ],
  },
  // Execution logic
  execute: async (inputs, config) => {
    const { sql, params } = inputs;
    const { database, timeout } = config;
    const result = await queryDatabase(database, sql, params, timeout);
    return {
      rows: result.rows,
      count: result.rows.length,
    };
  },
});

Integration with Next.js

FlowGram provides official Next.js examples (demo-nextjs), supporting SSR and API Routes:

// pages/api/execute-workflow.ts
import { WorkflowRuntime } from '@flowgram.ai/runtime';
import type { NextApiRequest, NextApiResponse } from 'next';

const runtime = new WorkflowRuntime({
  executors: {
    // Register all node executors
    llm: async (node, inputs) => { /* ... */ },
    'database-query': async (node, inputs) => { /* ... */ },
  },
});

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { workflow, inputValues } = req.body;
  const result = await runtime.execute(workflow, inputValues);
  res.json({ success: true, data: result });
}

Use Cases

FlowGram is particularly suitable for these scenarios:

1. Building AI Workflow Products

If you want to build a workflow platform like Coze or Dify, FlowGram provides a ready-made frontend engine. You only need to: - Design your own backend API - Implement node execution logic - Customize UI theme

Real case: Coze Studio (Coze's open source version) is built on FlowGram.

2. Enterprise Internal Automation Platform

Enterprises often have various approval flows, data processing flows. Using FlowGram, you can build a visual process configuration platform where business personnel can configure automation flows by dragging nodes, without developer intervention.

3. AI Agent Orchestration

Collaboration between multiple AI Agents can be expressed as workflows. Each Agent is a node, data passing between Agents defined through connections. FlowGram's variable scope chain is particularly suitable for managing context passing between Agents.

4. Data Processing Pipelines

ETL flows, data cleaning pipelines, report generation scenarios can all be built visually with FlowGram. Each data processing step is a node, data flows between nodes.

5. Workflow Module for Low-Code Platforms

If you're building a low-code/no-code platform, workflow orchestration is a core feature. FlowGram can be directly embedded in your platform as a workflow module.

Limitations and Considerations

Current Limitations

1. Pure Frontend Framework, No Backend

FlowGram only provides the frontend canvas and editor, no backend services. You need to implement: - Workflow persistence (store to database) - Node execution engine (server-side execution) - User authentication and permissions - API interfaces

This is significant work for small teams.

2. React Binding

FlowGram is deeply bound to React, cannot be used in Vue, Angular, or Svelte projects. If your tech stack isn't React, you need to evaluate migration costs.

3. Documentation Still Being Improved

While core features are documented, some advanced features (like custom plugins, complex variable types) lack detailed documentation, requiring source code reading.

4. Community Ecosystem Still Early

Compared to n8n (59k stars) and Dify (67k stars), FlowGram's community scale is still small. Third-party node materials, tutorials, and cases are relatively limited.

Production Environment Recommendations

• Use sandbox execution for code nodes: User-submitted code must run in secure sandboxes to prevent malicious code from affecting servers
• Paginate large workflows: Workflows with 500+ nodes should render in pages to avoid canvas lag
• Version management: Workflow JSON should have version control, supporting rollback
• Execution logs: Record each execution's node inputs/outputs for troubleshooting

FAQ

What's the relationship between FlowGram and Coze?

FlowGram is the open source version of Coze's workflow editor frontend engine. Coze = FlowGram + backend services + user interface. FlowGram provides underlying capabilities like canvas, nodes, variables—you need to implement backend logic yourself.

Can FlowGram be used directly as a workflow platform?

Not directly. FlowGram is a development framework, not a ready-made platform. You need to develop your own workflow application based on it, implementing backend execution engines and data persistence. If you want to use a workflow platform directly, recommend n8n or Dify.

Which frontend frameworks does FlowGram support?

Currently only supports React. FlowGram's canvas engine, node components, and form system are all built on React. Vue, Angular, and other frameworks are not yet supported.

How to customize node types?

Define node types, input/output ports, configuration forms, and execution logic through the defineNode API. Custom nodes can be packaged as plugins and published for other projects. See the official documentation's Materials chapter.

Can FlowGram workflows be exported/imported?

Yes. Workflows are described in JSON format, supporting serialization and deserialization. You can store workflow JSON in databases or export as files for sharing. Import by passing JSON to the editor's workflow property.

Summary

FlowGram is ByteDance's important open source contribution in the AI workflow space. It has opened Coze's production-grade workflow engine to the community, enabling developers to quickly build their own visual workflow products.

Strengths: - Dual layout modes (free + fixed) are flexible and powerful - Variable scope chain design is sophisticated, data flow is clear - MIT license, commercially friendly - Production-grade validation from Coze, high code quality - Built-in LLM, condition, code, and other AI materials

Weaknesses: - Pure frontend framework, backend must be implemented yourself - Only supports React - Community ecosystem still early - Some advanced feature documentation incomplete

Who it's for: - Teams building workflow products - AI application developers needing visual orchestration capabilities - Technical teams wanting to build enterprise internal automation platforms

Who it's not for: - Individual users just wanting to automate tasks with workflows (recommend n8n) - Teams not using React tech stack - Those needing out-of-the-box full-stack AI platforms (recommend Dify)

FlowGram's value lies in empowerment—it doesn't replace your product, it helps you build products faster. If you're working on a project requiring workflow orchestration, FlowGram is worth serious evaluation.

---

Reference Links: - GitHub Repository: bytedance/flowgram.ai - Official Documentation: flowgram.ai - Online Demo: CodeSandbox | StackBlitz