helihui / xflow

React component for building interactive diagrams.

English (US) | 简体中文

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.