bytedance-flowgram

FlowGram.AI

FlowGram is a node-based flow building engine that helps developers quickly create workflows in either fixed layout or free connection layout modes. It provides a set of interaction best practices and is particularly suitable for visual workflows with clear inputs and outputs.

In the current AI boom, we are also focusing on how to empower workflows with AI capabilities, hence the AI suffix in our name.

[](https://github.com/bytedance/flowgram.ai/blob/main/LICENSE) [](https://www.npmjs.com/package/@flowgram.ai/editor)

📖 Documentation

• Official Documentation
• Contributing Guidelines

📦 Packages

Package	Description	Version
@flowgram.ai/create-app	App Creator
@flowgram.ai/fixed-layout-editor	Fixed Layout Editor
@flowgram.ai/free-layout-editor	Free Layout Editor

🎮 Examples

Fixed Layout

Fixed layout where nodes can be dragged to specified positions, with support for compound nodes like branches and loops.

Free Layout

Free layout where nodes can be moved anywhere and connected through free-form lines.

🚀 Getting Started

# create demo
npx @flowgram.ai/create-app@latest

# select demo
- fixed-layout # full-feature overview
- free-layout # full-feature overview
- fixed-layout-simple # basic usage
- free-layout-simple # basic usage

🔨 Development

1. Install Node.js 18+

   nvm install lts/hydrogen
   nvm alias default lts/hydrogen # set default node version
   nvm use lts/hydrogen
   

2. Clone the repository

   git clone git@github.com:bytedance/flowgram.ai.git
   

3. Install required global dependencies

   npm i -g pnpm@9.12.0 @microsoft/rush@5.140.0
   

4. Install project dependencies

   rush update
   

5. Build the project

   rush build
   

6. Run docs or demo

   rush dev:docs # docs
   rush dev:demo-fixed-layout
   rush dev:demo-free-layout
   

After that, you can start to develop projects inside this repository.

Enjoy it!

🌟 Contributors