base on FlowGram is a node-based flow building engine that helps developers quickly create workflows in either fixed layout or free connection layout modes # 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. <div align="center"> [](https://github.com/bytedance/flowgram.ai/blob/main/LICENSE) [](https://www.npmjs.com/package/@flowgram.ai/editor) </div> ## 📖 Documentation - [Official Documentation](https://flowgram.ai/) - [Contributing Guidelines](https://github.com/bytedance/flowgram.ai/blob/main/CONTRIBUTING.md) ## 📦 Packages | Package | Description | Version | |---------------------------------------------------------------------------|---------------------|---------------------------------------------------------------------------------------------------------------------------------------------| | [@flowgram.ai/create-app](./apps/create-app) | App Creator | [](https://www.npmjs.com/package/@flowgram.ai/create-app) | | [@flowgram.ai/fixed-layout-editor](./packages/client/fixed-layout-editor) | Fixed Layout Editor | [](https://www.npmjs.com/package/@flowgram.ai/fixed-layout-editor) | | [@flowgram.ai/free-layout-editor](./packages/client/free-layout-editor) | Free Layout Editor | [](https://www.npmjs.com/package/@flowgram.ai/free-layout-editor) | ## 🎮 Examples <div> <p> <a href="https://flowgram.ai/examples/fixed-layout/fixed-feature-overview.html"> Fixed Layout </a> </p> <p> Fixed layout where nodes can be dragged to specified positions, with support for compound nodes like branches and loops. </p> <p> <img src="./apps/docs/src/public/fixed-layout/fixed-layout-demo.gif"/> </p> </div> <div> <p> <a href="https://flowgram.ai/examples/free-layout/free-feature-overview.html"> Free Layout </a> </p> <p> Free layout where nodes can be placed anywhere and connected using free-form lines. </p> <p> <img src="./apps/docs/src/public/free-layout/free-layout-demo.gif"/> </p> </div> ## 🚀 Getting Started ```sh # 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+** ``` bash nvm install lts/hydrogen nvm alias default lts/hydrogen # set default node version nvm use lts/hydrogen ``` 2. **Clone the repository** ``` bash git clone [email protected]:bytedance/flowgram.ai.git ``` 3. **Install required global dependencies** ``` bash npm i -g [email protected] @microsoft/[email protected] ``` 4. **Install project dependencies** ``` bash rush update ``` 5. **Build the project** ``` bash rush build ``` 6. **Run docs or demo** ``` bash 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  ## 🌟 Contributors [](https://github.com/bytedance/flowgram.ai/graphs/contributors) ## 🌟 Contact us - Issues: [Issues](https://github.com/bytedance/flowgram.ai/issues) - Lark: Scan the QR code below with [Register Feishu](https://www.feishu.cn/en/) to join our FlowGram user group. <img src="./apps/docs/src/public/lark-group.png" width="200"/> ", Assign "at most 3 tags" to the expected json: {"id":"13877","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"