- Category
- Developer Tools
- Rank
- No. 460Tools index
- Pricing
- Open Source
- Type
- TOOL
- Builder
- bytedance
- GitHub
- 8.4k stars
- Latest release
- v1.0.14
- Date
About
ByteDance's extensible workflow development framework with a built-in canvas — node-based primitives for designing AI workflows.
What it does
FlowGram supplies the editing and data-management pieces for building a custom workflow product. Developers can choose free positioning or constrained layouts, configure steps through forms, track variables across scopes, and add materials for language models, conditions, code, loops, and HTTP work.
Why it's ranked here
The case is strong when a team wants to own its workflow product instead of adopting a finished one. Both free and fixed layout modes address distinct editor designs, while forms, variable handling, runtime documentation, and reusable materials cover more than drawing boxes and lines.
What's good
The toolkit joins visual editing with the less visible systems workflow products need. Forms include validation, linked effects, and error capture. Variable handling adds scope constraints, structure inspection, and type inference. Fixed layouts support compound structures such as branches and loops, while free layouts allow arbitrary placement and connections.
Tradeoffs
FlowGram explicitly is not a ready-made workflow platform. Teams must build the surrounding product and decide how its pieces fit their requirements. Its broad exported surface spans rendering, documents, forms, variables, dependency injection, plugins, and layout engines, so adopters should expect meaningful integration work and framework concepts.
How to use it well
Use FlowGram when a TypeScript and React team needs a tailored visual workflow editor and wants control over layout, configuration forms, variables, materials, and runtime integration. Start from the project generator and recommended free-layout template, then narrow the exported surface to product needs. Choose another product if you need an operational workflow platform immediately.
Technical notes+
The public library surface is heavily aggregated through packages/client/editor/src/index.ts, which re-exports core, document, renderer, form, variable, shortcut, node, i18n, and dependency-injection APIs. packages/client/free-layout-editor/src/index.ts and packages/client/fixed-layout-editor/src/index.ts layer specialized editors over that base. The free engine exposes workflow documents, commands, entities, services, and line management from packages/canvas-engine/free-layout-core/src/index.ts; the fixed engine collects branch, loop, try-catch, start, end, slot, and split registries in packages/canvas-engine/fixed-layout-core/src/index.ts. apps/cli/src/index.ts defines project creation, material synchronization and discovery, and version-update commands. apps/create-app/bin/index.js and apps/cli/bin/index.js are Node executable launchers.
Observed
- License
- MIT, identified by SPDX headers in the provided source files.
- Primary language
- TypeScript, with React TSX interfaces and small JavaScript executable launchers.
- Install surface
- npm project generator invoked through npx, followed by npm install and npm start.
- Interfaces
- TypeScript and React libraries plus a command-line interface.
- Layout support
- Separate free-layout and fixed-layout editor packages are exposed.
- CLI scope
- Creates projects, synchronizes materials, finds used materials, and updates framework versions.
Read from README.md, packages/client/editor/src/index.ts, packages/canvas-engine/core/src/index.ts, packages/canvas-engine/document/src/index.ts, packages/canvas-engine/renderer/src/index.ts, packages/client/playground-react/src/index.ts, packages/client/free-layout-editor/src/index.ts, packages/client/fixed-layout-editor/src/index.ts, packages/canvas-engine/free-layout-core/src/index.ts, packages/canvas-engine/fixed-layout-core/src/index.ts, apps/cli/bin/index.js, apps/cli/src/index.ts, apps/docs/theme/index.tsx, apps/demo-vite/src/app.tsx, apps/create-app/bin/index.js.
What it can do
Create AI workflows using visual node-based design
Workflow requirements and logic → Visual workflow diagram with connected nodes
Connect workflow nodes to define data flow
Individual workflow components and connection points → Linked workflow with data paths between nodes
Execute AI workflows on canvas
Configured workflow diagram → Processed data results based on workflow logic
Design custom workflow primitives
Custom logic and parameters → Reusable workflow node components
Extend framework with custom modules
Custom code and integration requirements → Enhanced framework with additional capabilities
Visualize workflow execution paths
Active workflow processes → Real-time visual representation of data flow
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.
