Skip to main content
Version: Next

G6Flow Engine Architecture and Implementation Documentation

Table of Contents​

  1. Introduction
  2. Project Structure
  3. Core Architecture Overview
  4. Graph Instance Initialization Flow
  5. Event System and Binding Mechanism
  6. Custom Node and Edge Rendering
  7. State Management and Behavior Control
  8. Data Serialization and Deserialization
  9. Performance Optimization Strategies
  10. Troubleshooting Guide
  11. Conclusion

Introduction​

G6Flow is a flow chart visualization engine based on AntV G6, designed specifically for complex topology structures (such as device networks, process paths). This engine provides complete flow chart editing, rendering, interaction, and data management functions, supporting custom nodes, edge styles, layout algorithms, and event handling mechanisms.

The core advantage of G6Flow lies in its modular architecture design, achieving high extensibility and maintainability through clear separation of responsibilities. The engine is built using Vue 3 Composition API, fully leveraging the advantages of modern frontend frameworks, providing smooth user experience and powerful functional features.

Project Structure​

G6Flow engine adopts a layered architecture design, mainly divided into the following layers:

Diagram sources

Section sources

Core Architecture Overview​

G6Flow engine adopts the classic layered architecture pattern, with each layer having clear responsibilities and boundaries:

Architecture Layer Description​

  1. Presentation Layer: Responsible for user interface display and interaction
  2. Business Logic Layer: Handles core business logic and state management
  3. Rendering Layer: Responsible for graphics rendering and visual effects
  4. Data Layer: Handles data storage, serialization, and API communication

Diagram sources

Section sources

Graph Instance Initialization Flow​

G6Flow engine's graph instance initialization is a complex multi-step process involving coordination of multiple components:

Initialization Sequence Diagram​

Diagram sources

Key Initialization Steps​

  1. State Initialization: Initialize global state management through createStore() function
  2. Data Acquisition: Obtain flow chart definition and configuration data from backend API
  3. XML Parsing: Convert XML format flow chart data to JSON structure
  4. Node Mapping: Establish mapping between node types and specific implementations
  5. Graph Instance Creation: Create graphics instance using AntV G6
  6. Plugin Registration: Register plugins such as toolbar, mini-map
  7. Render Execution: Execute first render and apply default layout

Section sources

Event System and Binding Mechanism​

G6Flow engine's event system is the core of its interaction capability, implementing unified event management and handling through the GraphEvent class:

Event System Architecture​

Diagram sources

Event Binding Mechanism​

G6Flow engine implements event binding through the following mechanisms:

  1. Event Listener Registration: Register various event listeners in the init() method
  2. State Management: Manage event state through reactive variables
  3. Event Delegation: Implement efficient event handling using event bubbling mechanism
  4. Context Menu: Support right-click menu functionality for nodes and edges

Diagram sources

Section sources

Custom Node and Edge Rendering​

G6Flow engine supports highly customizable node and edge rendering, implemented through AntV G6's extension mechanism:

Node Rendering Architecture​

Diagram sources

Custom Node Implementation​

Using OrdinaryNode as an example, demonstrating how to implement custom nodes:

const OrdinaryNode = {
  type: NODES.ACTIVITIES,
  options: {
    drawShape(cfg: Record<string, any>, group: any) {
      const type = cfg?.properties?.type
      const isRoot = cfg?.isRoot
      const rect = group.addShape('rect', {
        zIndex: 1,
        attrs: {
          x: -width / 2,
          y: -height / 2,
          width,
          height,
          radius: 1,
          stroke: '#5B8FF9',
          fill: '#C6E5FF',
          lineWidth: 2,
        },
        name: 'rect-shape',
      })
      
      group.addShape('image', {
        zIndex: 100,
        draggable: false,
        attrs: {
          x: -width / 2 + 1,
          y: -height / 2 + 1,
          radius: 1,
          width: 20,
          height: 20,
          img: `/resources/assets/images/${isRoot ? NODES.ACTIVITY : type}.png`,
        },
        name: 'node-icon',
      })
      
      return rect
    },
  },
}

Edge Rendering Mechanism​

G6Flow supports rendering multiple types of edges, including polylines, curves, etc.:

  1. Default Edge Configuration: Set edge style, label configuration, and state style
  2. Dynamic Edge Creation: Support drag-and-drop creation of new edges and conditional edges
  3. Edge State Management: Handle edge selection, hover, and active states
  4. Edge Animation Effects: Provide edge highlighting and animation effects

Section sources

State Management and Behavior Control​

G6Flow engine adopts Vue 3's reactive system and custom state management pattern:

State Management Architecture​

Diagram sources

Behavior Control System​

G6Flow defines all available behaviors through the behavior.ts file:

export const behaviorMap: {
  [key: string]: string
} = {
  dragCanvas: 'drag-canvas',
  dragNode: 'drag-node',
  zoomCanvas: 'zoom-canvas',
  clickSelect: 'click-select',
  createEdge: 'create-edge',
}

