[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70698":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":25,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":39,"readmeContent":40,"aiSummary":41,"trendingCount":16,"starSnapshotCount":16,"syncStatus":42,"lastSyncTime":43,"discoverSource":44},70698,"LogicFlow","didi\u002FLogicFlow","didi","A flow chart editing framework focus on business customization.  专注于业务自定义的流程图编辑框架，支持实现脑图、ER图、UML、工作流等各种图编辑场景。","http:\u002F\u002Flogicflow.cn\u002F",null,"TypeScript",11418,1369,105,124,0,9,38,95,27,44.41,"Apache License 2.0",false,"master",true,[27,28,29,7,30,31,32,33,34,35,36,37,38],"bpmn","diagram","diagramming","flow","flowchart","graph","javascript","javascript-diagramming-library","mvvm","svg","typescript","visualization","2026-06-12 02:02:42","\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fsite.logic-flow.cn\" target=\"_blank\">\n    \u003Cimg\n      src=\"https:\u002F\u002Fsite.logic-flow.cn\u002Flogo.png\"\n      alt=\"LogicFlow logo\"\n      width=\"100\"\n    \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@logicflow\u002Fcore\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@logicflow\u002Fcore\" alt=\"Version\">\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@logicflow\u002Fcore\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@logicflow\u002Fcore\" alt=\"Download\">\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdidi\u002FLogicFlow\u002Fblob\u002Fmaster\u002FLICENSE\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fl\u002F@logicflow\u002Fcore\" alt=\"LICENSE\">\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n简体中文 | [English](\u002FREADME.en-US.md)\n\nLogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和简单灵活的节点自定义、插件等拓展机制，方便我们快速在业务系统内满足类流程图的需求。\n\n## 核心能力\n\n- 可视化模型：通过 LogicFlow 提供的直观可视化界面，用户可以轻松创建、编辑和管理复杂的逻辑流程图。\n- 高可定制性：用户可以根据自己的需要定制节点、连接器和样式，创建符合特定用例的定制逻辑流程图。\n- 灵活易拓展: 内置提供丰富的插件，用户也可根据自身需求定制复杂插件实现业务需求。\n- 自执行引擎: 执行引擎支持浏览器端执行流程图逻辑，为无代码执行提供新思路。\n- 数据可转换：支持 LogicFlow 数据与 BPMN、Turbo 等各种后端执行引擎数据结构转换能力。\n\n## 安装\n\n```shell\n# npm\n$ npm install @logicflow\u002Fcore @logicflow\u002Fextension --save\n\n# yarn\n$ yarn add @logicflow\u002Fcore @logicflow\u002Fextension\n\n# pnpm\n$ pnpm add @logicflow\u002Fcore @logicflow\u002Fextension\n```\n\n## AI 编程支持\n\nLogicFlow 为 AI 编程工具提供了随 npm 包发布的本地文档。`@logicflow\u002Fcore@2.2.2` 及以上版本会包含这些文档。安装或升级后，可以把下面这段提示词复制给你的 AI Agent，让它在实现 LogicFlow 功能前先查官方文档。\n\n更多说明请查看 [AI 编程支持](https:\u002F\u002Fsite.logic-flow.cn\u002Ftutorial\u002Fai)。\n\n```md\n\u003C!-- BEGIN:logicflow-agent-rules -->\n# LogicFlow Agent Rules\n\nLogicFlow documentation is available at:\n\n- `node_modules\u002F@logicflow\u002Fcore\u002Fdist\u002Fdocs\u002F`\n\nPackage roles:\n\n- `@logicflow\u002Fcore`: core graph editor runtime, including canvas, nodes, edges, models, events, rendering, themes, and basic interactions.\n- `@logicflow\u002Fextension`: official plugins for common product features.\n- `@logicflow\u002Flayout`: official layout plugins for automatic graph layout.\n\nThe docs for `@logicflow\u002Fextension` and `@logicflow\u002Flayout` are included under:\n\n- `node_modules\u002F@logicflow\u002Fcore\u002Fdist\u002Fdocs\u002Ftutorial\u002Fextension\u002F`\n\nBefore implementing any LogicFlow feature, check the local docs first to see whether LogicFlow already provides a built-in, extension, or layout capability. If it does, prefer the documented official capability instead of reimplementing it from scratch.\n\nIf an official package is needed but not installed, ask the user before installing it.\n\u003C!-- END:logicflow-agent-rules -->\n```\n\n## 快速上手\n\n```html\n\u003C!-- LogicFlow 容器 DOM-->\n\u003Cdiv id=\"container\">\u003C\u002Fdiv>;\n```\n```typescript\n\u002F\u002F 准备数据\nconst data = {\n  \u002F\u002F 节点\n  nodes: [\n    {\n      id: '21',\n      type: 'rect',\n      x: 100,\n      y: 200,\n      text: '矩形节点',\n    },\n    {\n      id: '50',\n      type: 'circle',\n      x: 300,\n      y: 400,\n      text: '圆形节点',\n    },\n  ],\n  \u002F\u002F 边\n  edges: [\n    {\n      type: 'polyline',\n      sourceNodeId: '50',\n      targetNodeId: '21',\n    },\n  ],\n};\n\u002F\u002F 渲染画布\nconst lf = new LogicFlow({\n  container: document.querySelector('#container'),\n  width: 700,\n  height: 600,\n});\n\nlf.render(data);\n```\n\n## 相关文档\n\n[官方文档](https:\u002F\u002Fsite.logic-flow.cn\u002F)\n\n- [快速上手](https:\u002F\u002Fsite.logic-flow.cn\u002Ftutorial\u002Fget-started)\n- [图表示例](https:\u002F\u002Fsite.logic-flow.cn\u002Fexamples)\n- [相关文章](https:\u002F\u002Fsite.logic-flow.cn\u002Farticle\u002Farchitecture-of-logicflow)\n\n---\n- [更新日志](https:\u002F\u002Fgithub.com\u002Fdidi\u002FLogicFlow\u002Freleases)\n- [issue模板](https:\u002F\u002Fgithub.com\u002Fdidi\u002FLogicFlow\u002Fissues\u002Fnew\u002Fchoose)\n\n## [本地开发](\u002FCONTRIBUTING.md)\n\n```shell\n# 安装项目依赖和初始化构建\n$ pnpm install\n\n# 进入到指定项目开发和调试\ncd packages\u002Fcore\npnpm run build:watch\n\n# 启动 example 查看效果\ncd examples\u002Ffeature-examples\npnpm run start\n```\n\n## 参与共建\n\n如果希望参与到 LogicFlow 的开发中，请遵从我们的[贡献指南](\u002FCONTRIBUTING.md)。如果你贡献度足够活跃，你可以申请成为社区协作者。\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdidi\u002FLogicFlow\u002Fgraphs\u002Fcontributors\">\n\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fdidi\u002FLogicFlow\u002Fmaster\u002FCONTRIBUTORS.svg\" alt=\"Contributors\" \u002F>\n\u003C\u002Fa>\n\n## Star History\n\n\u003Ca href=\"https:\u002F\u002Fwww.star-history.com\u002F#didi\u002FLogicFlow&Date\">\n \u003Cpicture>\n   \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=didi\u002FLogicFlow&type=Date&theme=dark\" \u002F>\n   \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=didi\u002FLogicFlow&type=Date\" \u002F>\n   \u003Cimg alt=\"Star History Chart\" src=\"https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=didi\u002FLogicFlow&type=Date\" \u002F>\n \u003C\u002Fpicture>\n\u003C\u002Fa>\n\n## 开源协议\n\n该项目的代码和文档基于 [Apache-2.0 License](\u002FLICENSE) 开源协议。\n","LogicFlow 是一款专注于业务自定义的流程图编辑框架，支持创建脑图、ER图、UML、工作流等各种图编辑场景。其核心功能包括可视化模型编辑、高度可定制的节点和连接器、灵活的插件扩展机制以及自执行引擎，允许用户在浏览器端直接执行流程逻辑。此外，它还支持与BPMN、Turbo等后端执行引擎的数据结构转换。LogicFlow 适合需要快速集成复杂图形编辑功能的企业级应用开发场景，如项目管理软件、业务流程自动化工具等，能够显著提升开发效率和用户体验。",2,"2026-06-11 03:33:39","high_star"]