LogicFlow

核心定位

LogicFlow 是一个专注于业务流程图编辑的前端框架。它解决的核心问题不是“画一张静态图”，而是在 Web 应用中嵌入可交互、可定制的流程编辑能力。与通用图形库相比，它把注意力集中在节点、连线、数据流转这几个业务流程中最关键的抽象上。

主要能力

节点与连线模型

框架提供了一套完整的图编辑基础模型：

• 节点：支持自定义形状、样式与内部渲染内容，可承载业务数据
• 连线：支持直线、折线、贝塞尔曲线等类型，可配置箭头、虚线、文本标签
• 交互操作：内置拖拽创建、连线吸附、框选、缩放、撤销重做等常用编辑行为

这些能力直接对应业务流程图编辑中的高频操作，开发者无需从零实现底层的图形交互逻辑。

数据驱动

LogicFlow 的图形内容由 JSON 数据描述，渲染结果与数据模型保持同步。这意味着：

这种设计使框架更容易嵌入已有业务系统，而不是作为一个封闭的图形工具存在。

扩展机制

框架允许通过插件和自定义组件扩展能力，例如：

• 自定义节点渲染（使用 Vue、React 或其他方式）
• 扩展编辑工具（如小地图、对齐辅助线）
• 接入业务规则（如节点连接限制、必填校验）

扩展点设计相对克制，核心编辑逻辑保持稳定，业务差异通过扩展层解决。

适用场景

LogicFlow 适合需要将流程编辑能力集成到自身产品中的场景，例如：

• 审批流配置器
• 自动化规则编排界面
• 业务流程管理（BPM）工具的前端部分
• 低代码平台中的流程设计模块

如果需求只是一次性绘制流程图，常规绘图工具更直接；如果需求是在产品中提供可编程、可定制的流程编辑体验，LogicFlow 的定位与之匹配。

使用要点

1. 先明确数据模型：节点和连线上需要承载哪些业务字段，这决定自定义渲染和校验的设计
2. 评估扩展需求：确认是否需要自定义节点、插件或与现有组件体系集成
3. 关注版本与生态：框架持续演进，使用前应查阅官方文档确认 API 与兼容性

更多信息可访问 site.logic-flow.cn。