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

Question

在 Gitlab 中，我已经能够使用 Mermaid 在 Markdown 文件中呈现实体关系图，如此指定的：这里。

这是我使用的 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.json或mermaid-config.json的文件中，但这两个方法都没有奏效。我还尝试将其包含在定义图表的Markdown中，但结果只会导致渲染不正确。有没有一种方法可以指定Gitlab的主题或其他CSS元素？

- John D

Answer 1

刚试过了，它可行

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

- D Saggin

---

在GitLab v13.11.4中使用内置的Mermaid v8.9.2可正常工作。谢谢！ - Sasha MaximAL

是否有选项可以根据 GitHub MD 文件的背景颜色在默认主题和暗黑主题之间切换？我正在将原始 Mermaid 代码添加到 MD 中的代码标记中。但是当在 GitHub 中从暗黑主题切换到浅色主题时，没有任何线条可见。 - Sagar Nayak

这对于 Quarto 文档也适用！ - D. Woods

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

请注意，Mermaid 在此处似乎对换行符很敏感。如果我在 graph LR 和以下的 %%{config 行之间添加一个空行，就会出现语法错误。

旧版 GitLab 的原始答案：

我不认为你可以，除非你想自己托管并修改 GitLab 源代码。

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

• 用户使用 dark 或 solarizedDark 作为他们的 web IDE 主题，以及
• 用户在 IDE web 页面上。

- Chris

Answer 3

很不幸，当前的GitLab使用了mermaidjs版本8.5.2根据合并请求

从mermaid 8.6开始，您应该能够使用指令设置主题或其他设置，而无需触及硬编码的CSS。例如：

%%{init: { 'theme': 'forest' } }%%
erDiagram
   ...

很抱歉，我们需要等一段时间，直到GitLab更新到这个版本。在此期间，您可以查看Mermaid的文档doc。您可以将此包含在您的Markdown中，因为%%被解释为注释并且不会显示在渲染中。但是当GitLab完成升级后，您的页面应该会立即更新。

- Mike Hofmann