Skip to main content
Version: Next

Flowchart Design Components

Table of Contents​

  1. Introduction
  2. Dual Engine Architecture Design
  3. G6Flow Core Module Analysis
  4. Componentized Node System
  5. Extension Mechanism
  6. LogicFlow Core Functionality
  7. Graph Instantiation and Event Handling
  8. State Persistence and Serialization
  9. Performance Tuning and Conflict Resolution
  10. Conclusion

Introduction​

This document provides an in-depth analysis of the dual-engine flowchart design components based on AntV G6 and LogicFlow, detailing their application architecture, core module collaboration mechanisms, and extension methods in the MES system. The system compares the applicability of the two technology stacks in process flow modeling and logical control flow scenarios, and provides complete code examples and performance optimization strategies.

Dual Engine Architecture Design​

Diagram sources

Section sources

G6Flow Core Module Analysis​

Core Module​

The Core module is the core builder of G6Flow, responsible for node creation, default property settings, and basic XML generation. This module encapsulates node creation logic through the Create class, uses uuidv4 to generate unique identifiers, and provides rich style configurations.

Diagram sources

Section sources

GraphEvent Module​

The GraphEvent class is responsible for handling all graphical events, including context menus, node interactions, and edge creation. This module adopts an event binding mechanism, registers G6 graphical events through the init method, and provides a unified event handling interface.

Diagram sources

Section sources

Componentized Node System​

Node Type Definition​

The system defines a rich set of node type enumerations, covering start, end, ordinary nodes, and various business nodes, providing complete process modeling capabilities for the MES system.

Diagram sources

Section sources

Node Collaboration Mechanism​

G6Flow implements collaboration between core modules through the store mechanism. Core, GraphEvent, and Renderer share the same state instance, ensuring data consistency.

Section sources

Extension Mechanism​

Custom Edges​

The Curve component implements Bezier curve edges, supporting animation effects and style customization, enhancing the visualization of flowcharts.

Diagram sources

Section sources

The system provides configurable context menus and toolbars, supporting dynamic addition of menu items and tool buttons to meet different business scenario requirements.

Section sources

LogicFlow Core Functionality​

Dagre Layout Algorithm​

Integrated Dagre layout algorithm to implement automatic layout of Directed Acyclic Graphs (DAG), supporting topological sorting and hierarchical arrangement, ensuring clear readability of flowcharts.

Diagram sources

Section sources

Node Caching Mechanism​

Business nodes are organized through the cache directory, implementing modular management and on-demand loading of nodes, improving system performance and maintainability.

Section sources

Graph Instantiation and Event Handling​

Graph Instantiation Process​

The system implements graph instantiation and rendering through the Renderer component, using Vue Composition API to manage component state and lifecycle.

Section sources

Event Listening Mechanism​

Adopts an event bus pattern to implement cross-component communication, providing lightweight event publish-subscribe functionality through the mitt library.

Section sources

State Persistence and Serialization​

JSON Schema Serialization​

Implements bidirectional conversion between flowchart data and XML format through the transformHelp module, ensuring data persistence and cross-system compatibility.

Section sources

Performance Tuning and Conflict Resolution​

High Concurrency Edit Optimization​

For high concurrency editing scenarios, the system adopts the following optimization strategies:

  • Node caching mechanism to reduce redundant calculations
  • Event throttling to avoid frequent rendering
  • Batch data processing to improve response speed
  • Incremental updates to reduce DOM operations

Section sources

Conflict Resolution Mechanism​

Resolves edit conflicts through unique identifiers and version control, ensuring data consistency during multi-user collaboration.

Section sources

Conclusion​

This document details the dual-engine flowchart design components based on AntV G6 and LogicFlow, elaborating on their architecture design, core module collaboration mechanisms, and extension methods in the MES system. The G6 engine is suitable for complex process flow modeling, while LogicFlow fits better for logical control flow visualization. Through comprehensive componentized design, flexible extension mechanisms, and efficient performance optimization strategies, the system provides powerful flowchart design capabilities for the MES system.

Last updated on