Liteflow逻辑编排可视化设计

王士江WangJohn2024-04-15 10:40

Liteflow是一款轻量、快速、稳定可编排的组件式规则引擎：

  • 🧬 强大的EL：简单低学习成本的EL，丰富的关键字，能完成任意模式的逻辑编排。小身材，大能量。

  • 🧩 皆为组件：拥有独特的设计理念，所有逻辑皆为组件。上下文隔离，组件单一职责，组件可以复用且互相解耦；

  • 📑 脚本支持：除了java，你还可以用多达7种脚本语言来书写你的逻辑：Java，Groovy，Js，Python，Lua，QLExpress，Aviator；

  • 🛖 规则存储：支持把规则和脚本存在任何关系型数据库，并且支持大部分的注册中心，支持zk，nacos，etcd，apollo，redis；

  • 🍃 平滑热刷：无论是编排规则，还是脚本组件，你都可以在不用重启应用的情况下进行即时刷新。实时替换逻辑；

  • ⭐️ 支持度广：JDK8~JDK17，Spring 2.X ~ Spring 3.X，统统支持。非Spring也给予了支持；

  • 🍱 高级特性：超多的高级特性，每一个都能贴合你的业务，利用高级特性让你的复杂场景瞬间变得简单且灵动；

  • 🏤 社区强大：多达几千人的使用者社区，及时给你答疑解惑。并且在国内多家一线企业中落地运用；

  • 🪁 可靠性强：对系统的额外消耗极小，性能强悍。多达1700个测试用例保障了LiteFlow的质量。

根据项目的需要，我们对Liteflow的逻辑编排进行了可视化设计，以下是我们的相关经验分享，希望能帮到有同样需求的朋友。

1、流程模型

Liteflow对可执行的逻辑流程进行建模，主要包括以下2个部分：

  • 1、逻辑组件（组件节点）："组件"的概念是从模块拆分的角度来看，每一个组件都是一个独立的可复用模块；"节点"概念是从流程角度来看，每一个组件都是可执行逻辑流程中的一个节点。组件类型包括：
    ① 顺序组件：用于THEN、WHEN；
    ② 分支组件：用于SWITCH、IF ...；
    ③ 循环组件：用于FOR、WHILE ...。
  • 2、逻辑编排：通过EL表达式进行组件编排： ① 串行编排：THEN；
    ② 并行编排：WHEN；
    ③ 选择编排：SWITCH；
    ④ 条件编排：IF；
    ⑤ 循环编排：FOR、WHILE、ITERATOR、BREAK。

2、逻辑可视化编排

将各个组件节点进行逻辑编排的结构，有如下几种：

  • 1、串行编排：THEN；
  • 2、并行编排：WHEN；
  • 3、选择编排：SWITCH；
  • 4、条件编排：IF；
  • 5、循环编排：FOR、WHILE、ITERATOR、BREAK。

以下是我们分别对Liteflow各个逻辑编排的EL表达式分析和可视化设计。

2.1 串行编排：THEN

1、文本（Liteflow EL）表达式

如果你要依次执行a,b,c,d四个组件，你可以用THEN关键字，需要注意的是，THEN必须大写。

typescript 复制代码 
<chain name="chain1">
    THEN(a, b, c, d);
</chain>

2、逻辑流程可视化

3、AST抽象语法树

typescript 复制代码 
{
  "type": "Program",
  "start": 0,
  "end": 17,
  "body": [
    {
      "type": "ExpressionStatement",
      "start": 0,
      "end": 17,
      "expression": {
        "type": "CallExpression",
        "start": 0,
        "end": 16,
        "callee": {
          "type": "Identifier",
          "start": 0,
          "end": 4,
          "name": "THEN"
        },
        "arguments": [
          {
            "type": "Identifier",
            "start": 5,
            "end": 6,
            "name": "a"
          },
          {
            "type": "Identifier",
            "start": 8,
            "end": 9,
            "name": "b"
          },
          {
            "type": "Identifier",
            "start": 11,
            "end": 12,
            "name": "c"
          },
          {
            "type": "Identifier",
            "start": 14,
            "end": 15,
            "name": "d"
          }
        ],
        "optional": false
      }
    }
  ],
  "sourceType": "module"
}

4、图数据格式

typescript 复制代码 
{
    "nodes": [
        { "id": "a", "shape": "CommonComponent" },
        { "id": "b", "shape": "CommonComponent" },
        { "id": "c", "shape": "CommonComponent" },
        { "id": "d", "shape": "CommonComponent" },
    ],
    "edges": [
        { "source": "a", "target": "b", "shape":"edge" },
        { "source": "b", "target": "c", "shape":"edge" },
        { "source": "c", "target": "d", "shape":"edge" },
    ]
}

