Is there an interactive Viewer for laaaaarge Graphviz models?

Help
1

Hello,

I currently develop software for Shopify and use it’s GraphQL API heavily. It’s a complex beast and hoped to find a way to visualise the connections of it.

After some search I found a way to create a PNG out of the schema:

graphqlviz ShopifySchema.json | dot -Tpng -o ShopifySchema.png

It kept my good old 2015 MBP busy for about 5 Minutes, created a huge PNG with 80MB. I could zoom in, but all the connections are too close together or covering each other to be of any help.

I had been looking for an interactive GraphViz viewer, which can handle such big diagrams. But everything I tried either just froze or threw an exception after a while. I tried:

  • Qt Visual Graph Editor - qvge: It threw an exception

  • graphql-voyager - it just stayed blank

  • EclipseGraphviz - I could not even install the Eclipse Plugin because of missing dependencies. I guess Eclipse is left in the dust.

  • GrahpQl Visualizer threw an out of memory exception

  • …

Is there anything out there capable visualising such a big schema?
Ideally with the capability to manually interactively rearrange the elements to clean up overlapping connections.

Thanks for your input!

1 Like
2

Try rendering to SVG instead of PNG. For a large graph, vector graphics (svg) produce a more readable/manageable result.
graphqlviz ShopifySchema.json | dot -Tsvg -o ShopifySchema.svg
Then use your favorite web browser as a viewer. Control-o seems to be the “open a file” command for most/all browsers.

3

Also curious how large laaaaarge is. Please run this:
graphqlviz ShopifySchema.json | gc
The first number in the output is the count of nodes, the second number is the count of edges.

4

Hi Steve,

thanks for chiming in!

It gave me following result: 1288 2887 erd ()

The conversion to SVG took some time, but worked flawlessly: Shopify_2021-10_schema.svg · GitHub

Of course it has the same issues with overlapping lines, as you can see.

Do you have a recommendation for an SVG editor for rearranging nodes and lines to get a better overview?

Hmm, I just realised Graphqlviz only supports GraphQl queries and not mutations. This seems to be of limited help anyway…

5
  • 1288 nodes is not that big, but some of your nodes are quite large.
  • inkscape is the only SVG editor I’m aware of. I’m not sure if it will be useful here
  • if you want to try non-interactive tools, you can produce a dot output (instead of png or svg) and the try various Graphviz tweaks
6

Have you looked at Ideatree.net? Interactive, zoom-able, etc. The “Prettify” functions are powered by graphviz under the covers. The size of graph handled is basically limited by how much memory you have, the speed of your browser, etc. We tested it up to 1k nodes on a fully-connected graph (how many edges would that be?). Disclaimer: I’m one of the developers.

7

would you be able to share the resulting dot file?

8

I am using the approach of exporting to svg, and then adding ineractivity in the diagram using javascript. When clicking on a node it will highlight all edges connecting to that node in the diagram.

The feature to produce svg with postprocessing is available in the latest release of Excel to Graphviz, which you can find here: Excel to Graphviz

example screenshot:

Annotation 2023-10-03 111757
Annotation 2023-10-03 1117571012×924 188 KB

10

There’s also an issue about inline SVGs, Add SVG output suitable for inlining in HTML (#2285) · Issues · graphviz / graphviz · GitLab, which would let Graphviz produce something suitable for inclusion directly into a page that could then manipulate it with Javascript.

11

I have found GitHub - jrfonseca/xdot.py: Interactive viewer for graphs written in Graphviz's dot language. to be quite useful for reasonably sized graphs.

xdot.py supports searching and highlighting of nodes and edge labels, fast navigation and zoom etc. It installs on macOS via brew install xdot and Debian/Ubuntu with sudo apt install xdot (although they may ship a rather outdated version of xdot).

12

For those in the future, having just used a 130B dot file (45,000 nodes, 400,000 edges), you can use “Gephi”.

Import your dot files. In the lower left of Gephi in the “Layout” pane choose the “ForceAtlas 2” layout. This will allow you to check “Prevent Overlap” [I believe in doing so you need to turn off “Approximate Repulsion”]