Add support for Mermaid diagrams
What does this MR do and why?
Adds support for Mermaid charts.
This follows the implementation described in the Hugo docs (https://gohugo.io/render-hooks/code-blocks/#examples), except we're fetching the Mermaid library as part of our build process (with Yarn + Vite) rather than loading it over the web from a CDN. The frontend build step is very similar to how we've done this with Nanoc/Rollup (src).
Closes #13 (closed)
Screenshots, screen recordings, or links to review app
Examples:
- http://localhost:1313/user/markdown/#mermaid
- http://localhost:1313/tutorials/scrum_events/#understanding-the-inheritance-model-in-gitlab
- http://localhost:1313/administration/static_objects_external_storage/#requests-flow-example
- http://localhost:1313/administration/reference_architectures/#decision-tree
These aren't the prettiest examples; this sampling is courtesy of a recent discussion on problematic charts here: gitlab-org/gitlab#458994. In this case, we want the Hugo diagrams to look just like the Nanoc diagrams, as imperfect as they are.
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
-
Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo/-/blob/main/doc/setup.md. -
View the example links listed above (or any others). They should render the same as they do on the Nanoc site.
Merge request acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this merge request.