docs: add english documentations

site/docs/options/general-properties.en.md

@@ -0,0 +1,14 @@
+---
+title: General Properties
+---
+
+> Tips: The following general properties apply to chart components. Components that do not support these properties will be specifically noted.
+
+| Parameter           | Description                                                 | Type                            | Default |
+| ------------------- | ----------------------------------------------------------- | ------------------------------- | ------- |
+| containerStyle      | Configures the style of the chart container, accepts an object with CSS properties and values | `React.CSSProperties`           | -       |
+| containerAttributes | Adds custom HTML attributes to the chart container           | `Record<string, any>`           | -       |
+| className           | Adds a className to the outermost component wrapper          | `string`                        | -       |
+| loading             | Indicates whether the chart is in a loading state            | `boolean`                       | `false` |
+| loadingTemplate     | Custom loading template, the element displayed when the chart is loading | `React.ReactElement`            | -       |
+| errorTemplate       | Custom error template, a function that returns the error information to display when the chart encounters an error | `(e: Error) => React.ReactNode` | -       |

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

@@ -0,0 +1,39 @@
+---
+title: Dendrogram
+order: 3
+---
+
+A dendrogram breaks down items or phenomena into a tree-like structure to systematically display their composition or internal logic.
+
+```js
+import { Dendrogram } from '@ant-design/graphs';
+```
+
+## When to Use
+
+It is suitable for displaying hierarchical data relationships, clarifying key points of an issue, and outlining logical steps to achieve a goal.
+
+## Code 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>
+
+## API
+
+For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties)
+
+### Dendrogram
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| direction | Syntax sugar to set the arrangement direction of tree nodes. When `layout.direction` is set, it takes precedence. | `'vertical'` \| `'horizontal'` \| `'radial'` | `'horizontal'` |
+| 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 interactions. For more configuration details, refer to [here](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - |
+| plugins | Set canvas plugins for rendering logic and additional components. Also supports G6 built-in plugins. For more configuration details, refer to [here](https://g6.antv.antgroup.com/en/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - |
+| transforms | Configure data transformations to handle user input and convert it into internal data flows. Also supports G6 built-in data transformers. For more configuration details, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - |

site/docs/options/graphs/flow-direction-graph.en.md

@@ -0,0 +1,29 @@
+---
+title: Flow Direction Graph
+order: 6
+---
+
+Used to visually display flow paths and value changes.
+
+```js
+import { FlowDirectionGraph } from '@ant-design/graphs';
+```
+
+## When to Use
+
+Ideal for complex information that requires clear logical relationships or decision support. It visually and clearly shows data flow and relationships, improving understanding and decision-making efficiency.
+
+## Code Examples
+
+<code id="demo-flow-direction-graph-default" src="./demos/flow-direction-graph/default.tsx" description="A simple demonstration.<br> Adjust `edge.style.lineWidth` via the interaction `map-edge-line-width`. It includes the following properties:<br> - `value` (number or function to compute the value of the edge)<br> - `minValue` and `maxValue` (optional, minimum and maximum values, can be numbers or functions)<br> - `minLineWidth` and `maxLineWidth` (optional, minimum and maximum line widths, can be numbers or functions)<br> - `scale` (optional, interpolation function to map values to line widths, supports `'linear'`, `'log'`, `'pow'`, `'sqrt'`, and custom interpolation functions)">Basic Usage</code>
+
+## API
+
+For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties)
+
+| Property  | Description | Type | Default Value |
+| ---       | ---         | ---  | ---           |
+| layout    | AntV Dagre layout configuration | [AntVDagreLayoutOptions](https://g6.antv.antgroup.com/en/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` |
+| behaviors | Set user interaction events, also supports G6 built-in interactions. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - |
+| plugins   | Set canvas plugins to handle rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - |
+| transforms | Configure data transformations to process user input and convert it into internal data flows. Also supports G6 built-in transformers. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - |

site/docs/options/graphs/flow-graph.en.md

@@ -0,0 +1,37 @@
+---
+title: Flow Graph
+order: 5
+---
+
+Used to visually represent the steps and decision points of a process or system.
+
+```js
+import { FlowGraph } from '@ant-design/graphs';
+```
+
+## When to Use
+
+A flowchart shows the entire process from start to finish. Each node represents a specific step or decision point, and the edges indicate the sequence and relationships between steps.
+
+- Suitable for scenarios that require displaying linear processes or steps.
+- Useful for planning and tracking project progress, clarifying task order and dependencies.
+- Ideal for building decision trees, showing different decision points and paths.
+
+## Code Examples
+
+<code id="demo-flow-graph-default" src="./demos/flow-graph/default.tsx" description="A simple demonstration.">Basic Usage</code>
+
+<code id="demo-flow-graph-hover" src="./demos/flow-graph/hover-activate-chain.tsx" description="By adding hover-highlight interaction (registered as `hover-activate-chain`), elements and their associated chains are highlighted on hover.">Highlight Elements and Their Chains</code>
+
+<code id="demo-flow-graph-custom-node" src="./demos/flow-graph/custom-node.tsx" description="Customize nodes using `node.component`, which needs to be paired with `node.size` to work properly.">Custom Nodes</code>
+
+## API
+
+For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties)
+
+| Property  | Description | Type | Default Value |
+| ---       | ---         | ---  | ---           |
+| layout    | AntV Dagre layout configuration | [AntVDagreLayoutOptions](https://g6.antv.antgroup.com/en/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` |
+| behaviors | Set user interaction events, also supports G6 built-in interactions. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - |
+| plugins   | Set canvas plugins to handle rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - |
+| transforms | Configure data transformations to process user input and convert it into internal data flows. Also supports G6 built-in transformers. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - |

site/docs/options/graphs/indented-tree.en.md

@@ -0,0 +1,50 @@
+---
+title: Indented Tree
+order: 2
+---
+
+An indented tree is used to represent hierarchical data, displaying parent-child relationships through indentation.
+
+```js
+import { IndentedTree } from '@ant-design/graphs';
+```
+
+## When to Use
+
+- **File Directory Structure**: Show hierarchy of directories and files in a file system.
+- **Organizational Structure**: Display the hierarchy of a company or team, and department relationships.
+- **Navigation Menus**: Show hierarchical navigation menus for websites or applications.
+- **Category Hierarchy**: Represent hierarchical relationships in classification systems, such as product categories or article categories.
+
+## Code Examples
+
+<code id="demo-indented-tree-default" src="./demos/indented-tree/default.tsx" description="A simple demonstration.">Basic Usage</code>
+
+<code id="demo-indented-tree-type" src="./demos/indented-tree/type.tsx" description="Use the `type` syntax sugar to apply preset styles: line style or boxed style.">Styles</code>
+
+<code id="demo-indented-tree-direction" src="./demos/indented-tree/direction.tsx" description="Set `direction` to `alternate` or `left` to distribute child nodes freely or to the left. If not set, the default is `right` (right distribution).">Child Node Distribution</code>
+
+<code id="demo-indented-tree-custom-node" src="./demos/indented-tree/custom-node.tsx" description="Customize nodes using `node.component`, which must be paired with `node.size` to take effect.">Custom Nodes</code>
+
+<code id="demo-indented-tree-collapse-expand" src="./demos/indented-tree/collapse-expand.tsx" description="
+Adjust the `collapse-expand-react-node` interaction configuration to control expand/collapse behavior for child nodes.<br> - `enable`: Whether to enable the interaction, type is `boolean | ((data: NodeData) => boolean)`, default is `false` <br> - `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'` <br> - `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'` <br> - `iconType`: Built-in icon options, either `'plus-minus'` or `'arrow-count'` <br> - `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 <br> - `iconPlacement`: Icon position relative to the node, can be `'left'`, `'right'`, `'top'`, or `'bottom'`, default is `'bottom'` <br> - `iconOffsetX/iconOffsetY`: Horizontal/vertical offset for the icon relative to the node, default is `0` <br> - `iconClassName/iconStyle`: CSS class name and inline styles for the icon <br> - `refreshLayout`: Whether to refresh the layout after each collapse/expand operation
+">Expand/Collapse Child Nodes</code>
+
+<code id="demo-indented-tree-color" src="./demos/indented-tree/color.tsx" description="`assign-color-by-branch` is a built-in data transformation step that allows you to assign different colors to branches by modifying `colors`.">Set Branch Colors</code>
+
+## API
+
+For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties)
+
+### IndentedTree
+
+| Property      | Description | Type | Default Value |
+| ---           | ---         | ---  | ---           |
+| type          | Syntax sugar for setting the display style of the indented tree. When `node.component` is set, it takes precedence. | `'default'` \| `'linear'` \| `'boxed'` | `'default'` |
+| direction     | Syntax sugar for setting the node arrangement direction. When `layout.direction` is set, it takes precedence. | `'left'` \| `'right'` \| `'alternate'` | `'right'` |
+| nodeMinWidth  | Minimum node width in the indented tree | `number` | `0` |
+| nodeMaxWidth  | Maximum node width in the indented tree | `number` | `300` |
+| layout        | Indented tree layout configuration | [IndentedLayoutOptions](https://g6.antv.antgroup.com/en/api/layouts/indented-layout) | `{ type: 'indented' }` |
+| behaviors     | Set user interaction events, also supports G6 built-in interactions. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - |
+| plugins       | Set canvas plugins to handle rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - |
+| transforms    | Configure data transformations to process user input and convert it into internal data flows. Also supports G6 built-in transformers. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - |

site/docs/options/graphs/mind-map.en.md

@@ -0,0 +1,47 @@
+---
+title: Mind Map
+order: 1
+---
+
+A mind-mapping tool to help users organize and express their thoughts systematically.
+
+```js
+import { MindMap } from '@ant-design/graphs';
+```
+
+## When to Use
+
+When information is complex or requires clear logical relationships, organize it into a series of nodes and branches to simplify understanding.
+
+## Code Examples
+
+<code id="demo-mind-map-default" src="./demos/mind-map/default.tsx" description="A simple demonstration.">Basic Usage</code>
+
+<code id="demo-mind-map-type" src="./demos/mind-map/type.tsx" description="Use the `type` syntax to apply preset styles: linear style and boxed style.">Styles</code>
+
+<code id="demo-mind-map-direction" src="./demos/mind-map/direction.tsx" description="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.">Child Node Distribution</code>
+
+<code id="demo-mind-map-custom-node" src="./demos/mind-map/custom-node.tsx" description="Customize nodes using `node.component`, in conjunction with `node.size`.">Custom Nodes</code>
+
+<code id="demo-mind-map-collapse-expand" src="./demos/mind-map/collapse-expand.tsx" description="
+Adjust the `collapse-expand-react-node` interaction configuration to control expand/collapse behavior for child nodes.<br> - `enable`: Whether to enable the interaction, type is `boolean | ((data: NodeData) => boolean)`, default is `false` <br> - `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'` <br> - `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'` <br> - `iconType`: Built-in icon options, either `'plus-minus'` or `'arrow-count'` <br> - `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 <br> - `iconPlacement`: Icon position relative to the node, can be `'left'`, `'right'`, `'top'`, or `'bottom'`, default is `'bottom'` <br> - `iconOffsetX/iconOffsetY`: Horizontal/vertical offset for the icon relative to the node, default is `0` <br> - `iconClassName/iconStyle`: CSS class name and inline styles for the icon <br> - `refreshLayout`: Whether to refresh the layout after each collapse/expand operation
+">Collapse/Expand Child Nodes</code>
+
+<code id="demo-mind-map-color" src="./demos/mind-map/color.tsx" description="The `assign-color-by-branch` feature allows branch differentiation by modifying `colors` to assign different colors to the mind map branches.">Set Branch Colors</code>
+
+## API
+
+For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties)
+
+### MindMap
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| type | Syntax sugar, sets the mind map's display style. If `node.component` is set, it takes precedence | `'default'` \| `'linear'` \| `'boxed'` | `'default'` |
+| direction | Syntax sugar, sets the layout direction of the mind map nodes. If `layout.direction` is set, it takes precedence | `'left'` \| `'right'` \| `'alternate'` | `'alternate'` |
+| nodeMinWidth | Minimum width of the mind map nodes | `number` | `0` (`default` type) <br> `120` (`boxed` type) |
+| nodeMaxWidth | Maximum width of the mind map nodes | `number` | `300` |
+| layout | Mind map layout configuration | [MindmapLayoutOptions](https://g6.antv.antgroup.com/en/api/layouts/mindmaplayout) | `{ type: 'mindmap' }` |
+| behaviors | Set user interaction events, also supports G6 built-in interactions. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - |
+| plugins   | Set canvas plugins to handle rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - |
+| transforms | Configure data transformations to process user input and convert it into internal data flows. Also supports G6 built-in transformers. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - |