在降价中更改美人鱼主题

Question

除了代码之外，我在我的降价文档中使用美人鱼进行基本图表渲染。我发现this online editor在进行预览时可以对其进行编辑。这建议更改主题（默认和林工作）。

当我将其粘贴到我的降价文档时，如何设置主题？

谢谢！

Answer 1

我一直在寻找与您相同的东西，因此在查看并深入研究Mermaid source code后，您会发现以下代码片段：

for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
  themes[themeName] = require(`./themes/${themeName}/index.scss`)
}

因此，在他们的编辑器中进行测试之后，这些主题运行良好：

• 默认
• 森林
• 黑暗
• 中性

如果要构建自定义主题，可以在这里找到它们的主题： https://github.com/knsv/mermaid/tree/master/src/themes

Answer 2

根据https://mermaidjs.github.io/breakingChanges.html，渲染SVG时会嵌入主题，而使用markdown似乎目前不支持自定义主题设置。

Answer 3

不知道您使用什么来从Markdown生成输出-我将MkDocs与Material结合使用，并添加了Mermaid支持，如解释的here。

经过反复试验后，我发现使用Cloudflare的CDN，您可以将较旧版本的MermaidJS与另一个CSS结合在一起。这样，我能够使用中性样式来渲染图：

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_div_format

extra_css:
  - https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.9/mermaid.neutral.css
extra_javascript:
  - https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.9/mermaid.min.js

Answer 4

可以使用 directive 为每个图形更改 Markdown 文档中的主题。

这是一个示例（使用 Material for Mkdocs 测试）：

This graph uses the forest theme:

``` mermaid
%%{init: {'theme': 'forest', "flowchart" : { "curve" : "basis" } } }%%
graph LR
A[Foo] --> B[Bar]
B --> A
```

That one uses the neutral theme:

``` mermaid
%%{init: {'theme': 'neutral' } }%%
graph LR
A[Foo] --> B[Bar]
B --> C[Baz]
```

结果将是：

Answer 5

据我所知，设置主题的唯一机会是在初始化上：

 mermaid.initialize({
      theme: 'forest',
      logLevel: 1,
      flowchart: { curve: 'linear' },
    });

Answer 6

如果您复制文档中详细说明的stylesheet，对其进行修改并在每个更改的CSS属性之后添加!important，它将优先于Mermaid复制到SVG中的内联样式。距离理想还很遥远，但美人鱼的风格也没有复制，因此这是一种“救火如火”的解决方案。