React Flow

React Flow | Svelte Flow - Powerful open source libraries for building node...

Diagram / Flow chartReactGraph
xyflow/xyflowxyflow.comreact-flow-renderer

README

xyflow


The xyflow mono repo


The xyflow repository is the home of four packages:
React Flow v11 reactflow v11 branch

We just moved repositories from the @wbkd org to this one. React Flow v11 will remain on the v11 branch. When we have a stable v12, the package name of React Flow will change fromreactflow to @xyflow/react.

Commercial Usage


Are you using React Flow or Svelte Flow for a personal project? Great! No sponsorship needed, you can support us by reporting any bugs you find, sending us screenshots of your projects, and starring us on Github 🌟

Are you using React Flow or Svelte Flow at your organization and making money from it? Awesome! We rely on your support to keep our libraries developed and maintained under an MIT License, just how we like it. For React Flow you can do that on the React Flow Pro website and for both of our libraries you can do it through Github Sponsors.

Getting Started


The best way to get started is to check out the React Flow or Svelte Flow learn section. However if you want to get a sneak peek of how to install the and use the libraries you can see it here:


Installation

  
  1. ``` sh
  2. npm install reactflow
  3. ```

Basic usage

  1. ``` jsx
  2. import { useCallback } from 'react';
  3. import ReactFlow, {
  4.   MiniMap,
  5.   Controls,
  6.   Background,
  7.   useNodesState,
  8.   useEdgesState,
  9.   addEdge,
  10. } from 'reactflow';

  12. import 'reactflow/dist/style.css';

  14. const initialNodes = [
  15.   { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
  16.   { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
  17. ];

  19. const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];

  21. function Flow() {
  22.   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  23.   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  25.   const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);

  27.   return (
  28.     <ReactFlow
  29.       nodes={nodes}
  30.       edges={edges}
  31.       onNodesChange={onNodesChange}
  32.       onEdgesChange={onEdgesChange}
  33.       onConnect={onConnect}
  34.     >
  35.       <MiniMap />
  36.       <Controls />
  37.       <Background />
  38.     </ReactFlow>
  39.   );
  40. }

  42. export default Flow;
  43. ```

Installation

  
  1. ```sh
  2. npm install @xyflow/svelte
  3. ```

Basic usage


  1. ```
  2. <script lang="ts">
  3.   import { writable } from 'svelte/store';
  4.   import {
  5.     SvelteFlow,
  6.     Controls,
  7.     Background,
  8.     BackgroundVariant,
  9.     MiniMap,
  10.   } from '@xyflow/svelte';

  12.   import '@xyflow/svelte/dist/style.css'
  13.   
  14.   const nodes = writable([
  15.     {
  16.       id: '1',
  17.       type: 'input',
  18.       data: { label: 'Input Node' },
  19.       position: { x: 0, y: 0 }
  20.     },
  21.     {
  22.       id: '2',
  23.       type: 'custom',
  24.       data: { label: 'Node' },
  25.       position: { x: 0, y: 150 }
  26.     }
  27.   ]);

  29.   const edges = writable([
  30.     {
  31.       id: '1-2',
  32.       type: 'default',
  33.       source: '1',
  34.       target: '2',
  35.       label: 'Edge Text'
  36.     }
  37.   ]);
  38. </script>

  40. <SvelteFlow
  41.   {nodes}
  42.   {edges}
  43.   fitView
  44.   on:nodeclick={(event) => console.log('on node click', event)}
  45. >
  46.   <Controls />
  47.   <Background variant={BackgroundVariant.Dots} />
  48.   <MiniMap />
  49. </SvelteFlow>
  50. ```

The xyflow team


React Flow and Svelte Flow are maintained by the team behind xyflow. If you need help or want to talk to us about a collaboration, reach out through our contact form or by joining our Discord Server.

License


React Flow and Svelte Flow are MIT licensed.