Add support for mermaid diagram for content fetched from Discourse

[deusebio]

Summary

Some of the documentation that is fetched from Discourse contains mermaid diagrams. Support for these have been added to other frontend platforms (e.g. charmhub.io, see here). It would be nice to have the same functionality in ubuntu.com as well.

Examples are:

• https://charmhub.io/postgresql-k8s/docs/e-charm (fetching data from https://discourse.charmhub.io/t/charmed-postgresql-k8s-explanations-charm-flowcharts/9305)

Current and expected result

Right now mermaid diagram are rendered showing the code, e.g. https://ubuntu.com/data/docs/postgresql/k8s/e-charm. It would be nice to render them similarly to charmhub.io: https://charmhub.io/postgresql-k8s/docs/e-charm

[immortalcodes]

Hey @deusebio ,
The pages that you have linked here no longer exists, could you please help find new pages so this could be understood better.
Thanks

[immortalcodes]

Hey @deusebio , I am closing this issue but please feel free to re-open with more context and updated links

[deusebio]

Sorry I've been travelling in the past few days. Here is an example:

Charmhub

• https://charmhub.io/postgresql-k8s/docs/e-flowchart-charm

ubuntu.com

• https://canonical.com/data/docs/postgresql/k8s/e-flowchart-charm

Could you please re-open @immortalcodes ?