These behaviors can be dynamically combined to form different interaction modes:

  1. Drag Canvas: Allows users to drag the entire canvas for navigation
  2. Drag Node: Supports free movement of nodes
  3. Zoom Canvas: Provides canvas zoom in/out functionality
  4. Click Select: Implements node and edge selection functionality
  5. Create Edge: Supports creating new connections by dragging

State Synchronization Mechanism​

G6Flow ensures state consistency through the following mechanisms:

  1. Reactive Variables: Create reactive state using Vue 3's ref and reactive
  2. Event Bus: Implement decoupled communication between components through mitt
  3. State Reset: Provide resetStore() function to reset all states
  4. Data Mapping: Maintain flowMap and flowNodeMap two mapping tables

Section sources

Data Serialization and Deserialization​

G6Flow engine provides complete data serialization and deserialization functionality, supporting XML format data exchange:

Data Flow Architecture​

Diagram sources

Serialization Flow Details​

  1. XML Parsing: Convert XML string to JSON object using fast-xml-parser
  2. Data Cleaning: Filter invalid fields and null values, ensuring data integrity
  3. Structure Reorganization: Convert JSON data to node and edge structures required by G6
  4. UUID Generation: Generate unique identifiers for each node
  5. Coordinate Mapping: Restore original position information of nodes

Deserialization Flow​

Diagram sources

Data Validation and Error Handling​

G6Flow implements multi-level validation and error handling during data processing:

  1. Format Validation: Check XML format correctness
  2. Structure Validation: Verify JSON data structure integrity
  3. Data Integrity: Ensure necessary fields exist and are valid
  4. Fallback Mechanism: Provide default values or error prompts when data is corrupted

Section sources

Performance Optimization Strategies​

G6Flow engine implements multiple performance optimization strategies for large-scale node rendering:

Virtual Scrolling Technology​

For flow charts containing a large number of nodes, G6Flow adopts virtual scrolling technology:

  1. Viewport Clipping: Only render nodes and edges within the visible area
  2. Dynamic Loading: Load distant nodes and connections on demand
  3. Caching Mechanism: Cache rendered elements to avoid repeated calculations
  4. Incremental Updates: Only update changed parts

Lazy Loading Strategy​

Graph Partitioning Technology​

For super large flow charts, G6Flow supports graph partitioning technology:

  1. Intelligent Partitioning: Automatically partition based on node density and connection complexity
  2. Boundary Handling: Handle cross-partition connection relationships
  3. Navigation Assistance: Provide quick jump functionality between partitions
  4. Memory Management: Timely release partition resources no longer in use

Rendering Optimization​

  1. Batch Updates: Merge multiple DOM updates to reduce repaints
  2. Asynchronous Rendering: Use requestAnimationFrame to optimize rendering timing
  3. GPU Acceleration: Utilize CSS3 transforms and transition effects
  4. Resource Preloading: Preload icons and other static resources

Section sources

Troubleshooting Guide​

Common Issues and Solutions​

  1. Nodes Cannot Drag

    • Check if dragNode property is set to true
    • Confirm node configuration hasn't disabled drag functionality
    • Verify event listeners are correctly registered

  2. Edge Creation Failed

    • Confirm createEdge property is enabled
    • Check validity of source and target nodes
    • Verify edge type and style configuration

  3. Data Save Exception

    • Check network connection status
    • Verify XML data format correctness
    • Confirm backend API availability

  4. Performance Issues

    • Reduce number of nodes rendered simultaneously
    • Enable virtual scrolling functionality
    • Optimize node and edge complexity

Debugging Tools​

G6Flow provides multiple debugging tools:

  1. Developer Tools: Built-in debug panel and log output
  2. State Monitoring: Real-time display of current state and configuration
  3. Performance Analysis: Provide rendering time and memory usage statistics
  4. Error Tracking: Detailed error stack and context information

Section sources

Conclusion​

G6Flow engine is a powerful and well-architected flow chart visualization solution. Through modular design and rich functional features, it can meet complex business scenario requirements.

Main Advantages​

  1. Clear Architecture: Layered design makes code easy to understand and maintain
  2. Complete Functionality: Covers all core functions of flow charts
  3. Excellent Performance: Specially optimized for large-scale data
  4. Strong Extensibility: Supports custom nodes, edges, and interaction behaviors
  5. Easy Integration: Provides standardized API interfaces

Technical Features​

  1. Vue 3 Integration: Fully utilizes advantages of modern frontend frameworks
  2. Reactive State: Based on Vue 3's reactive system
  3. AntV G6: Built on mature graphics library
  4. XML Data: Supports standard XML format data exchange
  5. Internationalization: Built-in multi-language support mechanism

Application Scenarios​

G6Flow engine is particularly suitable for the following application scenarios:

  • Process design and management
  • Device network topology diagrams
  • Business process modeling
  • Data flow diagram drawing
  • Project progress planning

Through the detailed introduction in this document, developers can deeply understand the design philosophy and implementation details of G6Flow engine, thereby better utilizing this powerful tool to build their own flow chart applications.

Last updated on