Mermaid Support

[brophdawg11]

It would be awesome to add mermaid support in our markdown files via mermaid code blocks like github has:

https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/

Then we could include all sorts of diagrams in our markdown files.

References:

• https://github.com/mermaid-js/mermaid
• https://github.com/remcohaszing/rehype-mermaid

[kandros]

👋 @brophdawg11 I was able to make it work

Turns out rehype-mermaid depends on playwright in order to render the image, do you think this is acceptable or is a blocker to continue?

[brophdawg11]

I think folks on twitter were saying mermaid adds pretty significant bundle bloat - can you confirm/deny the change in client-side JS payload when this is added?

If there is a bloat I think we may need to look into lazily loading the mermaid dependencies and rendering the diagrams client side only - although that could introduce a potentially bad CLS if the diagram was above the fold. I wonder if they could be pre-rendered to SVG's on the server somehow