LogicFlow 流程图编辑：从空画布到可交互 Demo 的完整路径-开发者社区

LogicFlow 流程图编辑：从空画布到可交互 Demo 的完整路径

【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架，支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow

LogicFlow 是一个专注业务自定义的流程图编辑框架。本文带你走一遍完整路径：克隆仓库、装依赖、打开示例站点，再动手改一个节点和一条连线。需要 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'。