What is FlowGram
FlowGram is an open-source node-editing-based visual workflow building engine from ByteDance that helps developers quickly build workflows with fixed layouts or free-connection layouts. It supports two layout modes: fixed layout is suitable for sequential workflows and decision trees, providing a hierarchical structure and flexible branching and composite nodes; free layout supports free node positioning and manual connections, is suitable for network diagrams and mind maps, and supports alignment, automatic layout, and other features. FlowGram provides rich interactive features, such as animated transitions, gesture zooming, undo/redo, and more, and can export workflows as images or code.
FlowGram's main features
- Dual layout modes
- Fixed layout: Nodes are constrained to a preset grid, suitable for scenarios with standardized processes and clear hierarchies, such as enterprise approvals and order processing, and can also automatically generate code skeletons.
- Free layout: Node positions are more flexible and connections are free, suitable for scenarios such as mind maps and algorithm prototypes, and can achieve real-time bidirectional synchronization between flowcharts and code.
- Interactive features
- Provides Motion animations, giving node changes a transitional process.
- Supports modularity, allowing grouping and branch collapsing.
- Provides batch operations, such as box-select dragging and batch copy-paste.
- Supports layout switching, including horizontal/vertical mode switching.
- Auxiliary layout features, such as reference lines, snapping alignment, automatic organization, and thumbnails.
- AI empowerment
- Has intelligent suggestion capabilities, for example, when working on a data cleaning node, it can recommend possible next operations.
- Can perform risk prediction, intercepting up to 83% of type errors and 64% of potential infinite loop risks during the process testing stage.
- A built process can automatically generate documentation.
- Extensibility
- Provides core components such as the canvas engine, node engine, and variable engine, on top of which developers can build their own business logic and custom nodes.
- Extensibility is achieved by layering canvas interactions and IOC dependency injection, and developers can listen to the node data they want through dependency injection.
- The variable engine has scope constraint capabilities, and many of its internal features are exposed in a plugin-based form.
- Export functionality: Workflows can be exported as images or code.
FlowGram's technical principles
- Canvas Engine: Responsible for document management, node rendering, and user interaction, such as dragging and zooming, providing the foundation for fixed layout and free layout.
- Node Engine: Manages node data, supports form rendering, validation, and dynamic form rendering, and enables complex node configuration.
- Variable Engine: Manages data flow between nodes, uses scope and type management, and uses an abstract syntax tree (AST) to represent variables and their relationships.
- Plugin System: Expands editor functionality through a modular architecture, and different layout types can register different plugins.
- Canvas-based self-developed rendering engine: Optimized for flowcharts, supports a large number of nodes (maintains 60FPS with 200+ nodes), and uses ECS-like data partitioning and a MobX-like reactive mechanism to ensure efficient rendering.
- Web Worker Parallelization: Move time-consuming computations to background threads to avoid blocking the main thread and keep the interface responsive.
- Intelligent Caching: Increases loading speed by 40%, enabling large projects to open quickly.
- ECS Architecture: Adopts an Entity Component System (ECS) architecture to decouple data (components) from entities, improving performance and scalability.
- Dependency Injection (IOC): Uses Inversify to implement dependency injection, supports dynamic service registration, and facilitates plugin architecture and component decoupling.
FlowGram's project address
- Project Official Website：flowgram.ai
- Github Repository：https://github.com/bytedance/flowgram.ai
FlowGram's Application Scenarios
- Project Management: Suitable for standardized business processes, such as enterprise approval processes, order processing processes, etc. Through fixed layouts, the steps and division of tasks can be clearly displayed, ensuring the standardization and consistency of the process.
- Software Development: Suitable for scenarios such as algorithm prototyping and code flowchart drawing. Nodes can be placed arbitrarily, and connections can be drawn freely, supporting real-time bidirectional synchronization between flowcharts and code.
- Teaching Demonstrations: Teachers can use node-based workflows to explain complex concepts, such as algorithm logic, data processing flows, etc., and export flowcharts to share with students, helping students better understand and learn.
- Enterprise Process Automation: In enterprises, fixed layouts can be used to build decision trees, automate tasks, etc., reducing the error rate of manual operations and improving processing speed.
- AI and Machine Learning: Suitable for building complex AI Bot conversation logic, tool invocation processes, etc. The flexibility of free layouts enables it to adapt to complex invocations combining multiple models.