mirror of
https://gitee.com/ByteDance/flowgram.ai.git
synced 2025-07-07 17:43:29 +08:00
dc5e7eb023
* feat(free-container-plugin): add sub-canvas background support with inversify - Add inversify dependency injection support for sub-canvas background - Use useService to get BackgroundConfig from IoC container - Support all background options: backgroundColor, dotColor, dotSize, etc. - Add graceful fallback when BackgroundConfig is not registered - Generate unique SVG pattern IDs to avoid conflicts - Remove hardcoded background color from styles - Add @flowgram.ai/background-plugin dependency The sub-canvas now automatically inherits background configuration from the main canvas. * feat(background-plugin): export BackgroundConfig and bind to IoC container - Export BackgroundConfig symbol for use by other plugins - Add onBind method to register BackgroundConfig in IoC container - Enable dependency injection pattern for background configuration access This allows sub-canvas components to access background configuration through inversify container. * chore: update pnpm-lock.yaml after adding background-plugin dependency - Update lock file to include @flowgram.ai/background-plugin dependency - Ensures consistent dependency versions across environments --------- Co-authored-by: husky-dot <xiaozhi@172-0-8-36.lightspeed.rcsntx.sbcglobal.net>
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.
📖 Documentation
📦 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 where nodes can be dragged to specified positions, with support for compound nodes like branches and loops.
🚀 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
- Install Node.js 18+
nvm install lts/hydrogen
nvm alias default lts/hydrogen # set default node version
nvm use lts/hydrogen
- Clone the repository
git clone git@github.com:bytedance/flowgram.ai.git
- Install required global dependencies
npm i -g pnpm@9.12.0 @microsoft/rush@5.140.1
- Install project dependencies
rush install
- Build the project
rush build
- 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
🌟 Contact us
- Issues: Issues
- Lark: Scan the QR code below with Register Feishu to join our FlowGram user group.