5、参考目标格式

typescript 复制代码 
{
    "type": "THEN",
    "children": [
        { "type": "CommonComponent", "id": "a" },
        { "type": "CommonComponent", "id": "b" },
        { "type": "CommonComponent", "id": "c" },
        { "type": "CommonComponent", "id": "d" },
    ]
}

6、编排示例Demo

2.2 并行编排：WHEN

1、文本（Liteflow EL）表达式

如果你要并行执行b,c,d三个组件，你可以用WHEN关键字，需要注意的是，WHEN必须大写。

typescript 复制代码 
<chain name="chain1">
    THEN(
        a,
        WHEN(b, c, d),
        e
    );
</chain>

2、逻辑流程可视化

3、AST抽象语法树

typescript 复制代码 
{
  "type": "Program",
  "start": 0,
  "end": 34,
  "body": [
    {
      "type": "ExpressionStatement",
      "start": 0,
      "end": 34,
      "expression": {
        "type": "CallExpression",
        "start": 0,
        "end": 33,
        "callee": {
          "type": "Identifier",
          "start": 0,
          "end": 4,
          "name": "THEN"
        },
        "arguments": [
          {
            "type": "Identifier",
            "start": 8,
            "end": 9,
            "name": "a"
          },
          {
            "type": "CallExpression",
            "start": 13,
            "end": 26,
            "callee": {
              "type": "Identifier",
              "start": 13,
              "end": 17,
              "name": "WHEN"
            },
            "arguments": [
              {
                "type": "Identifier",
                "start": 18,
                "end": 19,
                "name": "b"
              },
              {
                "type": "Identifier",
                "start": 21,
                "end": 22,
                "name": "c"
              },
              {
                "type": "Identifier",
                "start": 24,
                "end": 25,
                "name": "d"
              }
            ],
            "optional": false
          },
          {
            "type": "Identifier",
            "start": 30,
            "end": 31,
            "name": "e"
          }
        ],
        "optional": false
      }
    }
  ],
  "sourceType": "module"
}

4、图数据格式

typescript 复制代码 
{
    "nodes": [
        { "id": "a", "shape": "CommonComponent" },
        { "id": "b", "shape": "CommonComponent" },
        { "id": "c", "shape": "CommonComponent" },
        { "id": "d", "shape": "CommonComponent" },
        { "id": "e", "shape": "CommonComponent" },
    ],
    "edges": [
        { "source": "a", "target": "b", "shape":"edge" },
        { "source": "a", "target": "c", "shape":"edge" },
        { "source": "a", "target": "d", "shape":"edge" },
        { "source": "b", "target": "e", "shape":"edge" },
        { "source": "c", "target": "e", "shape":"edge" },
        { "source": "d", "target": "e", "shape":"edge" },
    ]
}

5、参考目标格式

typescript 复制代码 
{
    "type": "THEN",
    "children": [
        { "type": "CommonComponent", "id": "a" },
        {
            "type": "WHEN",
            "children": [
                { "type": "CommonComponent", "id": "b" },
                { "type": "CommonComponent", "id": "c" },
                { "type": "CommonComponent", "id": "d" },
            ]
        },
        { "type": "CommonComponent", "id": "e" },
    ]
}

6、编排示例Demo

2.3 选择编排：SWITCH

1、文本（Liteflow EL）表达式

如果，根据组件a，来选择执行b,c,d中的一个，你可以如下声明：

typescript 复制代码 
<chain name="chain1">
    SWITCH(a).to(b, c, d);
</chain>

2、逻辑流程可视化

3、AST抽象语法树

typescript 复制代码 
{
  "type": "Program",
  "start": 0,
  "end": 22,
  "body": [
    {
      "type": "ExpressionStatement",
      "start": 0,
      "end": 22,
      "expression": {
        "type": "CallExpression",
        "start": 0,
        "end": 21,
        "callee": {
          "type": "MemberExpression",
          "start": 0,
          "end": 12,
          "object": {
            "type": "CallExpression",
            "start": 0,
            "end": 9,
            "callee": {
              "type": "Identifier",
              "start": 0,
              "end": 6,
              "name": "SWITCH"
            },
            "arguments": [
              {
                "type": "Identifier",
                "start": 7,
                "end": 8,
                "name": "a"
              }
            ],
            "optional": false
          },
          "property": {
            "type": "Identifier",
            "start": 10,
            "end": 12,
            "name": "to"
          },
          "computed": false,
          "optional": false
        },
        "arguments": [
          {
            "type": "Identifier",
            "start": 13,
            "end": 14,
            "name": "b"
          },
          {
            "type": "Identifier",
            "start": 16,
            "end": 17,
            "name": "c"
          },
          {
            "type": "Identifier",
            "start": 19,
            "end": 20,
            "name": "d"
          }
        ],
        "optional": false
      }
    }
  ],
  "sourceType": "module"
}

