16

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

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

4

7 回答 7

21

我正在寻找和你一样的东西，所以在查看并挖掘美人鱼源代码后可以找到这些代码片段：

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

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

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

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

如果您去美人鱼在线编辑器，您可以将主题更改为上述主题：

在此处输入图像描述

于 2018-09-19T15:10:49.107 回答
9

可以使用每个图形的指令来更改 Markdown 文档中的主题。

这是一个示例（使用 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]
```

结果将是：

结果图

于 2021-04-17T10:24:36.953 回答
5

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

 mermaid.initialize({
      theme: 'forest',
      logLevel: 1,
      flowchart: { curve: 'linear' },
    });
于 2019-09-23T15:56:59.790 回答
5

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

于 2018-09-17T04:19:25.193 回答
3

不知道你用什么来从你的 Markdown 中产生输出——我使用MkDocs和Material，并添加了 Mermaid 支持，就像这里解释的那样。

经过一些试错配置后，我发现使用 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
于 2019-07-30T14:45:51.330 回答
0

如果您复制文档中详述的样式表!important，修改它并在您更改每个 CSS 属性后添加，它将优先于 Mermaid 复制到 SVG 中的内联样式。远非理想，但复制美人鱼的风格也不是，所以这是一个“以火攻毒”的解决方案。

于 2019-09-26T23:55:35.380 回答
0

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

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

另外，使用美人鱼过滤器，您可以使用围栏代码块的键值属性选项选择主题

例如，让 /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

将生成一个 HTML 页面 /tmp/example.html，如下所示

美人鱼图示例

于 2022-01-06T18:32:10.040 回答