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.