How do you specify Mermaid configuration within Gitlab Markdown? - gitlab

Question

In Gitlab, I've been able to render an Entity Relationship Diagram with Mermaid in a Markdown file as specified here.
This is the Markdown I used:
```mermaid
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```
The mermaid interactive editor provides an example of configuration:
{
"theme": "default"
}
But I don't know where to locate that configuration information. I've tried putting it in the same directory, in a file called config.json or mermaid-config.json, but neither of those have worked. I also tried including it in the Markdown which defined the diagram, which only caused it to render incorrectly. Is there a way to specify the theme or other CSS elements for Gitlab?

Answer 1

Just tried it out and it worked
```mermaid
%%{init: { 'theme':'dark', 'sequence': {'useMaxWidth':false} } }%%
sequenceDiagram
alice ->> mark: Sent a flower
```

Answer 2

Edit: If you are using a recent enough version of GitLab (possibly 13.9.0 from February, 2021, which changes the shipped version of Mermaid from 8.5.2 to 8.9.0) you can use directives, as mentioned in the other answers:
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
graph LR
%%{config: { 'fontFamily': 'Menlo', 'fontSize': 18, 'fontWeight': 400} }%%
A-->B
```
Note that Mermaid seems to be sensitive to newlines here. If I add a blank line between graph LR and the following %%{config line I get a syntax error.
Original answer for older versions of GitLab:
I don't believe you can, unless you want to self-host and modify the GitLab source code.
The Mermaid.js configuration in GitLab is largely hard-coded. It looks like it uses the neutral theme by default and switches to the dark theme if
the user is using dark or solarizedDark as their web IDE theme, and
if the user is on the IDE web page.

Answer 3

Unfortunately current GitLab uses mermaidjs version 8.5.2 as per merge request
From mermaid 8.6 onward you should be able to use directives to set the theme and/or other settings without touching the hard coded css. For example:
%%{init: { 'theme': 'forest' } }%%
erDiagram
...
I'm afraid we have to wait a little longer, until GitLab updates to this version. You can check in the meantime mermaids doc on the matter. You can includes this already in your markdown, as the %% is interpreted as comments and will not show up in the rendering. But when GitLab makes the move, your pages should immediately update.