refactor: split code and description

.gitignore

@@ -35,3 +35,4 @@ logs
 
 # temp
 temp-gallery.md
+pnpm-lock.yaml

.prettierignore

@@ -1,6 +1,5 @@
 **/*.svg
 **/*.html
-*.md
 package.json
 .umi
 .umi-production
@@ -11,4 +10,4 @@ dist
 node_modules
 *.ejs
 gatsby-browser.js
-*.min.js
+*.min.js

site/docs/options/graphs-demos/dendrogram/collapse-expand.md

@@ -0,0 +1,7 @@
+## zh
+
+添加 G6 内置 CollapseExpand 交互，双击触发展开/收起。更多 G6 内置交互请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior)。
+
+## en
+
+Add G6's built-in CollapseExpand interaction, allowing nodes to expand/collapse on double-click. For more built-in interactions, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior).

site/docs/options/graphs-demos/dendrogram/compact.md

@@ -0,0 +1,7 @@
+## zh
+
+通过 `compact` 配置紧凑模式。
+
+## en
+
+Use the `compact` configuration for compact mode.

site/docs/options/graphs-demos/dendrogram/default.md

@@ -0,0 +1,7 @@
+## zh
+
+简单的展示。
+
+## en
+
+A simple demonstration.

site/docs/options/graphs-demos/dendrogram/direction.md

@@ -0,0 +1,9 @@
+## zh
+
+通过设置语法糖 `direction` 为 `vertical` `radial` 分别让子节点垂直、径向分布。若不设置 `direction`，则默认 `horizontal` 水平分布。
+注意，节点标签也会自动根据 `direction` 排布，当设置 `node.style.labelPlacement` 时会以后者为准。
+
+## en
+
+Use the syntax sugar `direction` to set the arrangement of child nodes as `vertical` or `radial`. If `direction` is not set, the default is `horizontal`.
+Note that the label placement will adjust based on the `direction`, but if `node.style.labelPlacement` is set, it takes precedence.

site/docs/options/graphs-demos/fishbone/decision.md

@@ -0,0 +1,7 @@
+## zh
+
+决策型鱼骨图（鱼头在左），用于解决问题。
+
+## en
+
+Decision-type fishbone diagram (with the head on the left), used for solving problems.

site/docs/options/graphs-demos/fishbone/default.md

@@ -0,0 +1,7 @@
+## zh
+
+原因型鱼骨图（鱼头在右），用于分析问题。
+
+## en
+
+Cause-type fishbone diagram (with the head on the right), used for analyzing problems.

site/docs/options/graphs-demos/fishbone/layout.md

@@ -0,0 +1,7 @@
+## zh
+
+调整鱼骨分支位置。
+
+## en
+
+Adjust the position of the fishbone branches.

site/docs/options/graphs-demos/flow-direction-graph/custom.md

@@ -0,0 +1,3 @@
+## zh
+
+## en

site/docs/options/graphs-demos/flow-direction-graph/default.md

@@ -0,0 +1,21 @@
+## zh
+
+简单的展示。
+
+通过交互 `map-edge-line-width` 来调整 `edge.style.lineWidth`。包含以下属性：
+
+- `value`（数值或函数，用于计算边的数值
+- `minValue` 和 `maxValue`（可选，最小值和最大值，可以是数值或函数）
+- `minLineWidth` 和 `maxLineWidth`（可选，最小线宽和最大线宽，可以是数值或函数）
+- `scale`（可选，插值函数，用于将数值映射到线宽，支持 `'linear`'、'`log'`、`'pow'`、`'sqrt'` 和自定义插值函数）
+
+## en
+
+A simple demonstration.
+
+Adjust `edge.style.lineWidth` via the behavior `map-edge-line-width`. It includes the following properties:
+
+- `value` (number or function to compute the value of the edge)
+- `minValue` and `maxValue` (optional, minimum and maximum values, can be numbers or functions)
+- `minLineWidth` and `maxLineWidth` (optional, minimum and maximum line widths, can be numbers or functions)
+- `scale` (optional, interpolation function to map values to line widths, supports `'linear'`, `'log'`, `'pow'`, `'sqrt'`, and custom interpolation functions)

site/docs/options/graphs-demos/flow-direction-graph/hover-activate-chain.md

