在Markdown中更改Mermaid主题

Question

我在我的Markdown文档中使用mermaid用于基本图示渲染。我发现这个在线编辑器有用以便在编辑时能够预览(这里是链接)。可以更改主题（default或forest）。

当我将其复制粘贴到我的Markdown文档中时，如何设置主题？

- RandomCoder

Answer 1

可以通过每个图形的 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]
```

结果将会是：

- Edouard Thiel

---

很好。有没有一种方法可以同时修改所有图表？ - Eric Duminil

是的，但在 mkdocs.yml 中查看其他帖子。您还可以设置一个jinja变量并将其注入到mermaid片段中。 - Edouard Thiel

谢谢你的回答。你知道mkdocs参数会是什么样子吗？抱歉，我还没有找到任何信息。其他帖子似乎是针对较旧的mermaid版本。 - Eric Duminil

把 - mermaid2 替换为 - mermaid2：\n     arguments：\n        theme：'forest'\n        flowchart：{curve：'basis'}（保留缩进，并将每个\n替换为回车符）。 - Edouard Thiel

不幸的是，这在我使用Markdown的Azure DevOps中无法工作。 - Andrew Pye

这在 QOwnNotes 中也适用。 - Steak Overflow

Answer 2

我也在寻找同样的东西，所以在查看并深入挖掘Mermaid源代码后找到了这些代码片段：

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在线编辑器，您可以将主题更改为上述提到的主题：

- Federico Piazza

---

虽然不是对所提出问题的确切回答，但还是感谢你的研究。 - phifi

这是我在谷歌搜索“mermaid js主题”时得到的答案。谢谢。 - Jessy

Answer 3

渲染SVG时会嵌入主题，但目前在使用Markdown时没有支持自定义主题设置的功能。

- terry0201

---

遗憾的是，似乎情况确实如此，预设主题是所有可用主题中最丑陋的。 - phifi

@phifi：请看我在 https://dev59.com/hVUL5IYBdhLWcg3w88Eo#57274389 下的评论。我使用了最新版本的Mermaid和Markdown，并可以选择主题（“neutral”与我们的MkDocs材料文档的其余部分非常匹配）。 - Eric Duminil

Answer 4

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

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

- Michael Weinberger

Answer 5

我不知道你用什么来从Markdown生成输出 - 我使用MkDocs和Material, 并像这里所解释的那样添加了Mermaid支持。

经过一些试错配置，我发现使用Cloudflare的CDN，你可以使用另一个CSS包含一个较旧的版本的MermaidJS。这样，我能够使用中性风格渲染图表：

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

- Bernd

---

我最终下载了最新版本（https://unpkg.com/mermaid@8.4.3/dist/mermaid.min.js），查找了 theme:"default"，将其替换为 theme:"forest" 并将 js 文件保存在本地，例如 js/mermaid.min.js。它运行良好，我可以使用最新版本。 - Eric Duminil

Answer 6

您没有说明您的工具链或目标输出格式是什么。

话虽如此，您可以使用Pandoc以及mermaid-filter将包含Mermaid图表的Markdown文件导出为几种格式。

此外，使用mermaid-filter，您可以使用有围栏代码块键值属性选项来选择主题。

例如，让/tmp/example.md包含以下内容：

```{.mermaid theme=forest}
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
```

那么

pandoc --filter mermaid-filter --from markdown --to html /tmp/example.md > /tmp/example.html

将产生一个名为 /tmp/example.html 的 HTML 页面，其外观如下所示

- FK82

Answer 7

еҰӮжһңжӮЁеӨҚеҲ¶ж–ҮжЎЈдёӯиҜҰз»ҶиҜҙжҳҺзҡ„ж ·ејҸиЎЁпјҢ并еңЁжӣҙж”№жҜҸдёӘCSSеұһжҖ§еҗҺж·»еҠ !importantпјҢйӮЈд№Ҳе®ғе°Ҷдјҳе…ҲдәҺMermaidеӨҚеҲ¶еҲ°SVGдёӯзҡ„еҶ…иҒ”ж ·ејҸгҖӮиҝҷиҝңйқһзҗҶжғіи§ЈеҶіж–№жЎҲпјҢдҪҶMermaidеӨҚеҲ¶ж ·ејҸд№ҹдёҚжҳҜеҘҪзҡ„еҒҡжі•пјҢжүҖд»ҘиҝҷжҳҜдёҖз§ҚвҖңз”ЁзҒ«ж”»еҮ»зҒ«вҖқзҡ„и§ЈеҶіж–№жЎҲгҖӮ

- Asbjørn Ulsberg