Paroflow

Paroflow is a simple flow-chart builder which works with D3.js and SVG.

# Project setup
npm install

# Run demo
npm run serve

# Output .js and .d.ts file
npm run build

Demo

Usage

Install

npm install --save paroflow

Set a svg Element in your page.

<svg id="paroflow"></svg>

Import FlowChart and Create an instance.

Currently, Only ES Module version is availible. If need other version, please tell me.

You must pass a valid selector which can find your svg element to locate render position. In this case you can code like this:

import FlowChart from 'paroflow'

const chart = new FlowChart('#paroflow')

You can also privide some global options like:

const options = {
  width: 400,
  height: 300,
  fontSize: 16
}
const chart = new FlowChart('#paroflow', options)

Full options see: FlowChartInitialOptions in Declaration file

Add nodes and link them

All public method of FlowChart instance is designed to support chained calls:

chart
  .addNode('node1', 200, 50, 'Hello')
  .addNode('node2', 200, 150, 'ParroT')
  .addEdge('node1', 'node2')

You can provide options to Node and Edge too, note that the options you privide here will overwrite global options:

chart
  .addNode('node1', 200, 50, 'Hello', { fontSize: 12 })
  .addNode('node2', 200, 150, 'ParroT', { fontColor: '#47b785' })
  .addEdge('node1', 'node2', { width: 2 })

Same as before, you can find full options of FlowChartNodeOptions and FlowChartEdgeOptions in Declaration file

Render!

Just call render() at FlowChart instance simply:

chart.render()

Of course, you can call render() chained.

chart
  .addNode(...)
  .addEdge(...)
  .render()