LogicFlow：前端流程图编辑框架入门与实战
引言：什么是 LogicFlow？
在后台系统中，用户可能需要通过拖拽来定义复杂的业务流程（如审批流、数据流转）。
- 使用现成的流程图工具：功能固定，难以与业务深度集成。
- 从零开始手写：工程量巨大，维护成本高。
LogicFlow 是一款专注于业务流程图编辑的前端开源框架。它不关心后端技术栈，专注于在前端页面提供功能强大、易于扩展的流程图绘制区域。
核心定位：让开发者能快速、轻松地在自己的网页应用中集成一个专业的流程图设计器。
一、为什么选择 LogicFlow？
- 极易上手，API 设计友好 只需几行代码即可创建基础编辑器，对新手友好。
- 高扩展性 支持自定义节点（如用户任务、网关）、连线样式及插件（菜单、缩略图、BPMN 适配等）。
- 数据驱动 采用纯粹的数据驱动模式，无需直接操作 DOM，获取的 JSON 数据可轻松保存或发送。
- 中文文档齐全 由国内团队打造，拥有完善的中文文档和活跃社区。
提示：LogicFlow 支持 HTML、Vue、React 等前端框架，本文以 HTML 为例。
二、核心概念快速理解
| 概念 | 描述 | 类比 |
|---|---|---|
| GraphModel (图模型) | 整个流程图的数据和逻辑核心，管理所有节点和边 | 家族的'族谱' |
| Node (节点) | 流程图中的基础元素，如步骤、任务 | 族谱中的'人' |
| Edge (边/连线) | 连接两个节点的线，表示流程走向 | 族谱中的'父子关系' |
三、实战：5 分钟创建一个流程图
步骤 1：初始化项目并安装
mkdir my-logicflow-demo
cd my-logicflow-demo
npm init -y
npm install @logicflow/core
步骤 2：创建 HTML 容器
创建 index.html 文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" =>
我的第一个 LogicFlow 流程图
