Dynamic loading of diagrams

[knsv]

We want to add more diagram types to Mermaid and more layout options for flowcharts etc. We have been somewhat reluctant to do this on a bigger scale as the backside of this is that the bundle will grow. With enough features and diagrams it will likely grow considerably.

To counter this we are adding the ability to load diagrams dynamically when required instead of having all diagrams in one big bundle. We are eager to get the details of this right before we lock down the API and the functionality.

In release 9.2 lazy loading with a beta API is released.

There are a few things that are worth considering.

• Some diagrams could be bundled in the mermaid bundle. No dynamic loading would be required for them
• Less frequently used diagrams could be lazy-loaded when encountered
• There could be options to "preload" selected non bundled diagrams on start, thus avoiding the need doing a specific bundle
• One would need to provide the location (URL) of the bundles being dynamically loaded
• Delays from a huge (Mb) bundle are avoided but with dynamic loading we have other delays due to network

We are looking for feedback:

• Is this interesting at all?
• Which options are most appealing?
• Other feedback from different perspectives. The needs som someone using mermaid on static webpage is wildly different from someone integrating mermaid in an editor.

[davidmyersdev]

I like this idea. As someone integrating mermaid into a web-based editor, I think the benefits of lazy-loading diagrams (reduced bundle size, faster initialization time, etc) outweigh the cons (flash of unstyled content, delayed rendering).

One would need to provide the location (URL) of the bundles being dynamically loaded

Using dynamic chunks could avoid this problem. Instead, the initialization of each of these diagrams could be based on boolean configurations. E.g.

// on init
mermaid.initialize({
  diagrams: {
    flowchart: true,
    mindmap: true,
    sequence: true,
  },
})

// pseudo init resolution
if (config.diagrams.flowchart) {
  const { id, detector, loader } = await import('./flowchart')

  addDiagram({ id, detector, loader })
}

A public API for registering diagrams in mermaid could also help solve these issues though. Then, you could theoretically have multiple bundles available that build on top of each other.

• A "core" bundle with no diagrams loaded, the ability to lazy-load any of them via config, and a public API where the consumer can either eager-load or lazy-load desired plugins with full control over which diagrams are eager- or lazy-loaded.
• A "minimal" bundle with only the most popular diagrams (built on the core bundle)
• A "full" bundle with all diagrams included (built on top of the core bundle)

[jandrieu]

Is there documentation of how to make a new diagram type that is then lazy loaded?

[fritx]

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