FlowGram.AI: An Open Source Engine for Rapidly Creating Nodal Workflows

General Introduction

Flowgram.ai is an open source process building engine developed by ByteDance. It is based on node editing and helps developers quickly create workflows, supporting both fixed layout and free-wire modes. The project is written in TypeScript, the code is hosted on GitHub, open source and free of charge, and was last updated on March 26, 2025. flowgram.ai provides an intuitive interface and a smooth interactive experience suitable for designing visual workflows with clear inputs and outputs. It also plans to incorporate AI capabilities to enhance process intelligence. Users can experience it online through the official demo or install it locally.

Function List

• Node Editor: Drag and drop nodes and connectivity to quickly build workflows.
• Dual mode support: Provides both fixed layout and free-link editing.
• interactive experience: Supports animated transitions, gesture zoom, undo redo, etc.
• AI Potential: Plan to integrate AI to enhance process intelligence analytics.
• Open Source Extensions: Code disclosure and support for developer customization.
• Export Options: Workflows can be exported as images or code.

Using Help

Flowgram.ai is a developer tool that users can experience through an online demo, or install and run locally. Below is a detailed guide on how to use it.

How to get started

Flowgram.ai offers two ways to use it: online demo and local installation.

Online Experience

1. Open your browser and visit the official Demo:
   • Fixed layout:https://flowgram.ai/examples/fixed-layout/fixed-feature-overview.html
   • Free Connections:https://flowgram.ai/examples/free-layout/free-feature-overview.html
2. You can operate directly on the canvas once you enter, no installation is required.

local installation

1. Preparing the environment::
   • Install Node.js 18+ and run it:nvm install lts/hydrogen, set the default version:nvm alias default lts/hydrogen, switching:nvm use lts/hydrogenThe
   • Install global dependencies:npm i -g pnpm@9.12.0 @microsoft/rush@5.140.0The
2. clone warehouse::
   • Running:git clone git@github.com:bytedance/flowgram.ai.gitThe
3. Installation of dependencies::
   • Go to the folder:cd flowgram.aiThe
   • Update dependencies:rush updateThe
4. Build the project::
   • Running:rush buildThe
5. Run the Demo::
   • Documentation:rush dev:docsThe
   • Fixed Layout Demo:rush dev:demo-fixed-layoutThe
   • Free Connections Demo:rush dev:demo-free-layoutThe
6. Accessed in a browser http://localhost(Port confirmed by log).

Quick Installation via npx

• Running:npx @flowgram.ai/create-app@latestThe
• Select Demo:
  • fixed-layout: Fixed Layout Best Practices.
  • free-layout: Free Layout Best Practices.
  • fixed-layout-simple: Fixed Layout Basic Usage.
  • free-layout-simple: Free Layout Basic Usage.

Installing modules via npm

• Fixed layout editor:npm install @flowgram.ai/fixed-layout-editorThe
• Freelink Editor:npm install @flowgram.ai/free-layout-editorThe

Main function operation flow

Creating Workflows

• Entering the editing interface, the left toolbar displays the node types (e.g., conditional, cyclic).
• Drag the node to the canvas and double-click on the input, e.g. "Start".
• Connect the nodes with arrows to complete the process.

Fixed Layout Mode

• Open the Fixed Layout Demo or run fixed-layoutThe
• Node position is fixed, support drag and drop to specified position.
• Branches and loops can be added, and the right panel adjusts the style.

freewire mode

• Open the Free Link Demo or run free-layoutThe
• The nodes can be placed arbitrarily and the connecting lines are drawn freely.
• Supports automatic organizing and adsorption alignment functions.

interactive function

• Zoom Drag: Two-finger zoom on a Mac trackpad, and press space to drag the canvas.
• animated transition: The lines change smoothly as the nodes move.
• undo: Operate with Ctrl+Z and Ctrl+Y.
• copy and paste: Box the node, Ctrl+C to copy, Ctrl+V to paste.

Featured Functions

dual mode design

Fixed layout is suitable for structured processes, such as project planning, with fixed node positions and support for branching and collapsing. Free linking is suitable for flexible design, such as mind map, node position is arbitrary, free linking.

AI Enablement

Flowgram.ai plans to introduce AI features such as automatic optimization of flow paths. It's currently in development, so keep an eye on GitHub for details.

Open Source Support

Developers can modify the code. For example, to add a new node type, simply edit the @flowgram.ai/free-layout-editor package and submit it.

caveat

• The online demo does not support saving, you need to install it locally to experience the full functionality.
• The first installation of the dependency requires an internet connection and may be slow.
• Official Documentation (https://flowgram.ai/) is continuously updated, refer to GitHub for details. README.mdThe

With these steps, you can quickly build a workflow with Flowgram.ai.

application scenario

1. project management
   Design the task flow with a fixed layout that clearly shows the steps and division of labor.
2. software development
   Draw a flowchart of the code using free-connecting lines to mark the flow of data.
3. Teaching Demonstration
   The teacher explains the concepts using a node-based workflow, which is exported and shared with the students.

QA

1. Is Flowgram.ai free?
   Yes, it is an open source project, the code is free to use and the features need to be deployed on their own.
2. Does it support Chinese?
   The node content supports Chinese input and the interface is in English.
3. How do I save a workflow?
   Online Demo can't be saved, local version can export image or code.