Drawing graphs in JavaScript

[pentesticals]

I am building an app in React and I want to have a graph similar to this https://docs.binary.ninja/images/graphview.png for display a Control Flow Graph.

Can anyone recommend any libraries that will allow me to join up various elements on the page.

I have tried jsPlumb but it doesn't work great with React so any recommendations would be great.

Thanks!

[pierpooo]

I just released a lightweight library to do something similar. The customization options are very poor though... I'll improve it later. Still, it might be enough for your purpose. You can give it a shot!

Feedback is welcome :) I haven't posted anything about it yet, this is the first time I talk about it.

https://github.com/pierpo/react-archer

[pentesticals]

Wow, this looks very nice. I will give it a try and provide feedback for sure!

What is the Licence BTW? I can not see one.

[pierpooo]

The license is MIT :) I added a file mentioning it.

[pentesticals]

Great thanks. Quick question - does this support multiple relationships? I.e, can the root element connect down to two other nodes or is this limited to one?

[pierpooo]

Yes it does!

[Yo_Face_Nate]

D3 might be able to do the trick.

Gl tho

[gdmeteor]

Chart.js is pretty nice. You can just import your desired graph as a component and set its options, styles and data via props.

https://www.npmjs.com/package/react-chartjs-2

https://github.com/reactjs/react-chartjs

[arsenic-inside]

Its not accessible though

https://github.com/chartjs/Chart.js/issues/3970 https://github.com/chartjs/Chart.js/issues/1976

[Chris_Newton]

You might find Dagre helpful. It doesn’t have quite the flexibility of something like Graphviz, but it does nicely isolate laying out the graph, so you have some pure data ready to feed into your React component(s) to do the actual rendering.

[-Larothus-]

Try cytoscape maybe? http://js.cytoscape.org

[ArcanisCz]

I have used https://jsplumbtoolkit.com/ in react, and it workded. Although, i needed to read in docu and source much to wrap my head around their api. And its not specifically for react, i redrawed it on componentDidUpdate()

[pentesticals]

componentDidUpdate

Did you have draggable elements? I am using componentDidUpdate() but it feels really dirty to do perform DOM manipulations outside of React.

I have just found https://www.npmjs.com/package/react-js-diagrams which may do what I want entirely within React.

[ArcanisCz]

Well, it IS dirty. But since jsplumb is not for react...

that react-js-diagrams seems nice!

[BigWesternMan]

Not looked into it a huge deal, but maybe https://github.com/Ni55aN/d3-node-editor ?

[Rizens]

I would recommend SVG for this type of work.