FlowGram - ByteDance's open-source visual workflow building engine

What is FlowGram?

FlowGram is an open-source, node-editable visual workflow building engine developed by ByteDance. It helps developers quickly construct workflows with fixed or free-connection layouts. It supports two layout modes: fixed layout, suitable for sequential workflows and decision trees, providing hierarchical structures and flexible branches and composite nodes; and free layout, supporting free node positioning and manual connections, suitable for network diagrams and mind maps, and supporting features such as alignment and automatic layout. FlowGram offers rich interactive features, such as animated transitions, gesture zooming, undo and redo, and can export workflows as images or code.

FlowGram's main functions

• Dual layout mode
  • Fixed layoutThe nodes are constrained within a preset grid, making it suitable for scenarios with standardized processes and clear hierarchies, such as enterprise approvals and order processing. It can also automatically generate code skeletons.
  • Free layoutThe node positions are more flexible, and the connecting lines are free, making it suitable for scenarios such as mind maps and algorithm prototypes. It can achieve real-time two-way synchronization between flowcharts and code.
• Interactive functions
  • Provides motion animations to allow for transitions between node changes.
  • It supports modularity and allows for grouping and branch folding.
  • It provides batch operations, such as selecting and dragging, and batch copying and pasting.
  • Supports layout switching, including horizontal/vertical mode switching.
  • Layout assistance features, such as guides, snap alignment, automatic organization, and thumbnails.
• AI empowerment
  • It has intelligent suggestion capabilities, such as recommending possible next steps when performing data cleaning.
  • It can perform risk prediction and intercept up to 83% of type errors and 64% of potential infinite loop risks during the process testing phase.
  • Once the process is set up, documentation can be generated automatically.
• Scalability
  • It provides core components such as a canvas engine, node engine, and variable engine, allowing developers to build their own business logic and custom nodes on top of these.
  • By extending the canvas's interactive layers and implementing IOC dependency injection, developers can listen for the node data they want through dependency injection.
  • The variable engine has scope constraint capabilities, and many of its internal functions are available as plug-ins.
• Export functionWorkflows can be exported as images or code.

FlowGram's technical principles

• Canvas Engine: Responsible for document management, node rendering, and user interaction, such as drag and drop, zooming, etc., providing the foundation for fixed layout and free layout.
• Node EngineManage node data, support form rendering, validation and dynamic form rendering, and enable complex node configuration.
• Variable EngineManages data flow between nodes, using scope and type management, and uses an abstract syntax tree (AST) to represent variables and their relationships.
• Plugin SystemThe editor's functionality can be extended through a modular architecture, and different plugins can be registered for different layout types.
• A self-developed rendering engine based on CanvasOptimized for flowcharts, it supports a large number of nodes (200+ nodes maintaining 60FPS), and adopts data partitioning similar to ECS and a responsive mechanism of MobX to ensure efficient rendering.
• Web Worker ParallelizationMove time-consuming calculations to a background thread to avoid blocking the main thread and maintain UI responsiveness.
• Smart cachingIncreases loading speed by 40%, enabling large projects to open quickly.
• ECS architectureThe Entity Component System (ECS) architecture is adopted to decouple data (components) from entities, thereby improving performance and scalability.
• Dependency Injection (IOC)Inversify is used to implement dependency injection, supports dynamic service registration, and facilitates the decoupling of plugin architecture and components.

FlowGram project address

• Project official website:flowgram.ai
• Github repository:https://github.com/bytedance/flowgram.ai

Application scenarios of FlowGram

• project managementSuitable for standardized business processes, such as enterprise approval processes and order processing processes. A fixed layout clearly displays the steps and division of labor for tasks, ensuring the standardization and consistency of the process.
• Software developmentSuitable for scenarios such as algorithm prototyping and code flowchart drawing. Nodes can be placed arbitrarily, connections can be drawn freely, and real-time bidirectional synchronization between flowcharts and code is supported.
• Teaching demonstrationTeachers can use node-based workflows to explain complex concepts, such as algorithm logic and data processing flow, and export the flowcharts to share with students to help them better understand and learn.
• Enterprise Process AutomationIn enterprises, fixed layouts can be used to build decision trees, automate tasks, reduce the error rate of manual operations, and improve processing speed.
• AI and machine learningSuitable for building complex AI bot dialogue logic, tool call flows, etc. Its flexible layout allows it to adapt to complex calls involving multiple model combinations.