gitlab - 如何让图形在 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;
```

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

我正在尝试使用下面链接中的方法，它似乎只支持使用 JS，因此应该可以与 GitLab 页面一起使用，但我还没有找到名为 mermaid.full.min.js 的文件 在 repo 协议(protocol)中，所以......也许它不受支持，或者已经改变了？

http://kkpattern.github.io/2015/05/15/Embed-Chart-in-Jekyll.html

Answer 1

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

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

https://github.com/jeffreytse/jekyll-spaceship

有两种方法可以在您的 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

上面的代码将被解析为: