2024-11-19
Our examples have a fresh new look We’ve revamped the styles across all our React Flow examples.
Plus, we added a new theme file to show you how to customize the style and
interactions of your flows.
We think it looks fantastic and can’t wait to hear your feedback.
Check out our updated Feature Overview below, along with all of our other
updated .
Get Pro examples, prioritized bug reports, 1:1 support from the maintainers, and more with React Flow Pro Our examples have a fresh new look - React Flow
right:
0
,
bottom: 0 ,
transform: 'translate(-30px,10px) rotate(-80deg)' ,
},
},
position: { x: - 200 , y: - 30 },
},
{
id: '1-1' ,
type: 'input' ,
data: {
label: 'Input Node' ,
},
position: { x: 150 , y: 0 },
},
{
id: '1-2' ,
type: 'default' ,
data: {
label: 'Default Node' ,
},
position: { x: 0 , y: 100 },
},
{
id: '1-3' ,
type: 'output' ,
data: {
label: 'Output Node' ,
},
position: { x: 300 , y: 100 },
},
{
id: 'annotation-2' ,
type: 'annotation' ,
draggable: false ,
selectable: false ,
data: {
level: 2 ,
label: 'Sub flows, toolbars and resizable nodes!' ,
arrowStyle: {
left: 0 ,
bottom: 0 ,
transform: 'translate(5px, 25px) scale(1, -1) rotate(100deg)' ,
},
},
position: { x: 220 , y: 200 },
},
{
id: '2-1' ,
type: 'group' ,
position: {
x: - 170 ,
y: 250 ,
},
style: {
width: 380 ,
height: 180 ,
},
},
{
id: '2-2' ,
data: {},
type: 'tools' ,
position: { x: 50 , y: 50 },
style: {
width: 80 ,
height: 80 ,
},
parentId: '2-1' ,
extent: 'parent' ,
},
{
id: '2-3' ,
type: 'resizer' ,
data: {
label: 'Resize Me' ,
},
position: { x: 250 , y: 50 },
style: {
width: 80 ,
height: 80 ,
},
parentId: '2-1' ,
extent: 'parent' ,
},
{
id: 'annotation-3' ,
type: 'annotation' ,
draggable: false ,
selectable: false ,
data: {
level: 3 ,
label: <>Nodes and edges can be anything and are fully customizable!</>,
arrowStyle: {
right: 0 ,
bottom: 0 ,
transform: 'translate(-35px, 20px) rotate(-80deg)' ,
},
},
position: { x: - 40 , y: 570 },
},
{
id: '3-2' ,
type: 'textinput' ,
position: { x: 150 , y: 650 },
data: {},
},
{
id: '3-1' ,
type: 'circle' ,
position: { x: 350 , y: 500 },
data: {},
},
];
export const edges = [
{
id: 'e1-2' ,
source: '1-1' ,
target: '1-2' ,
label: 'edge' ,
type: 'smoothstep' ,
},
{
id: 'e1-3' ,
source: '1-1' ,
target: '1-3' ,
animated: true ,
label: 'animated edge' ,
},
{
id: 'e2-2' ,
source: '1-2' ,
target: '2-2' ,
type: 'smoothstep' ,
markerEnd: {
type: MarkerType.ArrowClosed,
},
},
{
id: 'e2-3' ,
source: '2-2' ,
target: '2-3' ,
type: 'smoothstep' ,
markerEnd: {
type: MarkerType.ArrowClosed,
},
},
{
id: 'e3-3' ,
source: '2-3' ,
sourceHandle: 'a' ,
target: '3-2' ,
type: 'button' ,
animated: true ,
style: { stroke: 'rgb(158, 118, 255)' },
},
{
id: 'e3-4' ,
source: '2-3' ,
sourceHandle: 'b' ,
target: '3-1' ,
type: 'button' ,
},
];
