Ship Mermaid 11 behind a gitlab_com_derisk feature flag
What does this MR do and why?
Adds Mermaid 11 support behind a gitlab_com_derisk feature flag; see Update mermaid to version 11.0.0.0+ (#491514).
Here we:
- Pull in Mermaid 11 as
mermaid-v11. - Refactor the core of the Mermaid sandbox,
app/assets/javascripts/lib/mermaid.js, to expose a function that accepts themermaidmodule as an argument, rather than importing it itself. We don't change any of the implementation itself. - Add
mermaid_v10andmermaid_v11entrypoints which actually import their respective Mermaid versions and the sandbox core, and pass the former into the latter. - Rename v10-specific filenames, URLs and constant names to call out that they're v10-specific and parallel the v11-specific ones, so it's always clear which are version specific vs. non-specific.
- Add a feature flag and push it to the frontend on a per-project/group basis.
- Fix an issue causing Vite to crash loop, due to a semi-broken import of a dependency upgrade required by Mermaid 11 (
cytoscape3.33.1); see the commit message and added comment invite.config.jsfor details. Note https://github.com/cytoscape/cytoscape.js/blob/v3.33.1/package.json#L57-L59. - Fix webpack 4 compatibility with Mermaid 11 and its transitive dependencies (
babel-loaderrule for packages that need it, resolve aliases for packages with anexportsin theirpackage.jsonwithout amainfallback)
There is no change to our security posture, except that from the Mermaid 11 upgrade itself. We sandbox and force CSP on Mermaid (27d33bd2) to mitigate exactly concerns here: we have no new concerns specific to Mermaid 11.
References
- Closes: Update mermaid to version 11.0.0.0+ (#491514)
- Can close: Upstream Mermaid 11 has backwards compatibility... (#554889)
- Can probably close: Mermaid diagrams not rendering invisible edges ... (#554190)
- We implemented a whole feature for Allow use of external Mermaid (and possibly oth... (#498764 - closed) (Allow Kroki companion server for Mermaid (!214968 - merged)) because people needed Mermaid 11
- Previous stalled attempt: Update mermaid to 11.4.1 (!171452 - closed) (lots of discussion)
- More recent attempt without FF: Upgrade Mermaid to 11.13.0 (!226790 - closed)
Screenshots or screen recordings
Using the following payload:
### Renders in both versions
```mermaid
graph LR; A-->B
```
### Only renders in v11
```mermaid
packet
title UDP Packet
+16: "Source Port"
+16: "Destination Port"
32-47: "Length"
48-63: "Checksum"
64-95: "Data (variable length)"
```| Before | After |
|---|---|
![]() |
![]() |
How to set up and validate locally
- Check out the branch; ensure you
yarnandgdk restart. You may even wish tobin/rails vite:clobber. - Use the payload above in a Markdown text surface, such as a work item or MR description.
- You should see the "Before" variant from above.
- Enable the feature for the project your work item or description is in:
> Feature.enable(:use_mermaid_v11, Project.find_by_name('bweh')) - Refresh; you might need to empty cache and refresh, and you might need to refresh a couple times, due to the magic of feature flags.
- You should see the "After" variant from above.
- Qué bonita.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Edited by Asherah Connor

