#Introduction

FlowGram is a workflow development framework and toolkit. It helps developers build AI workflow platforms faster and more easily. FlowGram comes with a suite of built-in tools for workflow development: visual flow canvas, node configuration forms, variable scope chain, and ready-to-use materials. Use FlowGram to build your own AI workflow platform.

#Why FlowGram

FlowGram was originally designed to build diverse AI workflow platforms within ByteDance. These large-scale workflow platforms often have complex business logic and processes, and building them from scratch is not only time-consuming but also results in high development and maintenance costs.

Many developers initially tried to use mainstream visual graphics libraries to build workflow platforms. However, these general-purpose libraries couldn't solve the core problems of workflow scenarios. Developers still had to handle a series of challenges themselves, such as node data management, dynamic forms, data validation, and variable scope chains. This led to low development efficiency and difficult long-term maintenance.

To address these pain points, we introduced FlowGram, a development framework specifically designed for workflow scenarios, aiming to help developers improve the efficiency and shorten the development cycle of creating workflow platforms. FlowGram provides the following core features:

• Workflow Canvas: Provides visual orchestration for nodes and edges, supporting both free and fixed layouts to easily build complex flowcharts.
• Forms: The form engine manages the CRUD operations of node data and provides rendering, validation, side effects, linkage, and error-capturing capabilities, simplifying the development of node configurations.
• Variables: The variable engine supports scope constraints, variable structure inspection, and type inference, making it easy to manage data flow within the workflow.
• Materials: Offers out-of-the-box components, side effects, and validators that developers can quickly reuse and extend, boosting development efficiency.

By combining these features, developers can focus on implementing business logic, thereby rapidly building full-featured, high-performance AI workflow platforms.

#Next step

Please read Quick start to start using FlowGram.

Welcome to the GitHub Discussions and Discord to communicate with us.

#Appendix: Interactive Experience

FlowGram offers a suite of interactive features designed for a seamless and intuitive workflow-building experience.

Smooth Motion Transitions	FlowGram provides smooth motion transitions for all canvas elements. When nodes are resized or moved, animated transitions create a more natural and intuitive user experience. Our canvas engine is optimized for performance by rendering nodes and edges separately, making these animations fluid and efficient.
Intuitive Canvas Navigation	Navigate the canvas with familiar gestures inspired by professional design tools like Sketch and Figma. Use a two-finger pinch-to-zoom on your touchpad, or simply hold the spacebar and drag to pan across the canvas with ease.
Minimap
Undo/Redo
Copy/Paste (Shortcut Support)
Box Selection + Drag and Drop (Fixed)
Horizontal/Vertical Layout Switch (Fixed)
Branch Folding (Fixed)
Grouping (Fixed)
Auto Layout (Free)
Snap Alignment + Guidelines (Free)
Coze Loop Sub-canvas (Free)