Skip to content

FlowGram is a node-based flow building engine that helps developers quickly create workflows in either fixed layout or free connection layout modes

License

Notifications You must be signed in to change notification settings

bytedance/flowgram.ai

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

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.

License @flowgram.ai/editor

๐Ÿ“– Documentation

๐Ÿ“ฆ Packages

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

๐ŸŽฎ 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 placed anywhere and connected using free-form lines.

๐Ÿš€ Getting Started

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

# in PowerShell
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
  1. Clone the repository
git clone git@github.com:bytedance/flowgram.ai.git
  1. Install required global dependencies
npm i -g pnpm@9.12.0 @microsoft/rush@5.140.0
  1. Install project dependencies
rush update
  1. Build the project
rush build
  1. 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!

Stats

Repo Stats

๐ŸŒŸ Contributors

FlowGram.AI Contributors

๐ŸŒŸ Contact us