Documentation Writers' Toolkit Structure Documentation design

About documentation design at Grafana Labs

Our documentation website uses a modern design approach to make technical documentation accessible and scalable.

The documentation website uses the static site generator Hugo. Many elements of the page are automatically managed during the publication of the page using Hugo’s taxonomy. Thus, the source Markdown files don’t need to hand management of these elements and don’t require contributors to curate them.

Pages include:

• Navigation to preview primary topics. The left-hand sidebar broadly outlines key topics, with nested related topics underneath. This design supports the philosophy that “every page is page one” and creates an system of documentation around a topic that’s easier to reference and navigate.
• Floating table of contents. The table of contents floats on the page as you scroll to the content that’s hidden beneath the fold. You can also view the upcoming topics, to enable a better user experience that helps you navigate to subtopics lower on the page.
• Auto-generated Related documentation. Using Hugo’s taxonomy, documentation automatically finds other documentation that’s related to the page you’re viewing.
• Auto-generated Related resources from Grafana Labs. Hugo’s taxonomy again automatically generates this content.
• Feedback. Thumbs up and thumbs down feedback.

You can read about the redesign of our documentation pages in Grafana documentation: A look at the new and improved design.