Setting up your custom documentation system that supports Mermaid using Gatsby
If you need a more versatile way of setting up a documentation system, you can use a static site generator. There are many static site generators to choose from. We have Hugo, Gatsby, Jekyll, Nuxt, and Hexo, to name a few.
A static site generator uses content data, applies this data to predefined templates, and then generates a finished view, which, for instance, could be an HTML file. We will be using Gatsby here as it is one of the most widely adopted static site generators and serves as a good example. This example will be easier to grasp if you have some prior basic knowledge of Node.js and npm, as we will be using these to install Gatsby.
With Gatsby, you can generate any kind of website, ranging from a complex, feature-rich interactive site all the way to a static site that only contains content. In order to get a starting point of the new site and ensure it matches what is intended, we can...