Mermaid support for rendering SVG

[bsmth]

I'd like to create a tracking issue for Mermaid support as the best candidate for maintaining SVG diagrams. There are a number of discussions about this:

Discussions:

• "Exempt SVGs from minifying"
• "Using SVG format instead of .png images"
• "Support Mermaid in MDN Markdown"

And as for some options, if we don't want to add more JS client side or do the rendering at build time as a Yari dependency, there is the option to generate SVG from mmd files in an automated way using the CLI (a CI job / script / automation in content repo on new .mmd files, for instance).

e.g.;

npm install -g @mermaid-js/mermaid-cli
mmdc -i input.mmd -o output.svg

In terms of optimizations, there is SVGO which also has a GUI.

Related issues:

• Figure out a solution for storing image source files #1678

Pull requests:

• https://github.com/mdn/content/issues?q=label%3A%22reduce+binary+assets%22+
• Django - fix up model diagram to match code content#4505
• feat: check in HTTP sequence diagrams shared-assets#7

[caugner]

@bsmth How about if the shared-assets repo would support Mermaid and automatically render/deploy them?

[bsmth]

@bsmth How about if the shared-assets repo would support Mermaid and automatically render/deploy them?

Yeah I think this is another good option where we have build / optimization scripts in that repo that are completely decoupled from content / rari etc.