Why LogicFlow Is the Ideal Front-End Framework for Flowchart Visualization

Background

DiDi’s intelligent middle‑platform required a low‑cost, fast way to configure business logic for many rapidly changing customer‑service scenarios (interactive voice response, agent workflows, self‑service H5 pages). Existing open‑source diagram libraries (BPMN.js, X6, JsPlumb, G6‑editor) either lacked extensibility, forced full‑bundle imports, or had insufficient documentation, which led to the creation of LogicFlow in early 2020.

Core Capabilities

Drawing : Uses SVG to render nodes (rectangle, circle, polygon, etc.) and edges (straight line, polyline, curve).

Interaction : Supports hover, click, drag‑and‑drop, node dragging, edge creation, edge adjustment, and double‑click text editing.

Productivity features : Grid, alignment lines, undo/redo, keyboard shortcuts, zoom and pan.

Rich API : Host applications can pass parameters, listen to events, and extend functionality via plugins.

Extensibility for Business Scenarios

Custom styling for all graph elements (nodes, edges, anchors, arrows).

API extensions for custom methods (e.g., image download).

Custom node and edge definitions for domain‑specific symbols such as approval nodes.

HTML‑layer plugins for context menus, control panels, etc.

Data adapters to transform LogicFlow’s JSON to BPMN‑compliant formats.

An optional @logicflow/extension package that ships reusable BPMN nodes, menus, and adapters; it can be installed on demand.

Implementation Architecture

The editor is built on an HTML + SVG rendering stack: SVG draws shapes and lines, while HTML renders text, menus, and background layers. The core package @logicflow/core provides the base editor, and @logicflow/extension adds plug‑in capabilities.

Key modules:

Shape : Encapsulates SVG primitives (Rect, Circle, Polygon, Path, PolyLine, Text) and supplies default styles.

BaseNode / BaseEdge : Combine shapes, anchors, and text, handling common events and styling; concrete nodes inherit from these base classes.

Layered Rendering : Separate layers for the SVG graph, component (HTML) layer, grid layer, and background layer simplify extensions.

State management follows an MVVM pattern using MobX. The Model holds the graph data; the View (SVG + HTML) reacts to Model changes, enabling declarative updates and fine‑grained reactivity. Both command‑style (e.g., AntV/G) and declarative (React/Vue) updates are supported, with a virtual‑DOM layer to improve performance.

Event System

Behavior : Encapsulates complex interactions such as drag‑and‑drop and node creation.

EventCenter : A unified event bus that emits normalized events to the host application.

History : Undo/redo stacks with configurable length limits, leveraging MVVM snapshots.

Extensibility Design

LogicFlow provides an object‑oriented API that can be subclassed or extended via LogicFlow.use(fn). Users can register custom nodes, edges, UI components, and data adapters. The lf‑extension package already demonstrates this model by supplying BPMN nodes, default menus, and adapters.

Future Roadmap

Enrich the core API and extend extension capabilities based on community feedback.

Improve documentation and add more examples (e.g., a Vue demo).

Integrate with DiDi’s workflow engine Turbo (Java open‑source at https://github.com/didi/turbo) and eventually provide a Node.js engine.

Conclusion

LogicFlow delivers a performant, extensible, and easy‑to‑use front‑end solution for workflow visualization. Its SVG + HTML rendering, MVVM architecture, and plug‑in system make it suitable for a wide range of business scenarios, filling the gap between lightweight diagram tools and heavyweight BPMN engines.