Add support for mermaid diagrams

[paulbrimicombe]

🧐 What?

• There is an existing feature request for Mermaid diagram support: https://github.com/bbc/morty/issues/308
• This Pull Request relies on https://github.com/bbc/morty/pull/353
• Once merged, any Mermaid code blocks will be rendered as diagrams rather than the source code

🛠 How

When a Mermaid code block is found:

• The code block is given the mermaid class so the Mermaid JS can detect the diagrams to be rendered
• The Mermaid JS bundle is imported from /morty-docs/mermaid.min.js (see https://github.com/bbc/morty/pull/353 )
• The Mermaid library is used to trigger an auto-render of the diagrams

CSS rules ensure that:

• A loading message is displayed on initial page load
• The diagram source code is hidden during render
• visibility: hidden is used to reserve some space (but not the right amount of space) while the diagram renders to avoid at least some of the layout shift when the diagrams render

👀 See

Here's an example showing the loading state and the rendered diagrams from https://github.com/bbc/iplayer-catalogue/blob/main/programme/docs/long-form-video/episode-ingest-scenarios.md (existing Morty page: https://broxy.tools.bbc.co.uk/morty-docs/iplayer-catalogue/programme/docs/long-form-video/episode-ingest-scenarios.html )

🐞 Related issue

https://github.com/bbc/morty/issues/308