# Tools for visualizing layout inheritance?

**URL:** <https://talk.jekyllrb.com/t/tools-for-visualizing-layout-inheritance/9683>\
**Category:** Help\
**Created:** [January 27, 2025, 3:43am UTC](https://talk.jekyllrb.com/t/tools-for-visualizing-layout-inheritance/9683 "2025-01-27T03:43:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![iangge](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/iangge/32/6212_2.png) [@iangge](https://talk.jekyllrb.com/u/iangge)\
**Post date:** [January 27, 2025, 3:43am UTC](https://talk.jekyllrb.com/t/tools-for-visualizing-layout-inheritance/9683/1 "2025-01-27T03:43:59Z")

</div>

Hello, I was wondering if there’s any tools for visualizing [layout inheritance](https://jekyllrb.com/docs/layouts/#inheritance) in Jekyll. I thought it was interesting that it borrowed that idea from OOP and was curious if there’s any way to make a sort of UML chart for Jekyll layouts.

I heard [Draw.io](http://Draw.io) and Lucidchart are good for manually creating charts but I wanted to know if there were any more that would be better specifically for layout inheritance. Any ideas?

---

<div class="post-metadata">

**Author:** ![george-gca](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/george-gca/32/5301_2.png) [@george-gca](https://talk.jekyllrb.com/u/george-gca)\
**Post date:** [January 28, 2025, 5:20pm UTC](https://talk.jekyllrb.com/t/tools-for-visualizing-layout-inheritance/9683/2 "2025-01-28T17:20:32Z")

</div>

You could probably build a [mermaid diagram](https://mermaid.js.org/) for that.

---

<div class="post-metadata">

**Author:** ![jeffque](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jeffque/32/4919_2.png) [@jeffque](https://talk.jekyllrb.com/u/jeffque)\
**Post date:** [February 19, 2025, 6:10pm UTC](https://talk.jekyllrb.com/t/tools-for-visualizing-layout-inheritance/9683/3 "2025-02-19T18:10:11Z")

</div>

I don’t know much about the Jekyll plugin ecosystem, but generating one is not difficult.

You can add a [generator plugin](https://jekyllrb.com/docs/plugins/generators/), inspect for [`site.posts`/`site.pages`](https://jekyllrb.com/docs/variables/#site-variables) and extract all the layouts information I guess.

Any advances towards this, @iangge ?

---

<div class="post-metadata">

**Author:** ![iangge](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/iangge/32/6212_2.png) [@iangge](https://talk.jekyllrb.com/u/iangge)\
**Post date:** [March 4, 2025, 6:05am UTC](https://talk.jekyllrb.com/t/tools-for-visualizing-layout-inheritance/9683/4 "2025-03-04T06:05:43Z")

</div>

Hi Jeff, my site was pretty simple so I ended up just using the mermaid diagram tool to visualize the layouts [here](https://github.com/iangge/lined-paper/tree/main/_layouts).

 ![Mermaid Flowchart for Jekyll Theme](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/1/1c6999a3c47930673455182322e536e9c9b6ca51.png)

But I think it would be cool to find a way to use a generator plugin to automatically put the layout inheritances in a diagram. Thanks for the suggestion.