[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73498":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":45,"readmeContent":46,"aiSummary":47,"trendingCount":16,"starSnapshotCount":16,"syncStatus":48,"lastSyncTime":49,"discoverSource":50},73498,"flowgram.ai","bytedance\u002Fflowgram.ai","bytedance","FlowGram is an extensible workflow development framework with built-in canvas, form, variable, and materials that helps developers build AI workflow platforms faster and simpler.","https:\u002F\u002Fflowgram.ai",null,"TypeScript",8105,728,70,62,0,7,28,87,21,101.29,"MIT License",false,"main",true,[27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"ai","automation","coze","data-flow","diagram","flow","flowchart","graph","integration-framework","javascript","no-code","node-based-ui","react","typescript","typescript-library","visualization","workflow","workflow-automation","2026-06-12 04:01:09","![Image](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F4f9dfa0e-e600-4d4e-9e73-c919184f7573)\n\n\u003Cdiv align=\"center\">\n\n[![License](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fbytedance\u002Fflowgram.ai)](https:\u002F\u002Fgithub.com\u002Fbytedance\u002Fflowgram.ai\u002Fblob\u002Fmain\u002FLICENSE) [![@flowgram.ai\u002Feditor](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F%40flowgram.ai%2Fcore)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@flowgram.ai\u002Feditor) [![Ask DeepWiki](https:\u002F\u002Fdeepwiki.com\u002Fbadge.svg)](https:\u002F\u002Fdeepwiki.com\u002Fbytedance\u002Fflowgram.ai) [![juejin](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fjuejin-FFFFFF?logo=juejin&logoColor=%23007FFF)](https:\u002F\u002Fjuejin.cn\u002Fcolumn\u002F7479814468601315362)\n\n[![](https:\u002F\u002Ftrendshift.io\u002Fapi\u002Fbadge\u002Frepositories\u002F13877)](https:\u002F\u002Ftrendshift.io\u002Frepositories\u002F13877)\n\n\u003C\u002Fdiv>\n\n# FlowGram｜Workflow development framework\n\n[English](README.md) | [中文](README_ZH.md) | [Español](README_ES.md) | [Русский](README_RU.md) | [Português](README_PT.md) | [Deutsch](README_DE.md) | [日本語](README_JA.md)\n\nFlowGram is a composable, visual, easy-to-integrate, and extensible workflow development framework & toolkit.\nOur goal is to help developers build AI workflow platforms **faster** and **simpler**.\nFlowGram comes with a suite of built-in tools for workflow development: flow canvas, node configuration form, variable scope chain, and ready-to-use materials (LLM, Condition, Code Editor etc). It’s not a ready-made workflow platform; it’s the framework and toolkit to build yours.\n\nLearn more at [FlowGram.AI 🌐](https:\u002F\u002Fflowgram.ai)\n\n## 🎬 Demo\n\n\u003Chttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Ffee87890-ceec-4c07-b659-08afc4dedc26>\n\nOpen in [CodeSandbox 🌐](https:\u002F\u002Fcodesandbox.io\u002Fp\u002Fgithub\u002Flouisyoungx\u002Fflowgram-demo\u002Fmain) or [StackBlitz 🌐](https:\u002F\u002Fstackblitz.com\u002F~\u002Fgithub.com\u002Flouisyoungx\u002Fflowgram-demo)\n\nIn this demo, we iterate through a list of cities, fetch real-time weather via HTTP, parse temperatures with a Code node, generate outfit suggestions with an LLM, gate by a Condition, aggregate results across the loop, and finally use an Advisor LLM to pick the most comfortable city before sending the result to the End node.\n\n## 🚀 Quick Start\n\n1. Create a new FlowGram project:\n\n```sh\nnpx @flowgram.ai\u002Fcreate-app@latest\n```\n\n> We recommend choosing the `Free Layout Demo ⭐️` template.\n\n2. Start the project:\n\n```sh\ncd demo-free-layout\nnpm install\nnpm start\n```\n\n3. Open [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000) in your browser.\n\n## ✨ Features\n\n| Feature                                                                                      | Description                                                                                                                                                                                               | Demo                                                                                         |\n| -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |\n| [Free Layout Canvas](https:\u002F\u002Fflowgram.ai\u002Fexamples\u002Ffree-layout\u002Ffree-feature-overview.html)    | Free layout canvas where nodes can be placed anywhere and connected using free-form lines.                                                                                                                | ![Free Layout Demo](.\u002Fapps\u002Fdocs\u002Fsrc\u002Fpublic\u002Ffree-layout\u002Ffree-layout-demo.gif)                 |\n| [Fixed Layout Canvas](https:\u002F\u002Fflowgram.ai\u002Fexamples\u002Ffixed-layout\u002Ffixed-feature-overview.html) | Fixed layout canvas where nodes can be dragged to specified positions, with support for compound nodes like branches and loops.                                                                           | ![Fixed Layout Demo](.\u002Fapps\u002Fdocs\u002Fsrc\u002Fpublic\u002Ffixed-layout\u002Ffixed-layout-demo.gif)              |\n| [Form](https:\u002F\u002Fflowgram.ai\u002Fexamples\u002Fnode-form\u002Fbasic.html)                                    | The form engine manages the CRUD operations of node data and provides rendering, validation, side effects, linkage, and error-capturing capabilities, simplifying the development of node configurations. | ![Form](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F13e9b4cd-e993-4d21-901c-fb6cf106de78)     |\n| [Variable](https:\u002F\u002Fflowgram.ai\u002Fguide\u002Fvariable\u002Fbasic.html)                                    | The variable engine supports scope constraints, variable structure inspection, and type inference, making it easy to manage data flow within the workflow.                                                | ![Variable](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F442006db-25e3-4fb5-972c-7a0545638ff5) |\n\n\n## 📖 Documentation\n\nYou can find the FlowGram documentation [on the website](https:\u002F\u002Fflowgram.ai).\n\nThe documentation is divided into several sections:\n\n- [Quick Start](https:\u002F\u002Fflowgram.ai\u002Fguide\u002Fgetting-started\u002Fintroduction.html)\n- [Canvas](https:\u002F\u002Fflowgram.ai\u002Fguide\u002Ffree-layout\u002Fload.html)\n- [Form](https:\u002F\u002Fflowgram.ai\u002Fguide\u002Fform\u002Fform.html)\n- [Variable](https:\u002F\u002Fflowgram.ai\u002Fguide\u002Fvariable\u002Fbasic.html)\n- [Material](https:\u002F\u002Fflowgram.ai\u002Fmaterials\u002Fintroduction.html)\n- [Runtime](https:\u002F\u002Fflowgram.ai\u002Fguide\u002Fruntime\u002Fintroduction.html)\n- [Advanced Guides](https:\u002F\u002Fflowgram.ai\u002Fguide\u002Fadvanced\u002Fzoom-scroll.html)\n- [API Reference](https:\u002F\u002Fflowgram.ai\u002Fapi\u002Findex.html)\n- [Where to get Support](https:\u002F\u002Fflowgram.ai\u002Fguide\u002Fcontact-us.html)\n- [Contributing Guide](https:\u002F\u002Fflowgram.ai\u002Fguide\u002Fcontributing.html)\n\n## 🙌 Contributors\n\n[![FlowGram.AI Contributors](https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=bytedance\u002Fflowgram.ai)](https:\u002F\u002Fgithub.com\u002Fbytedance\u002Fflowgram.ai\u002Fgraphs\u002Fcontributors)\n\n## 🌍 Adoption\n\n- [Coze Studio](https:\u002F\u002Fgithub.com\u002Fcoze-dev\u002Fcoze-studio) is an all-in-one AI agent development tool. Providing the latest large models and tools, various development modes and frameworks, Coze Studio offers the most convenient AI agent development environment, from development to deployment.\n- [NNDeploy](https:\u002F\u002Fgithub.com\u002FNNDeploy\u002Fnndeploy) is a workflow-based multi-platform ai deployment tool.\n- [Certimate](https:\u002F\u002Fgithub.com\u002Fcertimate-go\u002Fcertimate)  is an open-source SSL certificate management tool that helps you automatically apply for and deploy SSL certificates with a visual workflow. It is one of the ACME client options listed in the official documentation of Let's Encrypt.\n\n## 📬 Contact us\n\n- Issues: [Issues](https:\u002F\u002Fgithub.com\u002Fbytedance\u002Fflowgram.ai\u002Fissues)\n- Lark: Scan the QR code below with [Register Feishu](https:\u002F\u002Fwww.feishu.cn\u002Fen\u002F) to join our FlowGram user group.\n\n\u003Cimg src=\".\u002Fapps\u002Fdocs\u002Fsrc\u002Fpublic\u002Flark-group.png\" width=\"200\"\u002F>\n","FlowGram 是一个可扩展的工作流开发框架，旨在帮助开发者更快更简单地构建AI工作流平台。它提供了内置的流程画布、表单配置、变量作用域链以及即用型材料（如大语言模型、条件判断、代码编辑器等），支持可视化和易于集成的特点。项目采用TypeScript编写，具有良好的扩展性和定制性。适用于需要快速搭建复杂业务逻辑或AI处理流程的应用场景，例如自动化任务处理、数据流管理及基于规则的决策系统等。",2,"2026-06-11 03:45:50","high_star"]