Upgrade Mermaid to 11.13.0
What does this MR do and why?
It's a brand new day. Let's try Mermaid 11.13.0, which comes with https://github.com/mermaid-js/mermaid/pull/7276 merged.
References
- Upstream Mermaid 11 has backwards compatibility... (#554889) outlines some issues that have been holding us back from the Mermaid 11 upgrade. It seems that, as of now, all four problems main problems outlined have been addressed.
- Update mermaid to version 11.0.0.0+ (#491514) is an earlier request to upgrade.
- Update mermaid to 11.4.1 (!171452 - closed) is an earlier attempt which ran aground.
Screenshots or screen recordings
| Before | After |
|---|---|
![]() |
![]() |
Before, an unsupported diagram (example given in !171452 (closed)'s description under "How to set up and validate locally") doesn't render, while a supported one does. After, both render correctly.
How to set up and validate locally
- Check out the branch,
yarnto install the latest dependencies. - If your GDK is a feisty one, you may wish to restart it.
- Ensure you haven't enabled Mermaid-via-Kroki from
/admin/application_settings/general#js-kroki-settings("Mermaid" should be unticked). - Try creating Mermaid graphs with
```mermaidsyntax. Existing ones should continue to work well.
The the three diagrams below (first from !171452 (closed), two more concocted from various sources) exercise all four of the issues mentioned at #554889:
```mermaid
%%{init: { "fontFamily": "GitLab Sans" }}%%
flowchart RL
accTitle: Subgroup membership
accDescr: How users become members of a subgroup - through direct, indirect, or inherited membership.
subgraph Group A
A(Direct member)
B{{Shared member}}
subgraph Subgroup A
H(1. Direct member)
C{{2. Inherited member}}
D{{Inherited member}}
E{{3. Shared member}}
end
A-->|Direct membership of Group A\nInherited membership of Subgroup A|C
end
subgraph Group C
G(Direct member)
end
subgraph Group B
F(Direct member)
end
F-->|Group B\nshared with\nGroup A|B
B-->|Inherited membership of Subgroup A|D
G-->|Group C shared with Subgroup A|E
```
```mermaid
flowchart TD
A[GitLab frontend] -->B["`AiAction **GraphQL** mutation`"]
B --> C[2. Llm::ExecuteMethodService]
C --> D[Hmm, `ok`.]
```
```mermaid
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>Jo=hn: How about you Joh=n?
Bob--x Alice: I am good thanks!
Bob-x Jo=hn: I am good thanks!
Note right of Jo=hn: Bob thinks a long<br/>long time, so lo=ng<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with Jo=hn...
Alice->Jo=hn: Yes... Jo=hn, how are you?
```
No errors, no \ns.
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


