How to visualize GraphQL schema using graphqlviz cli

In this post we are going to see how we can visualize GraphQL schema using graphqlviz cli.

For our understanding we will be using example file present under test folder of graphqlviz cli github repo. Download the file on your local hard drive as we would require same later.

You can also use the server url instead of file

Next, we need to install graphqlviz CLI

$ npm install -g graphqlviz

graphqlviz provide several options to generate the graph as mentioned in their readme file.

We will be using file option as, we already downloaded file on our local

$ graphqlviz complex-input.json | dot -Tpng -o graph.png

Now if you run the above command on your terminal you might get below error(I am using MAC terminal — incase of windows you might different error)

-bash: dot: command not found

To resolve above issue we need to install another package which is included in graphviz tool.

$ brew install graphviz

Graphviz tool is different from graphqlviz. Note that dot is graphviz’s tool to produce layered drawings of directed graphs. graphviz is available through most package managers including homebrew and apt-get.

After, you have installed graphviz tool we can run the command again to generate the graph

$ graphqlviz complex-input.json | dot -Tpng -o graph.png

If, everything goes well you should see graph.png file generated in same directory where you run above command

Originally published at techdevguide.com on August 1, 2018.