如何在 Gitlab Markdown 中指定 Mermaid 配置？

Question

在 Gitlab 中，我已经能够在此处指定的 Markdown 文件中呈现带有 Mermaid 的实体关系图。

这是我使用的 Markdown：

```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"
                    
```

美人鱼交互式编辑器提供了配置示例：

{
  "theme": "default"
}

但我不知道在哪里可以找到该配置信息。我尝试将其放在同一目录中名为config.jsonor 的文件中mermaid-config.json，但这些都不起作用。我还尝试将其包含在定义图表的 Markdown 中，但这只会导致它渲染不正确。有没有办法为 Gitlab 指定主题或其他 CSS 元素？

Answer 1

刚刚尝试了一下，成功了

 ```mermaid 
 %%{init: { 'theme':'dark', 'sequence': {'useMaxWidth':false} } }%%
 sequenceDiagram 
   alice ->> mark: Sent a flower
 ```

Answer 2

编辑：如果您使用的是足够新的 GitLab 版本（可能是2021 年 2 月的 13.9.0，这将 Mermaid 的发布版本从 8.5.2 更改为 8.9.0），您可以使用指令，如其他答案中所述：

```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%

graph LR
%%{config: { 'fontFamily': 'Menlo', 'fontSize': 18, 'fontWeight': 400} }%%

A-->B
```

请注意，美人鱼似乎对这里的换行符很敏感。graph LR如果我在下一行之间添加一个空行，%%{config则会出现语法错误。

旧版本 GitLab 的原始答案：

我不相信你可以，除非你想自行托管并修改 GitLab 源代码。

GitLab 中的 Mermaid.js 配置很大程度上是硬编码的。看起来它neutral默认使用主题并切换到dark主题，如果

• 用户正在使用dark或solarizedDark作为他们的 Web IDE 主题，并且
• 如果用户位于 IDE 网页上。