docs(site): add docs about how to set renderer (#6216)

Co-authored-by: antv <antv@antfin.com>

packages/site/docs/manual/further-reading/renderer.en.md

@@ -0,0 +1,87 @@
+---
+title: renderer
+---
+
+G6 uses Canvas as the default renderer, but also supports rendering with SVG and WebGL. To switch to the SVG or WebGL renderer, simply pass the `renderer` parameter during initialization.
+
+## Using the SVG Renderer
+
+1. Install the renderer dependency:
+
+```bash
+npm install @antv/g-svg
+```
+
+2. Configure the renderer:
+
+```javascript
+import { Renderer as SVGRenderer } from '@antv/g-svg';
+import { Graph } from '@antv/g6';
+
+const graph = new Graph({
+  // ... other options
+  // All canvases will use the SVG renderer here
+  renderer: () => new SVGRenderer(),
+});
+```
+
+## Using the WebGL Renderer
+
+1. Install the renderer dependency:
+
+```bash
+npm install @antv/g-webgl
+```
+
+2. Configure the renderer:
+
+```javascript
+import { Renderer as WebGLRenderer } from '@antv/g-webgl';
+import { Graph } from '@antv/g6';
+
+const graph = new Graph({
+  // ... other options
+  // All canvases will use the WebGL renderer here
+  renderer: () => new WebGLRenderer(),
+});
+```
+
+## Using Different Renderers for Different Layers
+
+G6 uses layered canvases for rendering, so `renderer` is a callback function that takes the canvas type as a parameter and returns the renderer instance. If you want to use different renderers on different canvases, you can configure it like this:
+
+```javascript
+import { Renderer as SVGRenderer } from '@antv/g-svg';
+import { Renderer as WebGLRenderer } from '@antv/g-webgl';
+
+const graph = new Graph({
+  // ... other options
+  renderer: (layer) => {
+    // The main canvas uses the WebGL renderer, and the other canvases use the SVG renderer
+    if (layer === 'main') return new WebGLRenderer();
+    return new SVGRenderer();
+  },
+});
+```
+
+## Switch Renderers Dynamically
+
+G6 does not provide a API to switch the renderer, but you can still update the `renderer` option through the `setOptions` method.
+
+```javascript
+import { Renderer as SVGRenderer } from '@antv/g-svg';
+import { Renderer as WebGLRenderer } from '@antv/g-webgl';
+
+// Use the WebGL renderer by default
+const graph = new Graph({
+  // ... other options
+  renderer: () => new WebGLRenderer(),
+});
+
+await graph.render();
+
+// Switch to the SVG renderer
+graph.setOptions({
+  renderer: () => new SVGRenderer(),
+});
+```

packages/site/docs/manual/further-reading/renderer.zh.md

@@ -0,0 +1,87 @@
+---
+title: 渲染器
+---
+
+G6 默认使用 Canvas 作为渲染器，但也支持通过 SVG 和 WebGL 进行渲染，要切换到 SVG 或 WebGL 渲染器，只需在初始化时传入 `renderer` 参数即可。
+
+## 使用 SVG 渲染器
+
+1. 安装渲染器依赖：
+
+```bash
+npm install @antv/g-svg
+```
+
+2. 配置渲染器：
+
+```javascript
+import { Renderer as SVGRenderer } from '@antv/g-svg';
+import { Graph } from '@antv/g6';
+
+const graph = new Graph({
+  // ... other options
+  // 这里所有的画布都会使用 SVG 渲染器
+  renderer: () => new SVGRenderer(),
+});
+```
+
+## 使用 WebGL 渲染器
+
+1. 安装渲染器依赖：
+
+```bash
+npm install @antv/g-webgl
+```
+
+2. 配置渲染器：
+
+```javascript
+import { Renderer as WebGLRenderer } from '@antv/g-webgl';
+import { Graph } from '@antv/g6';
+
+const graph = new Graph({
+  // ... other options
+  // 这里所有的画布都会使用 WebGL 渲染器
+  renderer: () => new WebGLRenderer(),
+});
+```
+
+## 分层使用不同的渲染器
+
+G6 采用了分层画布进行渲染，因此 `renderer` 是一个回调函数，参数是画布类型，返回渲染器实例，如果你想在不同的画布上使用不同的渲染器，可以这样配置：
+
+```javascript
+import { Renderer as SVGRenderer } from '@antv/g-svg';
+import { Renderer as WebGLRenderer } from '@antv/g-webgl';
+
+const graph = new Graph({
+  // ... other options
+  renderer: (layer) => {
+    // 主画布使用 WebGL 渲染器，其他画布使用 SVG 渲染器
+    if (layer === 'main') return new WebGLRenderer();
+    return new SVGRenderer();
+  },
+});
+```
+
+## 动态切换渲染器
+
+G6 没有提供单独的 API 来切换渲染器，但你仍可以通过 `setOptions` 方法来更新 `renderer` 参数：
+
+```javascript
+import { Renderer as SVGRenderer } from '@antv/g-svg';
+import { Renderer as WebGLRenderer } from '@antv/g-webgl';
+
+// 初始化时使用 WebGL 渲染器
+const graph = new Graph({
+  // ... other options
+  renderer: () => new WebGLRenderer(),
+});
+
+await graph.render();
+
+// 切换到 SVG 渲染器
+graph.setOptions({
+  renderer: () => new SVGRenderer(),
+});
+```