A React library to design Diagrams with ease | Hacker News Reader

A React library to design Diagrams with ease

github.com

116 pointsinterrupt8624 comments

Also worth looking at ReactFlow (https://reactflow.dev) if you are looking for this type of tool.

https://rete.js.org is also a good choice.

THANK YOU This seems framework agnostic – we might be able to embed this in our ember app.

I've been googling for this kind of library in the past couple of weeks and keep looking for "workflow editor" etc but simply haven't come up with any of these libraries.

Wow, that library looks amazing.

I happen to be using a tablet now (Windows 2-in-1 device); going through all the examples on their Github page, all of them work perfectly with a pen (stylus)! That's impressive; something most interactive web stuff I've seen can't get right (collaborative whiteboards particularly suck at handling actual pens).

This is awesome. For years I've been looking for a modern library to deal with this.

I recently had a requirement to build flow charts and pipelines. I ended up using React Diagrams[1]. I did ended up using successfully, but I think experience was painful when you want to draw pipeline programmatically. This however looks quite easy to implement and manage. Will give it a try!

[1]https://github.com/projectstorm/react-diagrams

I must say, it kind of looks inspired by my library (react-diagrams) when I look at how the ports and custom nodes work (the animated dotted lines are usually the tell :P) . Wonder if they used it for some inspiration. Looks cool and wish them the best of luck, more libraries like this are always a good thing.

It seems like the author was contributing to react-diagrams.

This looks pretty cool! I'm working on a new issue tracker [0] and one of the things we want to do is to support diagrams embedded in the issues. We're currently experimenting with MermaidJS but we're not totally sold as the UX of typing everything out by hand is off putting for some users (while really appealing to others). Something a bit more drag-n-drop-y like this might fit the bill.

0: https://kitemaker.co, issue tracker loaded with hotkeys with a super rich issue editor

Not as feature rich, but I did make a React library for tech trees[0].

You should go and check it out!

[0]: https://ldd.github.io/react-tech-tree/

source (MIT): https://github.com/ldd/react-tech-tree

Still sad to find that none of the "infinite canvas" things correctly handles the various touch events. Some handle two-finger pinch zooming well. I've yet to see any which properly handle two-finger panning (H and V). Breaks my expectations every time I encounter it.

Are you talking about mobile touch gestures or touch gestures via a laptop trackpad?

Recently i tried a lot of diagram libraries. I tried to do a binary step chart (on/off) for active/inactive tasks. I ended up with matplotlib rendering my charts. I have seen nothing as advanced and feature rich as pythons'

BUT i will give this one a chance :)

On the live playground if I go to dynamic nodes.

Add a few nodes so that I have node 1, node 2, node 3, node 4 then delete node 3, and add another node. I get two node 4

Now if I try to drag any of the two node 4, it always thinks I want to drag the latest node 4 that was added...

patch:

  @@ -2,6 +2,8 @@
   import Diagram, { createSchema, useSchema } from 'beautiful-react-diagrams';
   import { Button } from 'beautiful-react-ui';

  +let lastid=1
  +
   const initialSchema = createSchema({
     nodes: [
       {
  @@ -39,8 +41,8 @@ const UncontrolledDiagram = () => {

     const addNewNode = () => {
       const nextNode = {
  -       id: `node-${schema.nodes.length+1}`,
  -       content: `Node ${schema.nodes.length+1}`,
  +       id: `node-${lastid+=1}`,
  +       content: `Node ${lastid}`,
          coordinates: [
            schema.nodes[schema.nodes.length - 1].coordinates[0] + 100,
            schema.nodes[schema.nodes.length - 1].coordinates[1],

There are a couple of issues with this patch. Using the component multiple times will lead to duplication in ids across the DOM which is not permitted. If addNewNode is called from multiple places at the same time, the id and content attr might not have the same value in lastid anymore. You're assigning values to a semi-global var in a very narrow scope, won't introduce bugs, but hard to see the assignment when it's hidden like that.

Changing it to be a random string that gets created inside addNewNode instead removes all those issues.

Agreed, unique string would be ideal. Not sure how within this demo you are able to create duplicate ids with the above patch (clearly you can without the patch though...). Purpose of patch is only to fix demo, not library code.

Can anyone recommend something that does exactly this but is more SPA-framework agnostic?

We use Ember so we can't really embed this, but this is exactly what we need.

Take a look at https://js.cytoscape.org/. Cytoscape is much more powerful though, so this depends on the complexity of your use case.

Thanks! Between this and rete.js, I'll have my hands full.

First impression is that it looks, feels and works well. I can see this working for designing workflow system UIs. Very nice!

How does this compare to react-flow?

Really amazing. I'm so impressed by what you've built!

Reminds me a lot of the UI for blueprints in Unreal.

Reply on news.ycombinator.com