d3/cola: Layout configuration for UML-like diagram

Question

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.

I am trying to configure webcola to lay out the diagram similarly to graphql-voyager. I'll update the post to be more clear. Sorry for the confusion! — Rohit Ravikoti, Dec 05 '18 at 16:48
Now, what do you MEAN by _lay out what I have ..._? Looking for an algorithm? — qwerty_so, Dec 05 '18 at 17:13
Yes. I would like help setting the right constraints and applying whichever algorithm necessary to position the nodes and routing the edges similarly to graphql-voyager. — Rohit Ravikoti, Dec 05 '18 at 19:42
I thought so. Do you think one can sketch that in the paragraphs available for an answer? You're right: no. This is waaay to broad. — qwerty_so, Dec 05 '18 at 20:52

score 5 · Answer 1 · answered Dec 06 '18 at 12:06

5

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.

answered Dec 06 '18 at 12:06

Ivan Goncharov

83
7

1

Hey! That's great to hear you guys are continuing the work on it. We would love to stay updated and contribute however we can, so please let us know if you need our help! We wanted to contribute to graphql playground by incorporating voyager into it, but the bundle size was too large, so it got rejected right away XD. – Rohit Ravikoti Dec 06 '18 at 19:25
2

@Jeremy We finished extracting code but since we removed support Dot we need to design a new input format and write JS wrapper for the WASM module. Can't give exact ETA but probably we will release something in the first half of 2020. – Ivan Goncharov Feb 14 '20 at 08:02

d3/cola: Layout configuration for UML-like diagram

1 Answers1