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-elk and registers its loaders in app/assets/javascripts/lib/mermaid_v11.js
  • aliases the package to its ESM entry, since it ships exports without a main field (the same handling already used for @mermaid-js/parser), and points the bare mermaid import inside the loader's lazy chunk at the mermaid-v11 install 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):

Before vs after: layout: elk on a real GitLab issue page

Testing done

  • yarn jest spec/frontend/lib/mermaid_integration_spec.js passes, including a new test that the ELK loaders are registered.
  • Confirmed the full module chain (mermaid-v11 -> @mermaid-js/layout-elk -> its lazy chunk -> bare mermaid -> elkjs) resolves through the aliases by bundling a standalone entry.
  • Rendered the flowchart above using the sandbox init config (securityLevel: 'strict') and confirmed layout: elk produces the ELK layout, different from the default, so the strict security level does not block the directive.

Closes #559229

Edited by Eldar Dadashov

Merge request reports

Loading