LogicFlow 流程图编辑从空画布到可交互 Demo 的完整路径【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlowLogicFlow 是一个专注业务自定义的流程图编辑框架。本文带你走一遍完整路径克隆仓库、装依赖、打开示例站点再动手改一个节点和一条连线。需要 Node 16 和 pnpm 9其余无需额外配置本地跑起来大约 5 分钟。一、最小启动LogicFlow 本地运行只要 4 步仓库是 pnpm workspace 结构packages/是源码包examples/是一组可以直接跑的示例应用它们通过workspace:*协议引用本地源码所以装一次依赖就能同时跑起所有示例。克隆仓库到本地在根目录用 pnpm 安装依赖启动feature-examples这个示例站点umi 驱动默认端口 8000浏览器打开终端提示的地址git clone https://gitcode.com/GitHub_Trending/lo/LogicFlow cd LogicFlow pnpm install pnpm --filter feature-examples dev你现在会看到站点左侧是「节点」「边」「布局」等菜单点开任意一项右侧出现一个 LogicFlow 画布网格点阵上摆着若干彩色椭圆节点可以拖拽移动、双击编辑文字。二、背后在发生什么可以把画布想象成一块公告板。每个元素都有两份东西板上那张卡片View负责画出来和台账里那行记录Model负责存数据。你拖一个节点其实是先改台账里的坐标卡片再跟着重画双击改文字也是先改记录、再改卡片。台账的核心就在 packages/core/src/model/GraphModel.ts。理解到这一层就够了平时你只需要改数据和配置渲染逻辑会自己跟上所以改配置并不可怕。三、让画布变成你的LogicFlow 自定义节点与连线自定义最高频的就两件事换节点长相、换连线风格。下面两个改动都先跑通再说示例源码在examples/feature-examples里有完整版可以对照。换节点样式注册自定义节点定义一个节点类型register之后addNode时就能像内置节点一样使用import LogicFlow from logicflow/core const lf new LogicFlow({ container }) lf.register(CustomEllipse) // 形状类完整写法见示例源码 lf.addNode({ id: 1, type: customEllipse, x: 150, y: 70, text: ellipse, properties: { rx: 60, ry: 30 }, })完整类定义可以对照 examples/feature-examples/src/pages/nodes/custom/ellipse/index.tsx。改完之后你会看到画布上多出一行椭圆节点和矩形节点一样能被拖拽、选中。换连线风格添加自定义连线继承内置的PolylineEdge只重写样式方法再用setDefaultEdgeType让新连线默认走它import LogicFlow, { PolylineEdge } from logicflow/core class MyEdge extends PolylineEdge { getEdgeStyle() { const style super.getEdgeStyle() style.stroke #409eff return style } } lf.register({ type: myEdge, view: MyEdge }) lf.setDefaultEdgeType(myEdge)改完之后你会看到新拖出来的连线都是蓝色折线已有的连线保持原样。另外说明一下初始化时的grid、isSilentMode、stopScrollGraph这些都是可选项不写就用默认值不必一上来就配全。四、容易卡住的三个点画布一片空白控制台还有加载报错 现象示例页打开后画布区域是白的。 原因示例依赖开发服务器和 workspace 包直接双击 HTML 以file://打开会被浏览器跨域策略拦掉。 绕过方式永远用第一节的命令启动不直接开文件。pnpm install时提示命令不允许 现象安装刚启动就被 preinstall 打断报错大意是只允许用 pnpm。 原因根 package.json 里配置了only-allow pnpm做包管理器校验。 绕过方式用 pnpm 安装可以先npm i -g pnpm或启用 corepack。addNode调用了画布上却看不到节点 现象代码执行没有报错页面却什么都画不出来。 原因容器div没有高度或者没引入基础样式。 绕过方式给容器定一个高度并import logicflow/core/es/index.css。如果你不是在本仓库里跑而是引用了 npm 上的logicflow/*包记得和本文示例的 API 版本对齐版本差异是另一个常见坑。五、接下来可以去看examples/feature-examples/src/pages/nodes/custom想自己画节点形状的人每种形状都有现成示例packages/extension/src/dynamic-group需要容器、自动包围成员这类业务能力的人sites/docs/docs/tutorial想系统过一遍 LogicFlow 配置指南和 API 的人如果上面都跑通了但遇到了本文没覆盖的情况直接去仓库的 Issues 里搜关键词或者新开一个。【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
LogicFlow 流程图编辑：从空画布到可交互 Demo 的完整路径
LogicFlow 流程图编辑从空画布到可交互 Demo 的完整路径【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlowLogicFlow 是一个专注业务自定义的流程图编辑框架。本文带你走一遍完整路径克隆仓库、装依赖、打开示例站点再动手改一个节点和一条连线。需要 Node 16 和 pnpm 9其余无需额外配置本地跑起来大约 5 分钟。一、最小启动LogicFlow 本地运行只要 4 步仓库是 pnpm workspace 结构packages/是源码包examples/是一组可以直接跑的示例应用它们通过workspace:*协议引用本地源码所以装一次依赖就能同时跑起所有示例。克隆仓库到本地在根目录用 pnpm 安装依赖启动feature-examples这个示例站点umi 驱动默认端口 8000浏览器打开终端提示的地址git clone https://gitcode.com/GitHub_Trending/lo/LogicFlow cd LogicFlow pnpm install pnpm --filter feature-examples dev你现在会看到站点左侧是「节点」「边」「布局」等菜单点开任意一项右侧出现一个 LogicFlow 画布网格点阵上摆着若干彩色椭圆节点可以拖拽移动、双击编辑文字。二、背后在发生什么可以把画布想象成一块公告板。每个元素都有两份东西板上那张卡片View负责画出来和台账里那行记录Model负责存数据。你拖一个节点其实是先改台账里的坐标卡片再跟着重画双击改文字也是先改记录、再改卡片。台账的核心就在 packages/core/src/model/GraphModel.ts。理解到这一层就够了平时你只需要改数据和配置渲染逻辑会自己跟上所以改配置并不可怕。三、让画布变成你的LogicFlow 自定义节点与连线自定义最高频的就两件事换节点长相、换连线风格。下面两个改动都先跑通再说示例源码在examples/feature-examples里有完整版可以对照。换节点样式注册自定义节点定义一个节点类型register之后addNode时就能像内置节点一样使用import LogicFlow from logicflow/core const lf new LogicFlow({ container }) lf.register(CustomEllipse) // 形状类完整写法见示例源码 lf.addNode({ id: 1, type: customEllipse, x: 150, y: 70, text: ellipse, properties: { rx: 60, ry: 30 }, })完整类定义可以对照 examples/feature-examples/src/pages/nodes/custom/ellipse/index.tsx。改完之后你会看到画布上多出一行椭圆节点和矩形节点一样能被拖拽、选中。换连线风格添加自定义连线继承内置的PolylineEdge只重写样式方法再用setDefaultEdgeType让新连线默认走它import LogicFlow, { PolylineEdge } from logicflow/core class MyEdge extends PolylineEdge { getEdgeStyle() { const style super.getEdgeStyle() style.stroke #409eff return style } } lf.register({ type: myEdge, view: MyEdge }) lf.setDefaultEdgeType(myEdge)改完之后你会看到新拖出来的连线都是蓝色折线已有的连线保持原样。另外说明一下初始化时的grid、isSilentMode、stopScrollGraph这些都是可选项不写就用默认值不必一上来就配全。四、容易卡住的三个点画布一片空白控制台还有加载报错 现象示例页打开后画布区域是白的。 原因示例依赖开发服务器和 workspace 包直接双击 HTML 以file://打开会被浏览器跨域策略拦掉。 绕过方式永远用第一节的命令启动不直接开文件。pnpm install时提示命令不允许 现象安装刚启动就被 preinstall 打断报错大意是只允许用 pnpm。 原因根 package.json 里配置了only-allow pnpm做包管理器校验。 绕过方式用 pnpm 安装可以先npm i -g pnpm或启用 corepack。addNode调用了画布上却看不到节点 现象代码执行没有报错页面却什么都画不出来。 原因容器div没有高度或者没引入基础样式。 绕过方式给容器定一个高度并import logicflow/core/es/index.css。如果你不是在本仓库里跑而是引用了 npm 上的logicflow/*包记得和本文示例的 API 版本对齐版本差异是另一个常见坑。五、接下来可以去看examples/feature-examples/src/pages/nodes/custom想自己画节点形状的人每种形状都有现成示例packages/extension/src/dynamic-group需要容器、自动包围成员这类业务能力的人sites/docs/docs/tutorial想系统过一遍 LogicFlow 配置指南和 API 的人如果上面都跑通了但遇到了本文没覆盖的情况直接去仓库的 Issues 里搜关键词或者新开一个。【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
