Design and Implementation of a No‑Code Logic Orchestration Platform (YOHO)

Background and Motivation – The rapid growth of visual page building has created a surge in demand for interactive marketing components. Existing solutions for front‑end and back‑end logic orchestration lack a unified standard and are not accessible to non‑technical users. To break the bottleneck of development and maintenance resources, a No‑Code, graphically‑driven logic orchestration platform named YOHO was created, enabling non‑developers to compose business logic by dragging components.

Core Concepts – The platform consists of four main UI parts: a toolbar, a component (元件) list, a canvas, and a configuration panel. Users drag components onto the canvas, connect them with directional lines, and configure input parameters in the side panel. The resulting flowchart is exported as a DSL and transformed into executable code at runtime.

Component Design – Components are built on the G6 graph engine. Each component (node) includes a shape, branch lines, descriptive text, and connection nodes. Components are classified into two categories:

Basic components – No business logic; serve as start/end markers (green circles).

Business components – Contain logic and are further divided into:

The registration of custom shapes is illustrated below:

G6.registerNode(
  'diamond',
  {
    draw(cfg: Cfg, group: GGroup) {
      const size = [94, 64]; // [width, height]
      const width = size[0];
      const height = size[1];
      // SVG custom shape
      const path = [
        ['M', 0, 0 - height / 2], // top vertex
        ['L', width / 2, 0],       // right vertex
        ['L', 0, height / 2],     // bottom vertex
        ['L', -width / 2, 0],      // left vertex
        ['Z']                     // close path
      ];
      ...
    },
    afterDraw(cfg: Cfg, group: GGroup) {
      const size = [100, 64];
      const width = size[0];
      const height = size[1];
      // branch description
      addDesc(cfg, group, width, height, cfg.outLine);
      // branch line
      addLine(group, width, height, cfg.outLine);
      // connection anchors
      addNode(group, width, height, cfg.outLine, cfg.showNode);
    },
    ...
  },
  'base-node',
);

Branch line rendering based on the number of outputs:

const addLine = (group, width, height, outLine) => {
  group.addShape('path', {
    attrs: {
      path: [
        ['M', -width / 2 * (outLine - 1), height + 3],
        ['L',  width / 2 * (outLine - 1), height + 3],
        ['Z']
      ],
      ...edgeStyle
    },
    draggable: true,
  });
};

Node (anchor) creation for inputs and multiple outputs:

const addNode = (group, width, height, outLine, isShow) => {
  const xPosition = i => -width / 2 * (outLine - 1) + width * i;
  outLine && new Array(outLine).fill(0).forEach((d, i) => {
    group.addShape('circle', {
      attrs: {
        x: xPosition(i),
        y: height + 4,
        r: 4.5,
        ...dotStyle
      },
      name: `circle-shape-${i + 1}`
    });
  });
};

Component Project Structure – Each component package contains four files:

index.js – the component’s main function.

input.json – schema for configuring input parameters.

branch.json – defines the number and semantics of output branches.

output.json – schema describing the data returned after execution.

Visual Form Builder – The platform embeds a form‑render based designer that generates the JSON schemas for input.json and output.json . Users can drag‑and‑drop fields, export the schema, and the platform consumes it for component registration.

Integration with UI Orchestration – The logic platform is combined with a UI composition tool (hot‑area modules). Logic can be triggered automatically on load or manually by user interaction. Execution results are stored in a shared context, driving UI updates via data binding.

Advantages – Compared with traditional development, the new workflow allows parallel UI and logic development, reduces code‑release cycles from days to hours, and achieves significant cost‑saving and efficiency gains. Component reuse at a fine granularity further lowers maintenance overhead.

Overall Architecture – The system comprises three layers:

Orchestrator – UI built on G6, component registration, canvas tools.

DSL Converter – Serialises the canvas into JSON for downstream consumption.

Runtime – Executes the DSL, provides APIs for component invocation, and propagates results to the business platform.

Conclusion – The platform delivers three breakthroughs: reusable logic, clearer division of labor between UI and logic, and cross‑business applicability through a generic component ecosystem.