FlowGram is a visual workflow editor framework from ByteDance that provides the building blocks for creating node-based workflow applications in React. The framework offers a full-featured canvas with drag-and-drop node placement, configurable edge connections, minimap navigation, zoom controls, and undo-redo history. Developers define custom node types with their own rendering and configuration panels while FlowGram handles the layout engine, interaction model, and serialization.
The framework supports two primary layout modes: a fixed pipeline layout where nodes flow in a structured top-to-bottom or left-to-right arrangement ideal for sequential workflows, and a free-form canvas mode that allows arbitrary node positioning for complex graph structures. Both modes support conditional branching, parallel execution paths, and nested sub-flows. A plugin system enables adding features like validation, auto-layout algorithms, and custom toolbars.
FlowGram has gained over 7,900 GitHub stars as a production-tested framework powering internal ByteDance workflow tools. It targets developers building AI agent orchestration interfaces, data pipeline designers, chatbot flow builders, and business process automation tools. The project provides TypeScript-first APIs, comprehensive documentation, and example applications demonstrating integration patterns for common workflow editing scenarios.
