2

在 Gitlab 中，我已经能够在此处指定的 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.jsonor的文件中mermaid-config.json，但这些都没有奏效。我还尝试将它包含在定义图表的 Markdown 中，这只会导致它渲染不正确。有没有办法为 Gitlab 指定主题或其他 CSS 元素？

4

3 回答 3

6

刚刚试了一下，效果很好

 ```mermaid 
 %%{init: { 'theme':'dark', 'sequence': {'useMaxWidth':false} } }%%
 sequenceDiagram 
   alice ->> mark: Sent a flower
 ```
于 2021-03-22T18:06:20.933 回答
3

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

从 mermaid 8.6 开始，您应该能够在directives不触及硬编码 css 的情况下设置主题和/或其他设置。例如：

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

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

于 2020-08-08T10:51:07.147 回答
2

编辑：如果您使用的是足够新的 GitLab 版本（可能是13.9.0 from February, 2021，它将 Mermaid 的发货版本从 8.5.2 更改为 8.9.0），您可以使用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 配置大部分是硬编码的。看起来它neutral默认使用主题并切换到dark主题如果

  • 用户正在使用dark或solarizedDark作为他们的 Web IDE 主题，并且
  • 如果用户在 IDE 网页上。
于 2020-07-16T21:40:04.697 回答