Logical Visualization: From Visual Programming to Automated Code Generation

Research shows that humans process visual information much faster than textual information, so visualizing logic can greatly improve comprehension efficiency.

Visual programming allows developers to see results instantly and replace textual code with graphical elements, similar to drawing flowcharts by connecting boxes and arrows.

The classic development model relies on product-provided flowcharts, leading to complex logic, tight coupling between pages and code, and high communication costs among product, development, and testing teams.

In contrast, a visual development model lets product teams edit logical node diagrams, automatically generating an AST (abstract syntax tree) that is parsed into code, eliminating the need for developers to write code manually.

Advantages of logic visualization include clear logic, automatic code generation, and strict adherence to product-defined logic, reducing miscommunication and errors.

The construction of a logical relationship graph involves logical elements (shapes), categories (start, decision, state), and relationships (connections). An example graph shows elements A (rectangle), B (diamond), C (circle), and D (square) with defined categories and connections.

/** * @param treeData: existing node tree * @param label: new node type (||, &&, '') * @param node: current node */ handleAdd = (treeData, label, currentNode) => { const parentNode = currentNode.parentNode; if (label === currentNode.type || label === parentNode.type) { let parentId = label === parentNode.type ? parentNode.id : currentNode.id; treeData.push(newNode); newNode.parentId = parentId; } else { treeData.push(newNodeC); newNodeC.parentId = parentNode.id; treeData.push(newNodeD); newNodeD.parentId = newNodeC.id; currentNode.parentId = newNodeC.id; } };

Node operations include adding "&&" or "||" nodes, configuring expressions, and deleting nodes. After node manipulation, an AST is generated recursively, and then parsed into executable code snippets.

/** * Count the number of child nodes under each node in the tree */ static transformTree(treeData, floor = 1) { let rootCount = 0; for (let i = 0; i < treeData.length; i++) { const node = treeData; node.floor = floor; if (node.children.length === 0) { node.childNodeCount = 1; node.floorNumber = rootCount; rootCount++; } else { const leafCount = LogicConfig.transformTree(node.children, floor + 1); node.childNodeCount = leafCount; node.floorNumber = rootCount; rootCount += leafCount; } } return rootCount; }

/** * Generate expression from node data */ getResult = (data, parentType) => { const arr = []; if (data.children.length === 0) { return data.tips; } for (let i = 0; i < data.children.length; i++) { const child = data.children; if (child.type === LOGIC_TYPE.none) { arr.push(child.tips); } if (child.type === "||" || child.type === "&&") { arr.push(this.getResult(child, data.type)); } } if (data.type === parentType) { return arr.join(` ${data.type} `); } else { return `(${arr.join(` ${data.type} `)})`; } };

By combining node operations, AST generation, and expression parsing, the system can automatically produce code snippets from product flowcharts without developer involvement.

Applications of logic visualization include link monitoring, where call chains are visualized, and integration with the Orion configuration engine to enable zero-code page building, allowing dynamic UI rendering based on logical conditions.