English (US) | Jian Ti Zhong Wen
Important Notice: This Project is No Longer Actively Maintained Due to the current user base situation, XFlow will not continue to be iterated in the future. For related needs, it is strongly recommended to use X6, which will be continuously maintained.
React component for building interactive diagrams
Features
- Easy-to-use: Provides a more appropriate way to use React components.
- Unified state management: Service data and graph data can be managed in a unified manner.
- Supports multi-graph mode: Each graph component has a separate state and graph instance.
- Out of the box features: There are a lot of diagram components out of the box.
Installation
# npm
$ npm install @antv/xflow --save
# yarn
$ yarn add @antv/xflow
# pnpm
$ pnpm add @antv/xflow
$ npm install @antv/xflow --save
# yarn
$ yarn add @antv/xflow
# pnpm
$ pnpm add @antv/xflow
Usage
return (
<XFlow>
<XFlowGraph
zoomable
pannable
centerView
fitView
connectionEdgeOptions={{
attrs: {
line: {
stroke: '#8f8f8f',
strokeWidth: 1,
},
},
}}
/>
<Grid type="mesh" options={{ color: '#ccc', thickness: 1 }} />
<Clipboard />
<History />
<Snapline sharp />
<Transform resizing rotating />
XFlow>
);
};