如何让图形在 Mermaid + Jekyll / GitLab Pages 中呈现？

Question

我有一个 GitLab Pages 项目并尝试使用 Mermaid 渲染图形。

在 head.html 我包含了这一行 ...

<script type="text/javascript" src="{{ '/assets/js/mermaid/mermaid.js' | absolute_url }}"></script>

然后将mermaid.js文件放在myproj/assets/js/mermaid目录下。

在我的 *.md 文件中有：

```mermaid
graph TD;
  A-->B;
  A-->C;
  A-->D;
  A-->D;
```

然而，我没有得到效果图。

我正在尝试使用下面link中的方法，它似乎只支持使用JS，因此应该可以与GitLab页面一起使用，但我还没有找到名为[=14=的文件] 在回购协议中，所以......也许它不受支持，或者已经改变了？

Answer 1

由于您正在使用 Jekyll，所以如果您不介意使用插件，我希望下面的内容可以帮助您更轻松地完成它。

jekyll-spaceship - A Jekyll plugin to provide powerful supports for table, mathjax, plantuml, mermaid, youtube, emoji, vimeo, dailymotion, etc.

有两种方法可以在您的 Jekyll 博客页面中创建图表：

```mermaid!
pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 35
```

或

@startmermaid
pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 35
@endmermaid

上面的代码将被解析为：

How to get graphs to render in Mermaid + Jekyll / GitLab Pages?