d3/cola: Layout configuration for UML-like diagram

3.1k views Asked by At

I am trying to build a graphql schema visualizer using something other than viz.js (the library is too large and adds 1MB to the bundle). I was recommended webcola and it seems to be a very powerful library.

I have gotten to a point where the necessary elements are being rendered and linked correctly. My next step is to get the layout right. I would like to do something similar to graphql-voyager (uses viz.js).

Here is a codesandbox of what I have so far:

graphql-diagram

EDIT: My question is, how could I lay out what I have similarly to graphql-voyager? I would like help setting the right constraints and applying whichever algorithm necessary to position the nodes and routing the edges accordingly.

1

There are 1 answers

2
Ivan Goncharov On

GraphQL Voyager author here :)

Before switching to viz.js we tried lots of other possible solutions for almost a month. Here is the article about our journey: https://medium.freecodecamp.org/how-we-got-1-500-github-stars-by-mixing-time-tested-technology-with-a-fresh-ui-b310551cba22

TL;DR; Graph drawing is rocket-science

Moreover, since Voyager release (2 years ago), we evaluated even more libraries with the exact same result.

As a side project, we are working on the Graphviz fork aggressively shrunk to just meet Voyager requirements. Our end goal is to rewrite the required parts in pure JS and embed it directly into Voyager. ATM it's in early PoC stage and we are not ready to release it yet.