Register ELK layout loader for Mermaid
What does this MR do and why?
A Mermaid diagram that asks for the ELK layout (layout: elk in its frontmatter) is currently rendered with the default layout instead. The directive is silently ignored. This fixes that.
Root cause: Mermaid v11 moved the ELK layout into a separate @mermaid-js/layout-elk package that has to be registered with mermaid.registerLayoutLoaders(...). GitLab upgraded Mermaid to v11 but never added or registered that package, so layout: elk has no loader to resolve to and Mermaid falls back to the default.
This MR:
- adds
@mermaid-js/layout-elkand registers its loaders inapp/assets/javascripts/lib/mermaid_v11.js - aliases the package to its ESM entry, since it ships
exportswithout amainfield (the same handling already used for@mermaid-js/parser), and points the baremermaidimport inside the loader's lazy chunk at themermaid-v11install so a single Mermaid instance is shared
elkjs is only pulled in the loader's lazily loaded chunk, so it loads on demand when a diagram actually uses layout: elk rather than as part of the main Mermaid bundle.
How to test
```mermaid
---
config:
layout: elk
elk:
mergeEdges: true
---
flowchart TB
S --> QEu
QEu -- No --> Ex --> E
QEu -- Yes --> QS
QS -- No --> QV
QS -- Yes --> Ge --> E
QV -- No --> Ge
QV -- Yes --> Ex
```Before this change it renders with the default (dagre) layout; after it renders with the ELK layout.
Screenshots
The same flowchart on a real GitLab issue page, before and after this change (rendered by GitLab's sandboxed Mermaid):
Testing done
yarn jest spec/frontend/lib/mermaid_integration_spec.jspasses, including a new test that the ELK loaders are registered.- Confirmed the full module chain (
mermaid-v11->@mermaid-js/layout-elk-> its lazy chunk -> baremermaid-> elkjs) resolves through the aliases by bundling a standalone entry. - Rendered the flowchart above using the sandbox init config (
securityLevel: 'strict') and confirmedlayout: elkproduces the ELK layout, different from the default, so the strict security level does not block the directive.
Closes #559229
