在降价中更改美人鱼主题

Question

除了代码外，我在markdown文档中使用美人鱼进行基本图表渲染。我发现此在线编辑器对预览时的编辑很有用。建议更改主题（默认和森林作品）。

将主题粘贴到markdown文档中时如何设置主题？

Answer 1

可以使用每个图的指令更改 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 2

我一直在寻找与您相同的东西，因此在查看并深入研究美人鱼源代码后，可以找到以下代码片段：

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

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

• 默认
• 森林
• 暗
• 中性

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

如果您转到Mermaid在线编辑器，则可以将主题更改为上述主题：

Answer 3

渲染 SVG 时嵌入主题，目前似乎不支持使用 Markdown 时自定义主题设置。

Answer 4

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

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