Pre-render mermaid graphs on website

[lukastaegert]

This PR contains:

• bugfix
• feature
• refactor
• documentation
• other

Are tests included?

• yes (bugfixes and features will not be merged without tests)
• no

Breaking Changes?

• yes (breaking changes will not be merged unless absolutely necessary)
• no

List any relevant issue numbers:

Description

This replaces vitepress-plugin-mermaid with a custom solution that uses mermaid-cli and a custom Rollup/Vite plugin to pre-render all mermaid graphs at build time instead of at runtime.

This has two effects:

• The JavaScript loaded on the main docs site drops from 344kB to 85kB
• When following an outside link that would take you to an anchor on the plugins page located below the two graphs, it will actually scroll to the right position (e.g. this one https://rollupjs.org/plugin-development/#plugin-context). That is because now the size of the graphs can be determined statically by the browser.

While this seems amazing, I would not yet dare to turn this into a proper plugin for everyone as it is very hacky and tailored to what I need:

• It manually rewrites the output of mermaid CLI to replace some HTML entities and to extract style tags and put them at the top
• It requires me to heavily overwrite styles in my mermaid graphs with !important as I do not know how to do it better to make it look nice in dark mode
• It puts the files for mermaid-cli into a directory I manually put into gitignore

Still, it could be possible to improve upon these things, but I am not sure I would be up to maintain such a plugin. If anyone else wants to build upon it, that would be amazing!

[github-actions]

Thank you for your contribution! ❤️

You can try out this pull request locally by installing Rollup via

npm install rollup/rollup#better-mermaid

or load it into the REPL:
https://deploy-preview-4897--rollupjs.netlify.app/repl/?pr=4897

[codecov]

Codecov Report

Merging #4897 (e711725) into master (de25554) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #4897   +/-   ##
=======================================
  Coverage   98.98%   98.98%           
=======================================
  Files         219      219           
  Lines        7968     7968           
  Branches     2194     2194           
=======================================
  Hits         7887     7887           
  Misses         26       26           
  Partials       55       55           

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[rollup-bot]

This PR has been released as part of rollup@3.19.0. You can test it via npm install rollup.