diff --git a/site/docs/options/general-properties.en.md b/site/docs/options/general-properties.en.md new file mode 100644 index 000000000..310565a80 --- /dev/null +++ b/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` | - | +| 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` | - | diff --git a/site/docs/options/graphs/dendrogram.en.md b/site/docs/options/graphs/dendrogram.en.md new file mode 100644 index 000000000..374503081 --- /dev/null +++ b/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 + +Basic Usage + +Arrangement Direction + +Compact Mode + +Expand/Collapse Nodes + +## 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)` | - | diff --git a/site/docs/options/graphs/flow-direction-graph.en.md b/site/docs/options/graphs/flow-direction-graph.en.md new file mode 100644 index 000000000..a283738b9 --- /dev/null +++ b/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 + +Basic Usage + +## 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)` | - | diff --git a/site/docs/options/graphs/flow-graph.en.md b/site/docs/options/graphs/flow-graph.en.md new file mode 100644 index 000000000..1ad802ed5 --- /dev/null +++ b/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 + +Basic Usage + +Highlight Elements and Their Chains + +Custom Nodes + +## 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)` | - | diff --git a/site/docs/options/graphs/indented-tree.en.md b/site/docs/options/graphs/indented-tree.en.md new file mode 100644 index 000000000..367162ab8 --- /dev/null +++ b/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 + +Basic Usage + +Styles + +Child Node Distribution + +Custom Nodes + +Expand/Collapse Child Nodes + +Set Branch Colors + +## 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)` | - | diff --git a/site/docs/options/graphs/mind-map.en.md b/site/docs/options/graphs/mind-map.en.md new file mode 100644 index 000000000..4fc78c120 --- /dev/null +++ b/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 + +Basic Usage + +Styles + +Child Node Distribution + +Custom Nodes + +Collapse/Expand Child Nodes + +Set Branch Colors + +## 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)
`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)` | - | diff --git a/site/docs/options/graphs/network-graph.en.md b/site/docs/options/graphs/network-graph.en.md new file mode 100644 index 000000000..a1b65bdd6 --- /dev/null +++ b/site/docs/options/graphs/network-graph.en.md @@ -0,0 +1,33 @@ +--- +title: Network Graph +order: 7 +--- + +Displays a series of nodes (such as entities, objects, or concepts) and their connections or relationships. + +```js +import { NetworkGraph } from '@ant-design/graphs'; +``` + +## When to Use + +Use when you need to visualize nodes and their relationships in a complex network structure, revealing connection patterns and data flow intuitively. + +## Code Examples + +Basic Usage + +Node Labels + +Node Importance + +## API + +For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties) + +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| layout | D3 Force layout configuration | [D3ForceLayoutOptions](https://g6.antv.antgroup.com/en/api/layouts/d3-force-layout) | `{ type: 'd3-force' }` | +| 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)` | - | diff --git a/site/docs/options/graphs/organization-chart.en.md b/site/docs/options/graphs/organization-chart.en.md new file mode 100644 index 000000000..dc4cd1096 --- /dev/null +++ b/site/docs/options/graphs/organization-chart.en.md @@ -0,0 +1,45 @@ +--- +title: Organization Chart +order: 4 +demo: + cols: 3 +--- + +Visually displays the hierarchical structure and departmental relationships within an organization. + +```js +import { OrganizationChart } from '@ant-design/graphs'; +``` + +## When to Use + +- To show the hierarchical structure of a company or team, clarifying the relationships between positions and departments. +- To display the distribution of employees by position and department. +- For project management, clarifying team members and their responsibilities. +- For dependency analysis in scenarios like equity penetration and upstream/downstream company relationships. + +## Code Examples + +Basic Usage + +Node Layout + +Custom Nodes + +Collapse/Expand Child Nodes + +## API + +For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties) + +### OrganizationChart + +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| direction | Syntax sugar for node layout direction. Takes precedence over `layout.rankdir` if set | `'vertical'` \| `'horizontal'` | `'vertical'` | +| 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)` | - | diff --git a/site/docs/options/graphs/overview.en.md b/site/docs/options/graphs/overview.en.md new file mode 100644 index 000000000..83dfebc0c --- /dev/null +++ b/site/docs/options/graphs/overview.en.md @@ -0,0 +1,104 @@ +--- +title: Overview +order: 0 +--- + +`@ant-design/graphs` is a React component library meticulously built on top of [G6](https://g6.antv.antgroup.com/en/manual/introduction), designed to provide developers with an out-of-the-box solution for business applications with a "one graph, one action" approach, while maintaining feature parity with G6. This makes the integration of relational graphs simpler and more efficient. + +> The graph components provided by this library come with a set of default configurations that cater to most common use cases. Users can easily modify these configurations through custom parameters to optimize rendering and meet specific business needs. However, for highly customized and complex scenarios, it is recommended to use G6 directly to fully leverage its powerful underlying functionality and flexibility. + +## Overview of Graph Components + +| Application Scenario | Graph Component | Demo | Example | +| --- | --- | --- | --- | +| Mind Map | `MindMap` | ![mind-map](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*cce0Sa7DR3cAAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-mind-map) | +| Dendrogram | `Dendrogram` | ![dendrogram](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*mvnUTaA91H0AAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-dendrogram) | +| Indented Tree | `IndentedTree` | ![indented-tree](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*JZZVT5PsWPQAAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-indented-tree) | +| Organizational Chart | `OrganizationChart` | ![org-chart](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*jgGCT7cMxg8AAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-organization-chart) | +| Flowchart | `FlowGraph` | ![flow-graph](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*n9JgQIGi9BQAAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-flow-graph) | +| Flow Direction Graph | `FlowDirectionGraph` | ![flow-direction-graph](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*jOEPRKWxPE0AAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-flow-direction-graph) | +| Network Graph | `NetworkGraph` | ![network-graph](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*q9AkRIF8fF4AAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-network-graph) | + +## Common Graph Properties + +For general configuration reference: [General Properties](./general-properties.en.md) + +| Property | Description | Type | Default Value | +| --- | --- | --- | --- | +| autoFit | Auto-fit settings | `{ type: 'view'; options?: `[`FitViewOptions`](https://g6.antv.antgroup.com/en/api/reference/g6/fitviewoptions)`; animation?:` [`ViewportAnimationEffectTiming`](https://g6.antv.antgroup.com/en/api/reference/g6/viewportanimationeffecttiming)`; }`
\| `{ type: 'center'; animation?: ViewportAnimationEffectTiming; }`
\| `'view'` \| `'center'` | - | +| animation | Enable or disable global animations. If set with animation config, it enables animation and uses the config as a base for global animations. | `boolean` \| [`AnimationEffectTiming`](https://g6.antv.antgroup.com/en/api/reference/g6/viewportanimationeffecttiming) | - | +| autoResize | Automatically adjust canvas size | `boolean` | `false` | +| background | Canvas background color | `string` | - | +| combo | Combo support, using G6 built-in Combo. For more configuration details, refer to [here](https://g6.antv.antgroup.com/en/api/elements/combos/base-combo) | [`ComboOptions`](https://g6.antv.antgroup.com/en/api/reference/g6/combooptions) | - | +| container | Canvas container | `string` \| `HTMLElement` \| `Canvas` | - | +| cursor | Cursor style | `Cursor` | - | +| data | Graph data | [GraphData](https://g6.antv.antgroup.com/en/api/reference/g6/graphdata) | - | +| devicePixelRatio | Device pixel ratio | `number` | - | +| edge | Edge settings, using G6 built-in edges. For more configuration details, refer to [here](https://g6.antv.antgroup.com/en/api/elements/edges/base-edge) | [`EdgeOptions`](https://g6.antv.antgroup.com/en/api/reference/g6/edgeoptions) | - | +| height | Canvas height | `number` | - | +| layout | Layout settings, using G6 built-in layouts. For more configuration details, refer to [here](https://g6.antv.antgroup.com/en/api/layouts/antv-dagre-layout) | `LayoutOptions` \| `LayoutOptions[]` | - | +| node | Node settings, using G6 built-in nodes. For more configuration details, refer to [here](https://g6.antv.antgroup.com/en/api/elements/nodes/base-node) | [`NodeOptions`](https://g6.antv.antgroup.com/en/api/reference/g6/nodeoptions) | - | +| padding | Canvas padding, typically applied when auto-fitting based on padding | `number` \| `number[]` | - | +| renderer | Renderer accessor | `(layer: 'background' \| 'main' \| 'label' \| 'transient') => IRenderer` | - | +| rotation | Rotation angle | `number` | `0` | +| theme | Theme setting | `'light'` \| `'dark'` \| `string` | - | +| width | Canvas width | `number` | - | +| x | Viewport x-coordinate | `number` | - | +| y | Viewport y-coordinate | `number` | - | +| zoom | Zoom level | `number` | `1` | +| zoomRange | Zoom range | `[number, number]` | `[0.01, 10]` | +| behaviors | User interaction events, also supports G6 built-in behaviors. For more configuration details, refer to [here](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | See component | +| plugins | Canvas plugins, handles rendering logic and additional component rendering. 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 | Data transformation settings, handling user input and converting it to internal data streams for processing. Also supports G6 built-in 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)` | See component | +| onDestroy | Callback executed after graph destruction (`graph.destroy()`) | `() => void` | - | +| onInit | Callback executed after graph initialization (`new Graph()`) | `(graph: Graph) => void` | - | +| onReady | Callback executed after graph rendering (`graph.render()`) | `(graph: Graph) => void` | - | + +## Customization + +To meet diverse needs, users can extend the standard graph components to implement custom relationship graphs. + +#### Update Basic Configurations + +Except for interactions, plugins, and data transformations, all other graph configuration options can be directly customized. + +```js +import { MindMap } from '@ant-design/graphs'; + +export default () => { + const options = { + autoFit: 'view', + edge: { + style: { + lineWidth: 3, + }, + }, + }; + return ; +}; +``` + +#### Update Interactions/Plugins/Data Transformations + +> The following explanation on how to update plugins also applies to interactions and data transformations. + +When configuring plugins, special attention should be paid to how they are added. To ensure that new functionality can be added without affecting the existing default plugins, we introduce a 🔔 specific plugin update strategy. + +Specifically, this involves extending the existing plugin list through a higher-order function, rather than directly replacing it. This function accepts the current graph instance (`this: Graph`) and the existing plugin configuration (`plugins: PluginOptions`) as parameters, and returns a new array of plugin configurations. + +Here’s a concrete example showing how to add a mini-map plugin to a mind map: + +```js +import { MindMap } from '@ant-design/graphs'; + +export default () => { + const options = { + plugins: (existingPlugins) => [ + ...existingPlugins, // Retain all existing plugins + { type: 'minimap', key: 'minimap' }, // Add the mini-map plugin + ], + }; + + return ; +}; +```