flow builder
$ yarn add @keboola/flow-builder
Usage
ESM/CJS
Ensure that react@16.x.x
and react-dom@16.x.x
are installed as peer dependencies.
import "@keboola/flow-builder/dist/Graph.css"; // include this CSS file in your bundle
import * as Flow from "@keboola/flow-builder";
<Flow.Graph edges={["a.out->b+c+d.in"]}>
<Flow.Node name="a" position={[50, 50]}>
<Flow.Output name="out" />
<div className="content">Node A</div>
</Flow.Node>
<Flow.Group name="b+c+d" position={[50, 200]}>
<Flow.Input name="in" />
<Flow.Node name="b">
<div className="content">Node B</div>
</Flow.Node>
<Flow.Node name="c">
<div className="content">Node C</div>
</Flow.Node>
<Flow.Node name="d">
<div className="content">Node D</div>
</Flow.Node>
</Flow.Group>
</Flow.Graph>;
UMD
flow-builder
can also be used directly in the browser:
<!-- React + ReactDOM -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- flow-builder -->
<link
crossorigin
rel="stylesheet"
href="https://unpkg.com/@keboola/flow-builder@<version>/dist/Graph.css"
/>
<script
crossorigin
type="text/javascript"
src="https://unpkg.com/@keboola/flow-builder@<version>/dist/index.umd.js"
></script>
Local development
$ yarn dev
License
MIT licensed, see LICENSE file.