Introduction
FlowGram is a node-based flow building engine that helps developers quickly create workflows in either fixed layout or free connection layout modes, providing a set of interactive best practices. It's particularly suitable for visual workflows with clear inputs and outputs.
In today's AI-driven era, we are focusing more on how to empower workflows with AI, hence the AI suffix in our name.
FlowGram = Flow + Program, suggesting that flows are like programs, with Condition, Loop, and even TryCatch nodes.
Official Demo
Fixed layout with nodes/branches supporting specified position drag and drop, offering compound nodes like branches and loops
Free layout where nodes can be moved to any position and connected through free connections
Interactive Experience
Providing a set of interactive best practices for smoother workflow operations
| Motion Transitions | Motion animations in web applications can be traced back to Material Design, which suggests that element changes in width, height, or position need a transition process. The canvas engine separates the drawing of lines and nodes, greatly reducing the cost of implementing motion transitions  |
| Touchpad Gesture Zoom + Space Key Canvas Drag | Gestures refer to Mac touchpad two-finger spread/pinch for canvas zoom in/out, or holding space to drag the canvas, interactions inspired by Sketch and Figma  |
| 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) |  |
