Add support for mermaid.js diagrams.

[Mpdreamz]

parcel barfs pretty hard on a regular import.

import mermaid from 'mermaid'

The following is the only way to make it 'work' with the main npm module but it being a esm tagetting browsers makes me think it shouldn't work.

import mermaid from 'mermaid/dist/mermaid.esm.min.mjs'

And while that works we we end up with a gazilion (200+) files in /_static

I therefor opted to depend on https://www.npmjs.com/package/@mermaid-js/tiny instead which is manually copied over to _static.

tiny is a bit of a misnomer its still 1.6mb so we only load these script if the page is actually using mermaid.

This does not support

• Mindmap Diagram
• Architecture Diagram
• Katex rendering

Preview: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/1338/syntax/diagrams

cursorful-video-1748982940773.mp4

[reakaleek]

I'm wondering why there is such a big lag until it renders the mermaid diagram.

[reakaleek]

We might also want to explore lazy loading mermaid as a follow-up. Especially, if we need the full mermaid at some point.

[reakaleek]

IMO it would look nice to show something like a loading spinner or skeleton loader instead of the raw mermaid text.

[Mpdreamz]

I'm wondering why there is such a big lag until it renders the mermaid diagram.

Yeah this really stumped me too. The main distribution of mermaidjs does a lot of lazy loading of script resources at the expense of lags, here were including a special prebaked tiny distribution which shouldn't do that.

IMO it would look nice to show something like a loading spinner or skeleton loader instead of the raw mermaid text.

yeah this is needed before merging, it's not a great look otherwise.

[reakaleek]

Should we also add here which diagrams are not supported? (and maybe why)

[theletterf]

Edited the docs right now

[theletterf]

@Mpdreamz @reakaleek I wonder if switching to the neutral theme would be better for our docs theme and visual identity? https://mermaid.js.org/config/theming.html#available-themes

[theletterf]

The slight rendering delay I notice in the video... Is this something we could avoid? Maybe through lazy loading (didn't check if we implement it)? Would loading Mermaid from the CDN help?