4、图数据格式

typescript 复制代码 
{
    "nodes": [
        { "id": "a", "shape": "SwitchComponent" },
        { "id": "b", "shape": "CommonComponent" },
        { "id": "c", "shape": "CommonComponent" },
        { "id": "d", "shape": "CommonComponent" },
    ],
    "edges": [
        { "source": "a", "target": "b", "shape":"edge" },
        { "source": "a", "target": "c", "shape":"edge" },
        { "source": "a", "target": "d", "shape":"edge" },
    ]
}

5、参考目标格式

typescript 复制代码 
{
    "type": "SWITCH",
    "condition": { "type": "SwitchComponent", "id": "x" },
    "children": [
        { "type": "CommonComponent", "id": "a" },
        { "type": "CommonComponent", "id": "b" },
        { "type": "CommonComponent", "id": "c" },
        { "type": "CommonComponent", "id": "d" },
    ]
}

6、编排示例Demo

2.4 条件编排：IF

1、文本（Liteflow EL）表达式

typescript 复制代码 
<chain name="chain1">
    THEN(
        IF(x, a),
        b
    );
</chain>

2、逻辑流程可视化

3、AST抽象语法树

typescript 复制代码 
{
  "type": "Program",
  "start": 0,
  "end": 24,
  "body": [
    {
      "type": "ExpressionStatement",
      "start": 0,
      "end": 24,
      "expression": {
        "type": "CallExpression",
        "start": 0,
        "end": 23,
        "callee": {
          "type": "Identifier",
          "start": 0,
          "end": 4,
          "name": "THEN"
        },
        "arguments": [
          {
            "type": "CallExpression",
            "start": 8,
            "end": 16,
            "callee": {
              "type": "Identifier",
              "start": 8,
              "end": 10,
              "name": "IF"
            },
            "arguments": [
              {
                "type": "Identifier",
                "start": 11,
                "end": 12,
                "name": "x"
              },
              {
                "type": "Identifier",
                "start": 14,
                "end": 15,
                "name": "a"
              }
            ],
            "optional": false
          },
          {
            "type": "Identifier",
            "start": 20,
            "end": 21,
            "name": "b"
          }
        ],
        "optional": false
      }
    }
  ],
  "sourceType": "module"
}

4、图数据格式

typescript 复制代码 
{
    "nodes": [
        { "id": "x", "shape": "IfComponent" },
        { "id": "a", "shape": "CommonComponent" },
        { "id": "b", "shape": "CommonComponent" },
        { "id": "virtual", "shape": "VirtualComponent" },
    ],
    "edges": [
        { "source": "x", "target": "a", "shape":"edge" },
        { "source": "x", "target": "virtual", "shape":"edge" },
        { "source": "a", "target": "b", "shape":"edge" },
        { "source": "virtual", "target": "b", "shape":"edge" },
    ]
}

5、参考目标格式

typescript 复制代码 
{
    "type": "IF",
    "condition": { "type": "IfComponent", "id": "x" },
    "children": [
        { "type": "CommonComponent", "id": "a" },
    ]
}

6、编排示例Demo

2.5 循环编排：FOR

1、文本（Liteflow EL）表达式

typescript 复制代码 
<chain name="chain1">
    FOR(5).DO(THEN(a, b));
</chain>

2、逻辑流程可视化

官方暂无。

3、AST抽象语法树

typescript 复制代码 
{
  "type": "Program",
  "start": 0,
  "end": 22,
  "body": [
    {
      "type": "ExpressionStatement",
      "start": 0,
      "end": 22,
      "expression": {
        "type": "CallExpression",
        "start": 0,
        "end": 21,
        "callee": {
          "type": "MemberExpression",
          "start": 0,
          "end": 9,
          "object": {
            "type": "CallExpression",
            "start": 0,
            "end": 6,
            "callee": {
              "type": "Identifier",
              "start": 0,
              "end": 3,
              "name": "FOR"
            },
            "arguments": [
              {
                "type": "Literal",
                "start": 4,
                "end": 5,
                "value": 5,
                "raw": "5"
              }
            ],
            "optional": false
          },
          "property": {
            "type": "Identifier",
            "start": 7,
            "end": 9,
            "name": "DO"
          },
          "computed": false,
          "optional": false
        },
        "arguments": [
          {
            "type": "CallExpression",
            "start": 10,
            "end": 20,
            "callee": {
              "type": "Identifier",
              "start": 10,
              "end": 14,
              "name": "THEN"
            },
            "arguments": [
              {
                "type": "Identifier",
                "start": 15,
                "end": 16,
                "name": "a"
              },
              {
                "type": "Identifier",
                "start": 18,
                "end": 19,
                "name": "b"
              }
            ],
            "optional": false
          }
        ],
        "optional": false
      }
    }
  ],
  "sourceType": "module"
}

4、图数据格式

typescript 复制代码 
{
    "nodes": [
        { "id": "f", "shape": "ForComponent" },
        { "id": "a", "shape": "CommonComponent" },
        { "id": "b", "shape": "CommonComponent" },
    ],
    "edges": [
        { "source": "f", "target": "a", "shape":"edge" },
        { "source": "f", "target": "b", "shape":"edge" },
    ]
}

5、参考目标格式

typescript 复制代码 
{
    "type": "FOR",
    "condition": { "type": "ForComponent", "id": "f" },
    "children": [
        { "type": "CommonComponent", "id": "a" },
        { "type": "CommonComponent", "id": "b" },
    ]
}

6、编排示例Demo

2.6 循环编排：WHILE

1、文本（Liteflow EL）表达式

typescript 复制代码 
<chain name="chain1">
    WHILE(w).DO(THEN(a, b));
</chain>

2、逻辑流程可视化

官方暂无。

3、AST抽象语法树

typescript 复制代码 
{
  "type": "Program",
  "start": 0,
  "end": 24,
  "body": [
    {
      "type": "ExpressionStatement",
      "start": 0,
      "end": 24,
      "expression": {
        "type": "CallExpression",
        "start": 0,
        "end": 23,
        "callee": {
          "type": "MemberExpression",
          "start": 0,
          "end": 11,
          "object": {
            "type": "CallExpression",
            "start": 0,
            "end": 8,
            "callee": {
              "type": "Identifier",
              "start": 0,
              "end": 5,
              "name": "WHILE"
            },
            "arguments": [
              {
                "type": "Identifier",
                "start": 6,
                "end": 7,
                "name": "w"
              }
            ],
            "optional": false
          },
          "property": {
            "type": "Identifier",
            "start": 9,
            "end": 11,
            "name": "DO"
          },
          "computed": false,
          "optional": false
        },
        "arguments": [
          {
            "type": "CallExpression",
            "start": 12,
            "end": 22,
            "callee": {
              "type": "Identifier",
              "start": 12,
              "end": 16,
              "name": "THEN"
            },
            "arguments": [
              {
                "type": "Identifier",
                "start": 17,
                "end": 18,
                "name": "a"
              },
              {
                "type": "Identifier",
                "start": 20,
                "end": 21,
                "name": "b"
              }
            ],
            "optional": false
          }
        ],
        "optional": false
      }
    }
  ],
  "sourceType": "module"
}

4、图数据格式

typescript 复制代码 
{
    "nodes": [
        { "id": "w", "shape": "WhileComponent" },
        { "id": "a", "shape": "CommonComponent" },
        { "id": "b", "shape": "CommonComponent" },
    ],
    "edges": [
        { "source": "w", "target": "a", "shape":"edge" },
        { "source": "w", "target": "b", "shape":"edge" },
    ]
}

5、参考目标格式

typescript 复制代码 
{
    "type": "WHILE",
    "condition": { "type": "WhileComponent", "id": "w" },
    "children": [
        { "type": "CommonComponent", "id": "a" },
        { "type": "CommonComponent", "id": "b" },
    ]
}

6、编排示例Demo

相关推荐
彭世瑜15 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40416 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish17 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five18 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序18 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫54119 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
前端每日三省20 分钟前
面试题-TS(八)：什么是装饰器（decorators）？如何在 TypeScript 中使用它们？
开发语言·前端·javascript
小刺猬_98520 分钟前
（超详细）数组方法 ——— splice( )
前端·javascript·typescript
渊兮兮22 分钟前
Vue3 + TypeScript +动画，实现动态登陆页面
前端·javascript·css·typescript·动画
鑫宝Code22 分钟前
【TS】TypeScript中的接口(Interface):对象类型的强大工具
前端·javascript·typescript
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10量化方法怎么选？如何评估量化后的大模型LLM？