Adding a graph interface to your app with React Flow and Dagre

When an app&rsquo;s data is a set of things that point at each other, a node-and-edge graph is often the clearest way to show it. We needed exactly that for Generative Grammar Engine , which displays a generative grammar as a graph: each rule is a node, and a #reference# from one rule to another is an edge. The graph is rendered with React Flow and laid out with Dagre. Neither part is a novel…