Flowpoints

A developer-friendly library for creating flowcharts and diagrams.

Simple demo here and cooler demo here, both running the same source code here

Or check out this or this or this




Installation

Quick and easy installation with npm. Package site here.

``‌
npm install --save flowpoints
`

Usage

`javascript
import React from 'react';
import { Flowpoint, Flowspace } from 'flowpoints';

...


Hello world
...


I am point b
...


...
`

To create a new diagram start by creating open-and-close tags for the "Flowspace". It’s in between these that you may add flowpoints.




$3

To create a no-drag area simply set the className of your component/element to "nodrag".

$3

Can be defined for all flowpoints in the flowspace-props, or individually in each flowpoint's props.




$3

Used to determine the colors used for the flowpoints. Available themes:

- red
- purple
- deep-purple
- indigo
- blue
- light-blue
- green
- light-green
- lime
- yellow
- amber
- orange
- deep-orange
- brown
- grey
- blue-grey
- black
- white

$3

The flowspace extracts information about all connections from the outputs of every flowpoint. Telling a flowpoint about inputs won’t have any effect.

To change the color and stroke of a single connection: Add that info to the output like shown below

There are two ways to pass info about the connections:

__As an array.__\
Simply pass an array with the keys to all the flowpoints the current one should be connected to.

__As an object.__\
Create an object using the following pattern:

`javascript
...
key="point_a"
outputs={{
"point_b": {
output: "auto",
input: "auto",
inputColor: "red",
dash: 5
},
"point_c": {
output: "right",
input: "left"
}
}}>Hello World!
...
`

The "right" and "left" arguments tell the flowspace where on the involved flowpoints the connections should attach.

Possible locations: top, left, center (default), right, bottom.




$3


`js
key="point_a"
theme="indigo"
variant="outlined"
outputs={{
"point_b": {
output:"right",
input:"left",
outputColor:"#0c00ff",
inputColor:"#ff0022",
markerStart: false,
markerEnd: true
onClick: (key_a, key_b, e) => {
console.log('Click connection ' + key_a + ' -> ' + key_b)
}
}
}}
style={{ backgroundColor:'lightblue' }}
startPosition={{ x:250, y:100 }}
selected={false}
snap={{ x:10, y:10 }}
dragX={true}
dragY={true}
minX=50
minY=50
width=100
height=40
onClick={ (e) => {console.log('Click!')} }
onDrag={ (position) => {console.log('Drag', position)} }
onHover={ (isHovering) => {console.log(isHovering ? 'Hovering' : 'Not hovering')} }
> ...
`

$3

`js
theme="indigo"
variant="outlined"
background="white"
style={{ width:'100vw', height:'100vh' }}
connectionSize=4
arrowStart={false}
arrowEnd={true}
selected="point_a"
selectedLine={{ a:"point_a", b:"point_b" }}
onLineClick={(key_a, key_b, e) => {
console.log('Click connection ' + key_a + ' -> ' + key_b)
}}
onClick={e => {console.log('Clicked empty space')}}
> ...
`

Themes, variants, connectionSizes, arrowStart and arrowEnd settings passed to the flowspace will be the default values used when drawing connections. A different value specified by a flowpoint's outputs will replace the default value for that connection only.

Suggested pattern

Once a flowpoint unmounts it will forget it's last position. To help with this (and a few more things) I find that the following pattern works really well:

`javascript
import React, { Component } from 'react';
import ReactDOM from "react-dom";
import { Flowpoint, Flowspace } from 'flowpoints';


class App extends Component {

constructor(props) {
super(props);

this.state = {

selected_point: null,

flowpoints: {
"a": {
position: { x:50, y:50 },
outputs: {
"b": {
output:"right",
input:"left",
outputColor:"blue",
inputColor:"white",
width:3,
onClick={(key_a, key_b) => { ... }}
}
}
}
}
}
}

render() {
return (
theme="indigo"
variant="outlined"
background="black"
style={{ height:"100vh", width:"100vw" }}
onClick={e => {
this.setState({ selected_point:null })
}}
selected={this.state.selected_point}>
{
Object.keys(this.state.flowpoints).map(key => {
const point = this.state.flowpoints[key]
return (
key={key}
snap={ x:10, y:10 }
startPosition={point.pos}
onClick={() => {
var selected_point = this.state.selected_point
if (selected_point === key) {
selected_point = null
} else {
selected_point = key
}
this.setState({selected_point})
}}
onDrag={position => {
var flowpoints = this.state.flowpoints
flowpoints[key].position = position
this.setState({flowpoints})
}}>{"Hello from " + key}
)
})
}

)
}
}

ReactDOM.render(, document.getElementById('root'))
`

Of course, you can do with much less code than this, but this example should give a good indication on how you can structure your data for a flowchart.

Check out the demo and it's source code for more.

Contributing

Made some improvements? Make sure to update the demo and create a new pull request!




$3

__Connections corners:__\
Add the option to make paths use straight corners.

__Connections animations:__\
Add an option to make connections appear as dashed lines moving from A to B at user-defined speed.

__Better touch:__\
Make it possible to drag flowpoints on touch screens without also dragging the entire window.

$3

Please maintain the following structure when making pull requests.

`
flowpoints
├── .gitattributes
├── .gitignore
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
│
├── assets
│ ├── favicon.ico
│ └── this_is_flowpoints.png
│
├── demo
│ ├── src
│ ├── index.css
│ ├── index.html
│ └── index.js
│
└── src
├── Flowpoint.js
├── Flowspace.js
└── index.js
``

License

MIT