fix: inconsistent MathML rendering & erroneous <br />s being added

[NicolasNewman]

:bookmark_tabs: Summary

1. Resolves rendering differences caused by different default OS fonts & MathML implementations within browsers (See #5435)
2. Fixed some equations being cut-off in flowcharts

Resolves #5435

:straight_ruler: Design Decisions

1)

As mentioned in the PR, differences between the default fonts for each OS was not taken into account when I implemented the useLegacyMathML config option. As a result, there is currently no way to force Mermaid to fallback to using KaTeX's stylesheets if they are provided. To allow this to be done, I added an additional config option forceLegacyMathML to explicitly tell Mermaid to default to CSS-based rendering.

Ideally this should be changed to a single config option that takes one of 3 values but I don't know what the protocol for deprecating config options are.

2)

While fixing the above I noticed the spacing for some equations in flowchart vertices were incorrect. This was due to an erroneous <br /> tags being added by the regex replacement vertexText.replace(/\\n|\n/g, '<br />') being triggered on unintended line breaks in the template string in renderKatex().

Before:

After:

:clipboard: Tasks

Make sure you

• [X] :book: have read the contribution guidelines
• [X] :computer: have added necessary unit/e2e tests.
• [X] :notebook: have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• [X] :bookmark: targeted develop branch

[netlify[bot]]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	22bd26272d7de937321a68347c5dd6160ec30d82
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/6638eedcdfb9d20008a8e64c
😎 Deploy Preview	https://deploy-preview-5483--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 0% with 7 lines in your changes are missing coverage. Please review.

Project coverage is 5.72%. Comparing base (e68125e) to head (22bd262).

Additional details and impacted files

[](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5483?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) ```diff @@ Coverage Diff @@ ## develop #5483 +/- ## ========================================== - Coverage 5.73% 5.72% -0.01% ========================================== Files 277 278 +1 Lines 41999 42012 +13 Branches 515 490 -25 ========================================== Hits 2407 2407 - Misses 39592 39605 +13 ``` | [Flag](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5483/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | Coverage Δ | | |---|---|---| | [unit](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5483/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | `5.72% <0.00%> (-0.01%)` | :arrow_down: | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#carryforward-flags-in-the-pull-request-comment) to find out more. | [Files](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5483?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | Coverage Δ | | |---|---|---| | [packages/mermaid/src/diagrams/common/common.ts](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5483?src=pr&el=tree&filepath=packages%2Fmermaid%2Fsrc%2Fdiagrams%2Fcommon%2Fcommon.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#diff-cGFja2FnZXMvbWVybWFpZC9zcmMvZGlhZ3JhbXMvY29tbW9uL2NvbW1vbi50cw==) | `53.01% <0.00%> (-0.28%)` | :arrow_down: | ... and [1 file with indirect coverage changes](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5483/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js)