Mermaid support for rendering SVG

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:

• https://github.com/mdn/yari/issues/1678

Pull requests:

• https://github.com/mdn/content/issues?q=label%3A%22reduce+binary+assets%22+
• https://github.com/mdn/content/pull/4505
• https://github.com/mdn/shared-assets/pull/7

Start by reviewing the linked discussions, related issue mdn/yari#1678, and the referenced content pull requests. Compare client-side rendering, build-time rendering, and the mmdc automation option; the work is done when a decided approach reliably renders Mermaid diagrams as optimized SVG assets.