From G6 to X6: Enhancing YOHO Platform’s General‑Purpose Graph Editing

The article explains why the YOHO platform, originally built on AntV G6 for graph visualization, is being refactored to use AntV X6, which offers richer graph‑editing capabilities. The shift is motivated by the need for easier canvas manipulation, better integration with HTML/React/Vue, and reduced development effort for custom shapes and connections.

Reasons for migrating from G6 to X6:

X6 excels at graph editing while G6 focuses on data visualization.

X6 provides a more developer‑friendly API, lowering the learning curve.

The performance requirements of the orchestration (编排) scenario are modest, and X6 satisfies them.

Generality of the platform

YOHO aims to be a one‑stop solution for orchestration, allowing both front‑end developers and non‑technical users to configure workflows. The platform currently supports flow‑chart orchestration and plans to expose reusable APIs and visual configuration panels.

Canvas initialization

To create a canvas with X6, the following configuration is typical:

const graph = new Graph({
  container: document.getElementById('container'),
  width: 800,
  height: 600,
  // node rotation
  rotating: false,
  // node resizing
  resizing: true,
  // background
  background: { color: '#f8f9fa' },
  // grid
  grid: { visible: true },
  // ...other options
});

Many configuration items can be exposed through a visual form, reducing manual coding.

Node creation

A basic rectangular node can be defined as:

const rect = new Shape.Rect({
  x: 100,
  y: 40,
  width: 100,
  height: 40,
  attrs: {
    body: { fill: '#2ECC71', stroke: '#000' },
    label: { text: 'rect', fill: '#333', fontSize: 13 }
  }
});

More complex nodes may require custom SVG knowledge, but X6 also allows rendering nodes via HTML, React, or Vue components, simplifying development.

Node component structure

- shape
  |-- index.tsx
  |-- node.tsx
  |-- thumb.tsx

The thumb.tsx handles the thumbnail shown in the component palette, while node.tsx renders the node on the canvas. Ports (connection points) are defined in index.tsx .

Edge configuration

edge.attr({
  line: {
    sourceMarker: 'block',
    targetMarker: {
      name: 'ellipse',
      rx: 10, // x‑radius of ellipse arrow
      ry: 6   // y‑radius of ellipse arrow
    }
  }
});

Edges are mostly configured via existing attributes, making visual configuration straightforward.

Form generality

Beyond drawing, each component’s properties are described in JSON. To enable visual editing of these properties, YOHO leverages the open‑source Form Render library and its visual form builder (fr‑generator). For non‑form scenarios (e.g., expression editors), source‑code components can be loaded as CDN modules.

Trigger mechanism

After orchestration is defined, the engine produces a Graph JSON. Each business can provide its own runtime (DSL) to interpret this JSON. YOHO also supports user‑defined triggers that fire when specific actions occur on the platform, passing data to external services.

Conclusion

The article shares recent thoughts and implementations aimed at making the YOHO orchestration platform more generic and developer‑friendly. While some features are already in place, others still require effort. The overall direction is to decouple graph rendering from business logic, promote reusable visual components, and provide flexible configuration mechanisms.