# FlowGram — Extensible Workflow Development Framework by ByteDance

> An open-source framework for building visual workflow editors and AI workflow platforms, with built-in canvas, form, variable, and material systems.

## Install

Save as a script file and run:

# FlowGram — Extensible Workflow Development Framework by ByteDance

## Quick Use
```bash
npx create-flowgram-app my-workflow
cd my-workflow
npm install && npm run dev
# Open http://localhost:3000 to see the visual workflow editor
```

## Introduction
FlowGram is an open-source framework from ByteDance for building visual workflow editors. It provides the core building blocks (canvas, node system, forms, variables, materials) so developers can create AI workflow platforms without implementing low-level graph rendering from scratch.

## What FlowGram Does
- Provides a React-based visual canvas for building node-based workflow editors
- Includes a built-in variable system for passing data between workflow nodes
- Ships with form components for configuring node properties
- Supports both fixed-layout and free-layout canvas modes
- Offers a material system for registering custom node types and components

## Architecture Overview
FlowGram is built on React and uses a layered architecture. The canvas layer handles node rendering, edge routing, and viewport management. Above that, a data layer manages the workflow graph, variable bindings, and execution state. The material system lets developers register custom node types with their own UI, validation logic, and execution behavior. Everything is extensible through a plugin architecture.

## Self-Hosting & Configuration
- Scaffold a new project with the official CLI or add FlowGram to an existing React app
- Requires React 18+ and Node.js 18+
- Register custom node types through the material system API
- Configure canvas layout mode (fixed or free) based on your use case
- Extend with plugins for undo/redo, minimap, zoom controls, and export

## Key Features
- Production-tested at ByteDance across multiple internal AI workflow products
- Two canvas modes: fixed-layout for structured pipelines and free-layout for flexible graphs
- Built-in variable system handles data flow between nodes without custom wiring
- Material system enables rapid development of domain-specific node types
- Lightweight core with optional plugins for common features

## Comparison with Similar Tools
- **React Flow** — generic graph rendering vs. opinionated workflow framework with variables and forms
- **n8n** — complete workflow automation platform vs. embeddable framework for building your own
- **Node-RED** — standalone flow editor vs. developer framework for custom workflow UIs
- **LangFlow** — LangChain-specific visual builder vs. general-purpose workflow framework

## FAQ
**Q: Is FlowGram only for AI workflows?**
A: No. While it was designed with AI workflows in mind, the framework is general-purpose and can be used for any node-based visual editor.

**Q: Can I use it outside of React?**
A: Currently FlowGram is React-only. The core architecture could theoretically support other frameworks but no official adapters exist.

**Q: How does the variable system work?**
A: Variables are defined at the workflow level and can be read or written by any node. The system tracks dependencies and ensures data flows correctly between connected nodes.

**Q: Is it production-ready?**
A: Yes. FlowGram powers several internal tools at ByteDance and is maintained as an active open-source project.

## Sources
- https://github.com/bytedance/flowgram.ai
- https://flowgram.ai/

---
Source: https://tokrepo.com/en/workflows/asset-dc641792
Author: Script Depot