流程编排

流程定义、流程驱动，而节点的具体执行由接入方实现，可以快速搭建面向各种场景的流程编排类系统或产品，接入简单，支持灵活扩展，引擎扩展能力通过插件或组件的形式进行补充，支持按需使用，大大降低了用户的运维以及学习成本

关键模型

1 流程 (Flow) 定义了起点、终点以及起点到终点需要执行的活动、执行路径、执行策略。

2 流程实例 (FlowInstance) 一个流程可能会被多次执行，比如同一个场景的审批流是一个流程，每次有人提交审批这个流程都会被执行一次。流程每执行一次，对应一个流程实例。

3 流程元素 (FlowElement) *考虑兼容性问题，流程元素设计参考了 BPMN 规范。

构成流程中的各种元素通称为流程元素 (FlowElement)，包括节点 (FlowNode)和顺序流 (SequenceFlow)。

3.1 节点 (FlowNode) 3.1.1 事件节点 (EventNode) 例如：

开始节点 (StartEvent)：标识流程的开始； 结束节点 (EndEvent)：标识流程的结束；

3.1.2 活动节点 (ActivityNode) 例如：

任务 (Task)：需要处理的节点，例如： 用户任务节点 (UserTask)：使用方执行任务的节点，比如需要用户提交信息； 系统任务节点 (ServiceTask)：系统内部自行执行任务的节点； 内嵌子流程 (SubProcess)：将流程作为另一个流程的节点来处理； 调用子流程 (CallActivity)：与内嵌子流程不同的是，调用子流程拥有独立的模型存储，会产生新的流程实例

前端实现

图节点渲染，编辑

https://github.com/didi/LogicFlow/blob/master/README.zh-cn.md

https://x6.antv.antgroup.com/examples#node-port

https://xinxin93.github.io/logicflow_vue_demo/#/

流程图基本要求

· 复杂流程图请分为主子流程图来绘制，不要画在同一流程图中。 · 流程图禁止死循环。 · 流程图须以单一入口，单一出口特征绘制。“开始”符号只能出现一次，但是“结束”符号可以出现多次。 · 相同流程图，符号大小最好一致，看起来更美观。 · 流程图符号绘制顺序，应从上至下，从左到到右的顺序。 · 同一路径，指示箭头应只有一个，用来表示流程的执行顺序或数据的流向。 · 流程图如有参考到其他流程。可引用已定义的流程，不需要重复绘制。 · 路径符号应避免相互交叉。 顺序结构，分支结构，循环结构

前端设计

需要将业务流程中每一个功能节点进行模块化，通过对同一业务各功能节点的自由组合，定制一个特殊的业务流程；

目的是 把后端的业务流程执行逻辑代码块 放在 前端自由排列组合； 降低项目定制化开发成本

关键要素：

1.流程图组成结构（原子结构）

• 节点

  • 节点类型
  • 通用属性
  • 业务属性

• 边

  • 点的连通关系
  • 边状态
  • 其他属性

• 组，貌似不需要

  2.流程图逻辑结构

• 顺序结构

• 分支结构

• 循环结构 （需求中不存在循环结构）

节点元素

起始节点 条件节点 业务节点

连线元素

每条边都存在一个插入节点的功能 条件节点与下一节点间的边有状态区分

前端渲染数据设计

• 图的数据结构

const flowData = {
  flowId: "flow1",
  nodes: [], // 节点元素，前端设计为一个二维数组，给到后端
  edges: [], // 边元素
};

• 节点数据结构

const node =
  // 渲染信息
  {
    nodeId: "node1",
    shape: "rect",
    x: 40,
    y: 40,
    width: 100,
    height: 40,
    label: "节点名称",
    attrs: {
      body: {
        stroke: "#8f8f8f",
        strokeWidth: 1,
        fill: "#fff",
        rx: 6,
        ry: 6,
      },
    },
    extra: {
      // TODO: 业务属性，后端关注的属性
    },
  };

• 边数据结构

const edge =
    // 渲染信息
    {
      shape: 'edge',
      fromNode: 'node1',
      toNode: 'node2',
      label: '是',
      attrs: {
        line: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
        },
      },
      extra: {
        // TODO: 业务属性，后端关注的属性
      }
    },