Proper content modeling usually results in a lot of small building blocks of reusable content. Let's take contentful.com as an example –
it consists of around 20 different content types that are connected to each other in some way. Even though this helps us to stay flexible, it can sometimes be hard to see the bigger picture.

Can a page entry have only one or multiple authors?
How many assets are linked to an article?
What are the given field names of a particular entry?

Especially when consuming the API, these kinds of questions come up constantly and I find myself entering the web app regularly to check the details of a content model. Doing so is perhaps not the worst thing in the world, but it would be good if it was easier to get a complete overview.

Meet contentful-graph

contentful-graph is an npm package developed by Yaraslau Kurmyza which aims to help with the visualization of content models.

The contentful-graph works by analyzing a content model and displaying its relations using DOT.

$ CONTENTFUL_SPACE_ID=XXX  CONTENTFUL_MANAGEMENT_TOKEN=xxx contentful-graph

digraph obj {
  node[shape=record];

  Brand [label="{Brand |          | <companyName> Company name|<logo> Logo|<companyDescription> Description|<website> Website|<twitter> Twitter|<email> Email|<phone> Phone #}" shape=Mrecord];
  Product [label="{Product |          | <productName> Product name|<slug> Slug|<productDescription> Description|<sizetypecolor> Size/Type/Color|<image> Image|<tags> Tags|<categories> Categories|<price> Price|<brand> Brand|<quantity> Quantity|<sku> SKU|<website> Available at}" shape=Mrecord];
  Asset;
  Category [label="{Category |          | <title> Title|<icon> Icon|<categoryDescription> Description}" shape=Mrecord];

  Product:brand -> Brand [dir=forward];
  Product:image -> Asset [dir=forward,label="0..*"];
  Product:categories -> Category [dir=forward,label="0..*"];
}

This looks relatively unspectacular, but graphs described in this format can easily be visualized using the dot command which is included in the Graphviz library.

To visualize the graph all you have to do is to pipe it into the dot command, define a file format and write it to disk. Magic!

CONTENTFUL_SPACE_ID=xxx CONTENTFUL_MANAGEMENT_TOKEN=xxx contentful-graph | dot -Tpng > test.png 

The rendered image is indeed handy! For me, this means that I'll print out all the content models and put them on a wall next to me so that I don’t have to enter the web application.

contentful-graph is a young project but I think it has big potential to become my daily companion. Big thanks to Yaraslau for putting this together

If you built something yourself, let us know!

We would love to see and share more tools coming from the community. So don't hesitate to reach out via our Slack community channel at contentful.com/slack or via email to devrel@contentful.com and tell us what part of your ecosystem you have written yourself.

You should also check out contentful-graph-web, a simple web app utilizing the contentful-graph library to display graphs of contentful models.

And last but not least: head over to our Contentful Community forum and experience friendly peer-to-peer support at its best.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.