React JS JSON FLOW BUILDER

About me

I am a freelancer (Frontend Developer) creating HTML5 Canvas based applications using fabric js + canvas.

The problem I wanted to solve

Visualize the flow of a json data with datastores / schemas/ field nodes in canvas.
Display connections between nodes.
Provide option for ZOOm and PAN canvas.
Add option to collapse / expand the nodes.
Configure the styles of objects in styles json.

What is React JS JSON FLOW BUILDER?

JSON data visualizer to view the nodes / links from JSON in canvas.

Tech stack

React JS, Fabric JS(fabricjs.com), JSON.

The process of building React JS JSON FLOW BUILDER

1. Create data store / schema / field nodes header and body
2. Arrange the fields inside schemas, schemas inside data stores.
3. Position the datastores randomly without collapsing
4. Display connections without conflict or connection following same path.
5. Add Zoom / PAN options

Challenges I faced

I faced challenge in

1. Creation of connections without conflict / connection following same path
2. Random position of data store objects without conflict each other.

Key learnings

Same flow visualize editor can be modified to use it for class / use case / relationship diagram editors.
fabric.path class can be used to create spyline styled lines instead of straight lines.

Tips and advice

fabric js library suits for this kind of requirements in developing flow/ class / use case / relationship diagram editors.

Final thoughts and next steps

Bellow is the demo of the editor
http://kpomservices.com/materialflow/index.html

Also done performance testing with large number of data, app performs good with less delay in zoom or pan.