From the community: visualize your content model

Published on August 8, 2017

blog_post-contentful-graph

Subscribe for updates

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

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.

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!

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

Contentful graph

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.

Stefan Judis

Stefan Judis

Senior Manager of Developer Relations

Stefan loves web performance, new technologies, and accessibility. He is also a curator of the online resource [Tiny Helpers](https://tiny-helpers.dev/ "Tiny Helpers"), contributes to a variety of [open source projects](https://github.com/stefanjudis "open source projects"), and enjoys [sharing nerdy discoveries](https://www.stefanjudis.com/today-i-learned/ "Today I Learned").

Related articles

Vue and React are both popular JavaScript UI frameworks. We cover their similarities and differences, discussing which is best for different use cases.
Guides

Vue vs. React: Which JavaScript UI framework is best?

July 18, 2024

Enhance team collaboration by integrating Contentful with Microsoft Teams, utilizing Adaptive Cards to create visually appealing, interactive notifications.
Guides

Integrating Contentful with Microsoft Teams using Adaptive Cards

July 5, 2024

Tagging your images for SEO is the process of applying HTML attribute tags to images in order to help search engines understand the content of your images.
Guides

What is image tagging for SEO?

May 24, 2022

Contentful Logo 2.5 Dark

Ready to start building?

Put everything you learned into action. Create and publish your content with Contentful — no credit card required.

Get started