DEV Community

Cover image for A React library to build Diagrams with ease
Antonio Russo
Antonio Russo

Posted on

A React library to build Diagrams with ease

Lately I've been working on a product that easily allow to build complex and structured diagrams using drag n drop, pan and zoom functionalities.
I've decided to sum-up all the business logic of this product into an open source library in order to allow others to benefit from it.
The library is called beautiful-react-diagrams and it's still under development, but I think it might a good sharing.

Please help me improve the library by sharing and starring

Top comments (10)

Collapse
 
oguimbal profile image
Olivier Guimbal

That seems to be a quite nice lib !
I had to implement something very similar a few month ago, too bad I did not find it sooner :)

Do you plan on supporting automatic layout ? (I used dagre for this which does it quite smoothly)

Collapse
 
antonioru profile image
Antonio Russo • Edited

Hi Oliver, thanks for commenting.
Yes a feature for auto-layout is on its way and yes, it will use dagre :)
Unfortunately I'm not yet sure WHEN this shall be released, but for sure it will...

perhaps since you wrote something similar already, you can help with that?

Collapse
 
oguimbal profile image
Olivier Guimbal • Edited

Just a showcase of how we use directed graphs (might sometime help to see how others could be using a lib when designing it)

showcase

Thread Thread
 
antonioru profile image
Antonio Russo

WOW! That's impressive!

Collapse
 
oguimbal profile image
Olivier Guimbal

I was thinking about it. I will keep that in mind and see if I can find some time in the next weeks !

Thread Thread
 
antonioru profile image
Antonio Russo

Thanks mate, that would be splendid!
Just in case, please be aware that there is an this issue opened for the auto-layout feature.
And this experimental development made by a good contributor

github.com/caddijp/beautiful-react...

Collapse
 
lamagh profile image
lamagh

Hello Antonio, Thank you for the library. I need a way to constantly refresh the schema. To sort of make the schema a state and on a click in my website to update it. I have tried setting it using useState and as a prop. I even tried using useforceupdate for the functional component. But it still wont update.
Or if there was a addLink, like there is an addNode.
Thank you

Collapse
 
alexandrudanpop profile image
Alexandru-Dan Pop • Edited

Hi, this looks really cool! I used react storm diagrams for one of my projects. Is this built as a fork of that one? Pretty cool work.

Collapse
 
antonioru profile image
Antonio Russo

No, it's not a fork of Storm's diagrams.
I used to be a contributor but I lately decided to write my own diagramming library that works more in a "React way"

Collapse
 
thebronxsystem profile image
thebronxsystem

does it supper SSR?