https://github.com/antvis/xflow

React component for building interactive diagrams.
https://github.com/antvis/xflow

dag flowchart react x6

Last synced: about 1 month ago
JSON representation

React component for building interactive diagrams.

• Host: GitHub
• URL: https://github.com/antvis/xflow
• Owner: antvis
• License: mit
• Created: 2021-10-13T02:57:18.000Z (almost 3 years ago)
• Default Branch: 2.0
• Last Pushed: 2024-05-17T01:50:31.000Z (4 months ago)
• Last Synced: 2024-05-21T18:32:22.076Z (4 months ago)
• Topics: dag, flowchart, react, x6
• Language: TypeScript
• Homepage: https://x6.antv.antgroup.com/xflow/guide/introduction
• Size: 105 MB
• Stars: 552
• Watchers: 21
• Forks: 229
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md
  • Authors: AUTHORS

Awesome Lists containing this project

• awesome-x6 - xflow - Professional graph editing application-level solution (Frameworks / React Component)

README

        
English (US) | [简体中文](README.zh-Hans.md)

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

```shell

# npm

$ npm install @antv/xflow --save

# yarn

$ yarn add @antv/xflow

# pnpm

$ pnpm add @antv/xflow

```

## Usage

```tsx

const Page = () => {

  return (

    

      

      

      

      

      

      

    

  );

};

```

## 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](https://github.com/antvis/XFlow/tree/2.0/apps/basic/src/pages).

## Development

```shell

$ pnpm bootstrap

$ pnpm dev

```

## Contributing

To become a contributor, please follow our [contributing guide](/CONTRIBUTING.md). 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](/LICENSE).