为什么会有这样一个专栏？
大家在生活中，也或多或少会遇到一些流程。最常见的场景应该是我们的请假审批流程了，如下图所示，当我们在系统中发起请假申请后，工作流引擎会驱动，按照引擎设定的规则将请假申请推送到下一步，每个步骤可能对应不同的审批节点，审批过程中的条件（比如请假天数大于七天）由规则引擎决定。在到达对应节点的同时会触发通知系统提醒对应的审批人进行操作，并在审批人操作后记录该节点的状态。
这整个过程就是一个自动化系统，依赖通过前端配置如上的审批流程和后端执行该流程的流程引擎、规则引擎、事件通知、状态机记录等共同完成。只需要通过一次的配置，即可解决公司上千人的请假问题，还能根据实际需要，快速调整规则或节点，无需高额的研发成本介入。
除了办公自动化系统，像客服业务中遇到的工单流转、问题处理标准 SOP，以及 IVR 或机器人中的多轮对话流程，甚至通过使用流程图做逻辑配置探索低代码方案，我们积累了很多流程图的实践经验。而且这两年，随着 AI 快速发展，我们发现流程图在数据处理、模型训练和工作流管理等环节也有越来越多的应用，很多公司开始建设基于流程图配置的大数据训练系统。流程图的应用有越来越广泛的场景。
但同时，在运营开源项目的过程中，我们发现也有不少同学对于流程图库的实现以及其中包含的一些偏冷门的前端知识了解不足。导致在应用流程图库实现业务效果时，经常被一些简单问题困住手脚。
所以，为了让更多的前端同学能够了解流程图库的基础知识和其实现原理，我们推出这门课程，主要通过以下三个方向的学习和实践，让大家掌握一门新的技能，通过学习他人的思路，更好的抽象自己的业务逻辑：
- 通过流程图库可能用到的冷门知识，比如 SVG、Canvas 等的讲解，让大家更容易快速上手
- 通过代码实践的方式，整理各流程图库关键模块设计思路，带领大家从 0 到 1 实现一个自己的流程图库
- 最后通过分析，帮助大家了解市面上各流程图库关键模块的设计思路差异，方便大家对比后在做技术选型时有足够的理论基础
那么什么是流程图、流程引擎？
我们给流程图一个定义：它一种图形化工具，用于直观地展示流程、步骤和决策。它帮助人们更轻松地理解复杂的流程和操作，在多个领域中被广泛应用，如工程、软件开发、项目管理和商业分析等。目前市面上比较流行的流程图绘制库有 ReactFlow、LogicFlow、X6、G6、bpmn.js。
而流程引擎呢，就是一种用于自动化执行和管理业务流程的软件工具，它能够解释流程定义，执行流程逻辑，并根据预设规则进行流程管理和优化。常用的流程引擎有 Activiti、Flowable 等，我们本节课不涉及流程引擎的内容，如果大家感兴趣，推荐阅读贺波老师的 《深入Activiti流程引擎：核心原理与高阶实战》，这本书对系统学习和深入掌握 Activiti/Flowable 的用法非常有帮助。
流程图的发展
我们每个人对流程化可能自己独特的感受或理解，但不可否认的是，在我们的工作或生活中，大多事情都是以固定的流程进行的，比如：工业生产线的工艺是以固定的流程进行的，客服在解决用户问题时也是以固定的 SOP 解决或流转的，甚至程序员的代码其实也是按照固定的逻辑顺序执行的。
远在大约公元前 3000 年，古埃及的象形文字和一些复杂墓葬壁画展示了宗教仪式、生活场景、农业生产等方面的流程。
随着时间的推进，在 17 世纪欧洲启蒙时期，随着科学和逻辑思维的发展，出现了较为系统化的图示。例如，拉蒙德·斯穆里安（Ramon LIull）设计了“逻辑机器”，这是一种早期基于规则推理的流程图工具，用于解决哲学和逻辑问题。尽管它是一种概念化的工具，但它为后来的系统化流程图奠定了基础。
到了 19 世纪，进入工业革命之后，尤其是在科学管理思想的推动下，流程图的概念逐渐形成。1880 年，赫尔曼·霍勒里斯（Herman Hollerith）为美国人口普查设计的打孔卡片系统，可以看作是早期的数据处理流程示意。随后，在 20 世纪初，弗雷德里克·泰勒的科学管理法中，开始使用流程图来描述工作流程和效率改进，这种认为是现代流程图的雏形。
流程图作为正式工具的应用可以追溯到 20 世纪 20 年代。弗兰克·吉尔布雷斯（Frank Gilbreth） 和 莉莲·吉尔布雷斯（Lillian Gilbreth） 是最早将流程图标准化应用到工作流程分析的人之一，他们的工作为后来流程图的正式作用奠定了基础。到了 1947 年，美国机械工程师协会（ASME）为流程图制定了标准符号集（如矩形、菱形），用来表示流程中的步骤、决策和条件，并使其广泛应用于工业界和商业流程管理中。
随后，随着计算机的出现，流程图开始被用于描述计算机程序的逻辑流程，就到了我们现代意义上描述的流程图。程序流程图（FlowChart） 成为了编程人员用来描述算法逻辑的主要工具之一，帮助程序员规划和设计复杂的系统，IBM 和其他公司开始推广流程图作为系统分析的一部分。
到 21 世纪，随着业务流程管理的兴起，流程图被广泛用于企业中的流程再造（BPR）和优化。流程图与业务流程建模符号（BPMN） 和统一建模语言（UML） 等高级建模工具结合，帮助企业在业务流程优化和系统开发中进行复杂的建模和仿真。同时，软件工具（如 Microsoft Visio）使得流程图的设计和修改变得更加便捷，流程图工具逐渐与自动化工具结合，支持自动化的流程执行与监控。
常见使用场景举例
到了近几年，流程图工具越来越智能化，云端流程图工具（国外如 LucidChart、Miro，国内如 XMind、ProcessOn、小画桌等）允许多人实时编辑，并与企业的其他管理工具集成。
未来随着 AI 的快速发展，在 AI 数据训练领域，流程图也开始发挥重要的作用，应用变得越来越广泛，特别是在数据处理、模型训练和工作流管理等环节。流程图工具和流程引擎能够帮助团队可视化和自动化复杂的数据处理和模型训练步骤，其中比较有代表性的产品有：
- Apache Airflow：Apache Airflow 是一个开源的工作流管理工具，广泛的应用于数据工程、机器学习模型训练以及 AI 数据管道的构建。
Airflow 使用有向无环图（DAGs）来定义任务和任务之间的依赖关系，这实际上就是流程图的一种表现形式。它帮助团队清晰的展示数据训练过程中的每个步骤，听通过可视化界面追踪工作流的执行情况。 - Kubeflow Pipelines：Kubeflow 是一个专门为机器学习而设计的开源平台，其中的 Kubeflow Pipeline 模块提供了一个可视化的工作流管理工具。它允许数据科学家和工程师使用流程图的形式定义、执行和追踪机器学习模型训练过程
- TensorBoard：TensorBoard 是 TensorFlow 的可视化工具，它虽然主要用于展示模型训练的指标和日志，但也支持流程图的展示，帮助用户了解模型计算图的结构。通过图形化的方式，他可以展示模型中每个运算节点的流动
关于流程图库的应用，最近还有一个比较火的开源项目 Dify，它旨在简化基于大语言模型（LLM）的 AI 应用开发，其中的 workflow（工作流 功能是用于自动化和组织复杂任务的模块，专门设计来处理基于大语言模型（LLM）的应用开发。通过 workflow，用户能够定义一系列有序的步骤，然后自动化的完成各种任务或操作，它的主要功能包括： 任务自动化、节点编排、条件分支与决策、模型集成与工具连接、实时监控与调试以及工作。
流程图库常用的技术方案
前端计算机图形技术是 Web 开发中创建和操作图形、动画和视觉效果的重要工具。这些技术使开发者能够实现丰富的用户界面、数据可视化和交互式内容。本章将介绍在流程图场景下常用的两种技术：SVG 和 Canvas，它们在不同的需求下有各自的优势，下面可以大致对比一下：
| SVG | Canvas | ||
|---|---|---|---|
| 优点 | 缺点 | 优点 | 缺点 |
| 矢量图形：缩放不影响清晰度 | 性能瓶颈：对于节点和连线非常多的复杂流程图，操作性能会变差 | 高性能：Canvas 基于像素绘制，渲染效率较高，适合处理复杂的图形、动画或大量的节点和连线 | 不具备事件监听功能：Canvas 本身不支持直接的事件监听（如点击、悬停），需要通过计算坐标实现，要比 SVG 复杂。开发者需要手动实现命中测试（hit test），判断点击或拖拽时具体的节点位置 |
| DOM集成：元素都是独立的 DOM，方便事件监听及复杂的交互场景 | 渲染效率低：相比 Canvas，SVG 渲染的效率在处理大量复杂路径、图形时相对较低，不适合需要高效批量绘制的场景。 | 灵活性：可以更灵活地处理复杂的自定义图形和动画，几乎可以绘制任意形状和效果；且可实现高帧率的复杂动画 | 无法使用 CSS 样式：Canvas 是通过 JavaScript 绘制的位图，无法直接应用 CSS 控制图形外观或动画，因此在样式和布局的动态变化上较不灵活 |
| CSS支持：可直接应用 CSS 样式，方便动态更新样式 | 不依赖 DOM：不生成大量 DOM 元素，因此对于动态更新的图形或大规模图形处理，能避免因 DOM 操作带来的性能瓶颈 | 失去矢量优势：Canvas 绘制的是位图图像，缩放后图形可能会失真。对于频繁缩放或打印高清图像的场景，Canvas 不适用 | |
| 易于调试：由于 SVG 是 DOM 的一部分，可以用浏览器的开发工具查看和调试，定位问题相对容易 | 调试困难：由于 Canvas 绘制的图像是基于像素的，无法像 SVG 一样直接查看或操作 DOM 元素，因此调试和定位问题都相对复杂。 |
总结一下，SVG 和 Canvas 分别适用的场景：
选用 SVG 的场景：
- 流程图规模相对较小，元素数量较少（几百个以内）
- 需要丰富的用户交互，如点击、拖拽、编辑节点和连线
- 希望通过 CSS 直接控制图形外观和动画，且需要支持响应式设计
- 需要高质量的图像输出，如流程图导出 PDF 或打印时需要保持高清晰度
选用 Canvas 的场景
- 流程图规模较大，包含大量节点和连线，性能要求较高
- 需要频繁动态更新图形或实现复杂的动画效果
- 对事件处理要求不高，或可以通过其他方式实现命中检测和交互
- 流程图不需要经常缩放，或者对缩放的清晰度要求不高
了解完这些背景信息，接下来，就让我们一起从流程图库的前端基础技能科普开始，分别介绍 SVG、Canvas 两种技术方案的基础概念，开启全新的探索