@@ -0,0 +1,7 @@
+## zh
+
+通过添加悬浮高亮交互（注册类型：`hover-activate-chain`）可以高亮显示当前元素及其所在的链路。此交互基于 G6 内置交互 `hover-activate` 实现，并继承了其[配置项](https://g6.antv.antgroup.com/api/behaviors/hover-activate)。
+
+## en
+
+By adding the hover highlight behavior (registration type: `hover-activate-chain`), you can highlight the current element and its entire chain. This behavior is based on the G6 built-in behavior `hover-activate` and inherits its [configuration options](https://g6.antv.antgroup.com/api/behaviors/hover-activate).

site/docs/options/graphs-demos/flow-direction-graph/hover-activate-neigbor.md

@@ -0,0 +1,7 @@
+## zh
+
+通过添加悬浮高亮交互（注册类型：`hover-activate-neighbors`）可以高亮当前元素及其相邻元素。该交互基于 G6 内置交互 `hover-activate` 实现，并继承了其[配置项](https://g6.antv.antgroup.com/api/behaviors/hover-activate)。
+
+## en
+
+By adding the hover highlight behavior (registration type: `hover-activate-neighbors`), you can highlight the current element and its neighboring elements. This behavior is based on the G6 built-in behavior `hover-activate` and inherits its [configuration options](https://g6.antv.antgroup.com/api/behaviors/hover-activate).

site/docs/options/graphs-demos/flow-graph/custom-node.md

@@ -0,0 +1,7 @@
+## zh
+
+通过 `node.component` 来进行自定义节点，需要与 `node.size` 配合实现。
+
+## en
+
+Customize nodes using `node.component`, which needs to be paired with `node.size` to work properly.

site/docs/options/graphs-demos/flow-graph/default.md

@@ -0,0 +1,7 @@
+## zh
+
+简单的展示。
+
+## en
+
+A simple demonstration.

site/docs/options/graphs-demos/flow-graph/hover-activate-chain.md

@@ -0,0 +1,7 @@
+## zh
+
+通过添加悬浮高亮交互（注册类型：`hover-activate-chain`），可以高亮显示元素及其所在的链路。
+
+## en
+
+By adding hover-highlight interaction (registered as `hover-activate-chain`), elements and their associated chains are highlighted on hover.

site/docs/options/graphs-demos/indented-tree/collapse-expand.md

@@ -0,0 +1,27 @@
+## zh
+
+通过调整 `collapse-expand-react-node` 交互配置来控制展开/收起子节点的操作。
+
+- `enable`: 是否启用该交互，类型为 `boolean | ((data: NodeData) => boolean)`，默认为 `false`
+- `trigger`: 点击指定元素，触发节点收起/展开；`'icon'` 代表点击图标触发，`'node'` 代表点击节点触发，`HTMLElement` 代表自定义元素，默认为 `'icon'`
+- `direction`: 收起/展开指定方向上的邻居节点，`'in'` 代表前驱节点，`'out'` 代表后继节点，`'both'` 代表前驱和后继节点，默认为 `'out'`
+- `iconType`: 内置图标语法糖，`'plus-minus'` 或 `'arrow-count'`
+- `iconRender`: 渲染函数，用于自定义收起/展开图标，参数为 `isCollapsed`（当前节点是否已收起）和 `data`（节点数据），返回自定义图标
+- `iconPlacement`: 图标相对于节点的位置，可选值为 `'left'`、`'right'`、`'top'`、`'bottom'`，默认为 `'bottom'`
+- `iconOffsetX/iconOffsetY`: 图标相对于节点的水平、垂直偏移量，默认为 `0`
+- `iconClassName/iconStyle`: 指定图标的 CSS 类名及内联样式
+- `refreshLayout`: 每次收起/展开节点后，是否刷新布局
+
+## en
+
+Adjust the `collapse-expand-react-node` interaction configuration to control expand/collapse behavior for child nodes.
+
+- `enable`: Whether to enable the interaction, type is `boolean | ((data: NodeData) => boolean)`, default is `false`
+- `trigger`: The element that triggers node collapse/expand; `'icon'` triggers on icon click, `'node'` triggers on node click, and `HTMLElement` allows custom elements, default is `'icon'`
+- `direction`: Collapse/expand neighbor nodes in the specified direction, `'in'` for predecessor nodes, `'out'` for successor nodes, and `'both'` for both predecessors and successors, default is `'out'`
+- `iconType`: Built-in icon options, either `'plus-minus'` or `'arrow-count'`
+- `iconRender`: Render function to customize the collapse/expand icon, takes `isCollapsed` (whether the node is collapsed) and `data` (node data) as parameters, returns a custom icon
+- `iconPlacement`: Icon position relative to the node, can be `'left'`, `'right'`, `'top'`, or `'bottom'`, default is `'bottom'`
+- `iconOffsetX/iconOffsetY`: Horizontal/vertical offset for the icon relative to the node, default is `0`
+- `iconClassName/iconStyle`: CSS class name and inline styles for the icon
+- `refreshLayout`: Whether to refresh the layout after each collapse/expand operation

site/docs/options/graphs-demos/indented-tree/color.md

@@ -0,0 +1,7 @@
+## zh
+
+`assign-color-by-branch` 是内置数据转换的一个环节，可以通过修改 `colors` 来分配不同的颜色来区分思维导图的分支。
+
+## en
+
+`assign-color-by-branch` is a built-in data transformation step that allows you to assign different colors to branches by modifying`colors`.

site/docs/options/graphs-demos/indented-tree/custom-node.md

@@ -0,0 +1,7 @@
+## zh
+
+通过 `node.component` 来进行自定义节点，需要与 `node.size` 配合实现。
+
+## en
+
+Customize nodes using `node.component`, which must be paired with `node.size` to take effect.

site/docs/options/graphs-demos/indented-tree/default.md

@@ -0,0 +1,7 @@
+## zh
+
+简单的展示。
+
+## en
+
+A simple demonstration.

site/docs/options/graphs-demos/indented-tree/direction.md

@@ -0,0 +1,7 @@
+## zh
+
+通过设置 `direction` 为 `alternate` `left` 分别让子节点自由、左侧分布。若不设置 `direction`，则默认 `right` 右侧分布。
+
+## en
+
+Set `direction` to `alternate` or `left` to distribute child nodes freely or to the left. If not set, the default is `right` (right distribution).

site/docs/options/graphs-demos/indented-tree/type.md

@@ -0,0 +1,7 @@
+## zh
+
+通过 `type` 语法糖，使用预设的风格：线条风格和方框风格。
+
+## en
+
+Use the `type` syntax sugar to apply preset styles: line style or boxed style.

site/docs/options/graphs-demos/mind-map/collapse-expand.md

@@ -0,0 +1,27 @@
+## zh
+
+通过调整 `collapse-expand-react-node` 交互配置来控制展开/收起子节点的操作。
+
+- `enable`: 是否启用该交互，类型为 `boolean | ((data: NodeData) => boolean)`，默认为 `false`
+- `trigger`: 点击指定元素，触发节点收起/展开；`'icon'` 代表点击图标触发，`'node'` 代表点击节点触发，`HTMLElement` 代表自定义元素，默认为 `'icon'`
+- `direction`: 收起/展开指定方向上的邻居节点，`'in'` 代表前驱节点，`'out'` 代表后继节点，`'both'` 代表前驱和后继节点，默认为 `'out'`
+- `iconType`: 内置图标语法糖，`'plus-minus'` 或 `'arrow-count'`
+- `iconRender`: 渲染函数，用于自定义收起/展开图标，参数为 `isCollapsed`（当前节点是否已收起）和 `data`（节点数据），返回自定义图标
+- `iconPlacement`: 图标相对于节点的位置，可选值为 `'left'`、`'right'`、`'top'`、`'bottom'`，默认为 `'bottom'`
+- `iconOffsetX/iconOffsetY`: 图标相对于节点的水平、垂直偏移量，默认为 `0`
+- `iconClassName/iconStyle`: 指定图标的 CSS 类名及内联样式
+- `refreshLayout`: 每次收起/展开节点后，是否刷新布局
+
+## en
+
+Adjust the `collapse-expand-react-node` interaction configuration to control expand/collapse behavior for child nodes.
+
+- `enable`: Whether to enable the interaction, type is `boolean | ((data: NodeData) => boolean)`, default is `false`
+- `trigger`: The element that triggers node collapse/expand; `'icon'` triggers on icon click, `'node'` triggers on node click, and `HTMLElement` allows custom elements, default is `'icon'`
+- `direction`: Collapse/expand neighbor nodes in the specified direction, `'in'` for predecessor nodes, `'out'` for successor nodes, and `'both'` for both predecessors and successors, default is `'out'`
+- `iconType`: Built-in icon options, either `'plus-minus'` or `'arrow-count'`
+- `iconRender`: Render function to customize the collapse/expand icon, takes `isCollapsed` (whether the node is collapsed) and `data` (node data) as parameters, returns a custom icon
+- `iconPlacement`: Icon position relative to the node, can be `'left'`, `'right'`, `'top'`, or `'bottom'`, default is `'bottom'`
+- `iconOffsetX/iconOffsetY`: Horizontal/vertical offset for the icon relative to the node, default is `0`
+- `iconClassName/iconStyle`: CSS class name and inline styles for the icon
+- `refreshLayout`: Whether to refresh the layout after each collapse/expand operation

site/docs/options/graphs-demos/mind-map/color.md

@@ -0,0 +1,7 @@
+## zh
+
+`assign-color-by-branch` 是内置数据转换的一个环节，可以通过修改 `colors` 来分配不同的颜色来区分思维导图的分支。
+
+## en
+
+The `assign-color-by-branch` feature allows branch differentiation by modifying `colors` to assign different colors to the mind map branches.

site/docs/options/graphs-demos/mind-map/custom-node.md

@@ -0,0 +1,7 @@
+## zh
+
+通过 `node.component` 来进行自定义节点，需要与 `node.size` 配合实现。
+
+## en
+
+Customize nodes using `node.component`, in conjunction with `node.size`.

site/docs/options/graphs-demos/mind-map/default.md

@@ -0,0 +1,7 @@
+## zh
+
+基本用法。
+
+## en
+
+A simple demonstration.

site/docs/options/graphs-demos/mind-map/direction.md

@@ -0,0 +1,7 @@
+## zh
+
+通过设置 `direction` 为 `right` `left` 分别让子节点右侧、左侧分布。若不设置 `direction`，则默认自由分布。
+
+## en
+
+Set `direction` to `right` or `left` to distribute child nodes on the right or left. If `direction` is not set, the default is free distribution.

site/docs/options/graphs-demos/mind-map/type.md

@@ -0,0 +1,7 @@
+## zh
+
+通过 `type` 语法糖，使用预设的风格：线条风格和方框风格。
+
+## en
+
+Use the `type` syntax to apply preset styles: linear style and boxed style.

site/docs/options/graphs-demos/network-graph/default.md

@@ -0,0 +1,7 @@
+## zh
+
+简单的展示。
+
+## en
+
+A simple demonstration.

site/docs/options/graphs-demos/network-graph/label.md

@@ -0,0 +1,7 @@
+## zh
+
+展示节点标签，默认显示三行文字，鼠标悬浮时显示全部内容。
+
+## en
+
+Display node labels. By default, three lines of text are shown, with the full content displayed on hover.

site/docs/options/graphs-demos/network-graph/node-importance.md

@@ -0,0 +1,7 @@
+## zh
+
+根据节点重要性映射到节点大小，点击[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size)查看更多配置项
+
+## en
+
+Map node importance to node size. Click [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) for more configuration options.

site/docs/options/graphs-demos/organization-chart/collapse-expand.md

@@ -0,0 +1,27 @@
+## zh
+
+通过调整 `collapse-expand-react-node` 交互配置来控制展开/收起子节点的操作。
+
+- `enable`: 是否启用该交互，类型为 `boolean | ((data: NodeData) => boolean)`，默认为 `false`
+- `trigger`: 点击指定元素，触发节点收起/展开；`'icon'` 代表点击图标触发，`'node'` 代表点击节点触发，`HTMLElement` 代表自定义元素，默认为 `'icon'`
+- `direction`: 收起/展开指定方向上的邻居节点，`'in'` 代表前驱节点，`'out'` 代表后继节点，`'both'` 代表前驱和后继节点，默认为 `'out'`
+- `iconType`: 内置图标语法糖，`'plus-minus'` 或 `'arrow-count'`
+- `iconRender`: 渲染函数，用于自定义收起/展开图标，参数为 `isCollapsed`（当前节点是否已收起）和 `data`（节点数据），返回自定义图标
+- `iconPlacement`: 图标相对于节点的位置，可选值为 `'left'`、`'right'`、`'top'`、`'bottom'`，默认为 `'bottom'`
+- `iconOffsetX/iconOffsetY`: 图标相对于节点的水平、垂直偏移量，默认为 `0`
+- `iconClassName/iconStyle`: 指定图标的 CSS 类名及内联样式
+- `refreshLayout`: 每次收起/展开节点后，是否刷新布局
+
+## en
+
+Adjust the `collapse-expand-react-node` interaction configuration to control expand/collapse behavior for child nodes.
+
+- `enable`: Whether to enable the interaction, type is `boolean | ((data: NodeData) => boolean)`, default is `false`
+- `trigger`: The element that triggers node collapse/expand; `'icon'` triggers on icon click, `'node'` triggers on node click, and `HTMLElement` allows custom elements, default is `'icon'`
+- `direction`: Collapse/expand neighbor nodes in the specified direction, `'in'` for predecessor nodes, `'out'` for successor nodes, and `'both'` for both predecessors and successors, default is `'out'`
+- `iconType`: Built-in icon options, either `'plus-minus'` or `'arrow-count'`
+- `iconRender`: Render function to customize the collapse/expand icon, takes `isCollapsed` (whether the node is collapsed) and `data` (node data) as parameters, returns a custom icon
+- `iconPlacement`: Icon position relative to the node, can be `'left'`, `'right'`, `'top'`, or `'bottom'`, default is `'bottom'`
+- `iconOffsetX/iconOffsetY`: Horizontal/vertical offset for the icon relative to the node, default is `0`
+- `iconClassName/iconStyle`: CSS class name and inline styles for the icon
+- `refreshLayout`: Whether to refresh the layout after each collapse/expand operation

site/docs/options/graphs-demos/organization-chart/custom-node.md

@@ -0,0 +1,7 @@
+## zh
+
+使用自定义的 React 节点进行图的渲染。此示例中使用了内置的 RC 组件 `OrganizationChartNode` 进行简单实现，你也可以自行开发 RC 组件以满足特定需求。
+
+## en
+
+Render the chart using custom React nodes. The example uses the built-in `OrganizationChartNode`, but you can develop your own RC component for specific needs.

site/docs/options/graphs-demos/organization-chart/default.md

@@ -0,0 +1,7 @@
+## zh
+
+简单的展示。
+
+## en
+
+A simple demonstration.

site/docs/options/graphs-demos/organization-chart/direction.md

@@ -0,0 +1,7 @@
+## zh
+
+通过设置 `direction` 为 `vertical` `horizontal` 分别让垂直（自上而下）、水平（自左而右）分布。若不设置 `direction`，则默认垂直分布。
+
+## en
+
+Set `direction` to `vertical` for top-down or `horizontal` for left-right layout. The default is vertical.

site/docs/options/graphs/dendrogram.en.md

@@ -19,13 +19,11 @@ It is suitable for displaying hierarchical data relationships, clarifying key po
 
 ## Examples
 
-<code id="demo-dendrogram-default" src="./demos/dendrogram/default.tsx" description="A simple demonstration.">Basic Usage</code>
-
-<code id="demo-dendrogram-direction" src="./demos/dendrogram/direction.tsx" description="Use the syntax sugar `direction` to set the arrangement of child nodes as `vertical` or `radial`. If `direction` is not set, the default is `horizontal`. Note that the label placement will adjust based on the `direction`, but if `node.style.labelPlacement` is set, it takes precedence.">Arrangement Direction</code>
-
-<code id="demo-dendrogram-compact" src="./demos/dendrogram/compact.tsx" description="Use the `compact` configuration for compact mode.">Compact Mode</code>
-
-<code id="demo-dendrogram-collapse-expand" src="./demos/dendrogram/collapse-expand.tsx" description="Add G6's built-in CollapseExpand interaction, allowing nodes to expand/collapse on double-click. For more built-in interactions, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior).">Expand/Collapse Nodes</code>
+<!-- prettier-ignore -->
+<code src="../graphs-demos/dendrogram/default.tsx">Basic Usage</code>
+<code src="../graphs-demos/dendrogram/direction.tsx">Arrangement Direction</code>
+<code src="../graphs-demos/dendrogram/compact.tsx">Compact Mode</code>
+<code src="../graphs-demos/dendrogram/collapse-expand.tsx">Expand/Collapse Nodes</code>
 
 ## API
 
@@ -39,5 +37,5 @@ Common props ref: [Common Graph Properties](./overview#common-graph-properties)
 | compact | Whether to enable compact mode | `boolean` | `false` |
 | layout | Tree layout configuration | [`DendrogramLayoutOptions`](https://g6.antv.antgroup.com/en/api/layouts/dendrogram-layout) | `{ type: 'dendrogram' }` |
 | behaviors | Set user interaction events, also supports G6 built-in behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - |
-| plugins   | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
+| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
 | transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - |