Page Logic Orchestration with LogicFlow: Solving Low‑Code Expansion Challenges

In Didi's customer service platform, a zero‑code approach has been widely used to configure pages, greatly improving service efficiency and quality. However, traditional zero‑code solutions struggle with flexible page‑logic extensions.

The technical team introduced a new method: using workflow orchestration to compose page logic, thereby overcoming the extensibility limitations of zero‑code platforms.

Background : The customer service system connects users with various business units. To respond quickly to business iterations, the team built multiple configurable systems that allow operators to modify online logic without coding.

Problem : Complex interactions (e.g., a table edit that requires permission checks before showing different dialogs) are hard to implement with conventional zero‑code property panels, leading to configuration bloat and higher development costs.

Solution – Page Logic Orchestration : The team abstracts each interaction step into a simple logical unit (event, data request, UI update, etc.) and connects them on a visual workflow diagram using the open‑source LogicFlow framework. This visual approach mirrors the typical code flow (listen → collect → request → evaluate → update) but is expressed as nodes and edges.

The architecture consists of three core components that correspond to the development lifecycle:

Orchestrator : A visual editor where users drag and drop custom nodes (event, data, action, navigation) to build the workflow. The editor outputs JSON describing the flow.

Executor : A JavaScript‑based engine (LogicFlow Engine) that runs the JSON flow in the browser, supporting multiple node types, parallel execution, multiple start nodes, and repeatable execution.

Debugger : Provides runtime records, element details, and global page data to help operators diagnose issues without modifying code.

Key Capabilities :

Support for various node types (event, data, action, transition).

Parallel execution (branching) to handle concurrent tasks.

Multiple start nodes to trigger flows from different UI components.

Repeated execution of the same flow instance for dynamic UI changes.

Custom HTML nodes can be created by overriding setHtml and mounting Vue or React components, enabling rich UI controls within the flow. Custom edges allow conditional logic icons by overriding the default text rendering with SVG foreignObject elements.

The article also includes a summary that the orchestration approach significantly reduces the expansion difficulty of traditional low‑code platforms while maintaining low maintenance costs. The team plans to open‑source the entire low‑code platform in the future.

Finally, recruitment information is provided for front‑end and back‑end engineers to join the team, with links to the LogicFlow open‑source repository and community channels.