你如何在 Gitlab Markdown 中指定美人鱼配置？

Question

在 Gitlab 中，我已经能够按照指定 here.

在 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 元素？

Answer 1

编辑： 如果您使用的是足够新的 GitLab 版本（可能 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，如其他答案中所述：

```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配置为largely hard-coded。看起来它默认使用 neutral 主题，如果

则切换到 dark 主题

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

Answer 2

不幸的是，当前的 GitLab 使用 mermaidjs 版本 8.5.2 as per merge request

从美人鱼 8.6 开始，您应该可以使用 directives 设置主题 and/or 其他设置，而无需触及硬编码 css。例如：

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

恐怕我们得再等一会儿，直到 GitLab 更新到这个版本。您可以在此期间查看美人鱼 doc 中的此事。您可以将其包含在您的降价中，因为 %% 被解释为评论并且不会显示在渲染中。但是当 GitLab 采取行动时，您的页面应该会立即更新。

Answer 3

刚试了一下，效果不错

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

你如何在 Gitlab Markdown 中指定美人鱼配置？

How do you specify Mermaid configuration within Gitlab Markdown?

gitlab

markdown

mermaid