https://github.com/yworks/yfiles-layout-reactflow
yFiles Layouts for React Flow - A layout library for React Flow providing powerful yFiles layout algorithms and supporting components
https://github.com/yworks/yfiles-layout-reactflow
diagram graph javascript layout library react reactflow typescript xyflow yfiles
Last synced: 2 months ago
JSON representation
yFiles Layouts for React Flow - A layout library for React Flow providing powerful yFiles layout algorithms and supporting components
- Host: GitHub
- URL: https://github.com/yworks/yfiles-layout-reactflow
- Owner: yWorks
- License: other
- Created: 2024-04-10T12:15:02.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-28T09:31:00.000Z (6 months ago)
- Last Synced: 2025-07-08T00:08:42.022Z (3 months ago)
- Topics: diagram, graph, javascript, layout, library, react, reactflow, typescript, xyflow, yfiles
- Language: TypeScript
- Homepage: https://docs.yworks.com/yfiles-layout-reactflow/introduction/welcome
- Size: 7.68 MB
- Stars: 27
- Watchers: 10
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# yFiles Layout Algorithms for React Flow
[](https://www.npmjs.org/package/@yworks/yfiles-layout-reactflow)
Welcome to the *yFiles Layout Algorithms for React Flow* module, a powerful and versatile layout add-on for React Flow based on the [yFiles](https://www.yworks.com/yfiles-overview) library.
## Project Layout
This is the parent repository for the *yFiles Layout Algorithms for React Flow* lib containing the following folders:
* [`yfiles-layout-reactflow/`](yfiles-layout-reactflow) - The actual *yFiles Layout Algorithms for React Flow* lib
* [`examples/`](examples) - Testing app for the individual components
* [`doc/`](doc) - Documentation sources and toolchain
## Getting Started
Please refer to the [yfiles-layout-reactflow library README](yfiles-layout-reactflow/README.md) for detailed instructions.
## Running it
1. Run `npm install` on the toplevel repository.
2. Copy a valid [license for yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) in the `examples/src` folder
3. Run `npm run dev`
## Live Playground
[](https://docs.yworks.com/yfiles-layout-reactflow/introduction/welcome)
Try the *yFiles Layout Algorithms for React Flow* directly in your browser with our [playground](https://docs.yworks.com/yfiles-layout-reactflow/introduction/welcome).
## Licensing
All owners of a valid software license for [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html)
are allowed to use these sources as the basis for their own [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html)
powered applications.
Use of such programs is governed by the rights and conditions as set out in the
[yFiles for HTML license agreement](https://www.yworks.com/products/yfiles-for-html/sla).
You can evaluate yFiles for 60 days free of charge on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL).
For more information, see the `LICENSE` file.
## Learn More
For detailed instructions on how to use and configure the layout module, please refer to the comprehensive [documentation](https://docs.yworks.com/yfiles-layout-reactflow/introduction/welcome) provided.
For further information about [yFiles for HTML](https://www.yworks.com/yfiles-overview) and our company, please visit [yWorks.com](https://www.yworks.com).
For support or feedback, please reach out to [our support team](https://www.yworks.com/products/yfiles/support) or open an [issue on GitHub](https://github.com/yWorks/yfiles-layout-reactflow/issues). Happy diagramming!