Support diagram preloading

[luin]

Proposal

We are currently using v9.1 and lazy loading Mermaid using await import('mermaid'). After upgrading to v10, we noticed that an additional network round trip is required to render the diagrams. This is because after downloading the mermaid core file, mermaid v10 will lazy load the code for diagrams that are used on the page.

I'm wondering if there is a plan to provide preloading support for diagrams. A simple approach would be making the diagram files importable:

await Promise.all([
  import('mermaid'), // may be just import('mermaid-core')?
  import('mermaid/flowchart'),
  import('mermaid/mindmap'),
  // ...
])

Currently, it doesn't work because there are content hashes in the diagram files' file names.

Another approach would be providing a mermaid-bootstrap, the only purpose of it is to load diagrams so it's very tiny and can be bundled into the main chunk.

Example

No response

Screenshots

No response

[sidharthv96]

You can use the registerExternalDiagrams to pre-load all diagrams.

await mermaid.registerExternalDiagrams([], {
        lazyLoad: false,
      });

If this is helpful, we can expose a method on mermaid or add a config to preload diagrams.

Also, curious to know about your use case.

[luin]

Thank you for the update! However, this means we must import Mermaid (which has a relatively large bundle size as it's not just a bootstrapper) into our main bundle to prevent network waterfalls.

In our use case, we are using v9 and we only lazy-load Mermaid when users visit a page containing Mermaid code. This helps us reduce our main asset bundle size. This approach only requires one round-trip to download all necessary assets. However, after version 10, there are two round-trips:

1. We need to download the Mermaid first.
2. Mermaid retrieves the diagram types from the code we provide and then downloads the corresponding diagrams.

My initial attempt to avoid the two round trips is to bundle Mermaid with our main bundle and let Mermaid handle lazy-loading for diagrams. Unfortunately, this approach was not effective because the Mermaid bundle is somewhat large. Therefore, I believe an alternative direction would be to bundle all diagrams and the Mermaid core into a single bundle, which can be lazy-loaded as a whole. Does this make sense?

[fritx]

How do I specify which of the diagrams to enable? Is the feature supported?