English (US) | 简体中文

⚠️ 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

Usage

const Page = () => {
  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>
  );
};

Documentation

The documentation for XFlow 2.0 is still being developed urgently, so if you want to know how to use it, you can refer to the code examples.

Development

$ pnpm bootstrap
$ pnpm dev

Contributing

To become a contributor, please follow our contributing guide. If you are an active contributor, you can apply to be a outside collaborator.

License

The scripts and documentation in this project are released under the MIT License.