Get started with react-flow-renderer CDN
MIT licensed
React Flow Renderer: Popular library for building, rendering diagrams/flowcharts in React apps.
Tags:- react
- workflow
- typescript
- graph
- react-library
- typescript-library
- flowchart
- node-based-ui
Stable version
Copied!
How to start using react-flow-renderer CDN
import React from 'react';
import { Minimap, Controls, Position, Connection, Node } from 'react-flow-renderer';
const Element = (props) => {
return (
<Node type="Element" data={props.data} key={props.id}>
<div style={{ padding: 10 }}>
<p>Element: {props.data.label}</p>
</div>
<Output type="output" key={`output-${props.id}`} />
</Node>
);
};
const Output = ({ type, key }) => {
return <Connection type={type} key={key} />;
};
const ElementFlow = () => {
const elements = [
{ id: '1', label: 'Element 1' },
{ id: '2', label: 'Element 2' },
];
return (
<div style={{ height: '100%' }}>
<div style={{ height: '30%' }}>
<ReactFlow elements={elements}>
<Element id="1" data={{ label: 'Element 1' }} />
<Element id="2" data={{ label: 'Element 2' }} />
<Connection source="1" target="2" />
</ReactFlow>
</div>
<div style={{ height: '70%' }}>
<Minimap />
<Controls />
</div>
</div>
);
};
export default ElementFlow;
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!