SSR extension for G6 5.0

This extension package provides SSR support for G6 5.0, which supports canvas rendering in server side.

Usage

Install

npm install @antv/g6-ssr

Render in JavaScript API

For complete options, please refer to G6 Graph Options

import { createGraph } from '@antv/g6-ssr';

const graph = await createGraph({
  width: 500,
  height: 500,
  imageType: 'png', // or 'jpeg'
  data: {
    // data
  },
  // other options
});

graph.exportToFile('image');
// -> image.png

graph.toBuffer();
// -> get buffer

Render in CLI

npx g6-ssr export -i [graph-options].json -o ./image

Export SVG / PDF

When render in JavaScript API, you can pass outputType option to export SVG or PDF.

const graph = await createGraph({
  width: 500,
  height: 500,
  data: {
    // data
  },
  outputType: 'svg', // or 'pdf'
  // other options
});

When render in CLI, you can pass -t or --type option to export SVG or PDF.

npx g6-ssr export -i [graph-options].json -o ./file -t pdf

Register Custom G6 Extensions

If you need to register custom extensions of G6, please use the registry function exported from @antv/g6-ssr.

import { createGraph, registry } from '@antv/g6-ssr';
import { BaseNode, ExtensionCategory } from '@antv/g6';

class CustomNode extends BaseNode {
  // custom node
}

registry(ExtensionCategory.Node, 'custom-node', CustomNode);

const graph = await createGraph({
  width: 500,
  height: 500,
  node: {
    type: 'custom-node',
    // other options
  },
  // other options
});

Use Plugins

When using G6-SSR, you can also use G render plugins. Here's how to use plugins in server-side rendering:

import { createGraph } from '@antv/g6-ssr';
import { Plugin as RoughCanvasPlugin } from '@antv/g-plugin-rough-canvas-renderer';

const graph = await createGraph({
  width: 500,
  height: 500,
  renderPlugins: [new RoughCanvasPlugin()],
  data: {
    // data
  },
});

License

MIT