如何让GitHub Pages Markdown支持美人鱼图？

Question

我希望在 GitHub 页中使用美人鱼，只需简单的提交和推送。

换句话说，我希望在我的 markdown 文件中写成这样

```mermaid
graph LR
   A --> B
   A -->C
   C -->D
```

并在我的 _layouts/post.html 上添加一些 js 以某种方式将其转换为美人鱼图。

我找到了这个theme claims that it supports such thing. But this theme looks way too heavy for me, the js were just too much, so I thought I could only use this file，简直就是

<script>
 window.Lazyload.js('{{ _sources.mermaid }}', function() {
   mermaid.initialize({
     startOnLoad: true
   });
   mermaid.init(undefined, '.language-mermaid');
 });
</script>

在我的_include/mermaid.html中，我将{{ _sources.mermaid }}替换为美人鱼cdn

<script>
 window.Lazyload.js('https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js', function() {
   mermaid.initialize({
     startOnLoad: true
   });
   mermaid.init(undefined, '.language-mermaid');
 });
</script>

还是不行。在我的 post 中，它显示为常规代码块，而不是美人鱼图。

编辑：在 chrome 开发者看来，我没有看到与 link https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js.

的任何连接

我试过这段代码，在开发者视图的 network 标签中建立了与美人鱼韦斯的连接，但美人鱼图仍然不起作用

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>
<script>
var config = {
    startOnReady:true,
    theme: 'forest',
    flowchart:{
            useMaxWidth:false,
            htmlLabels:true
        }
};
mermaid.initialize(config);
mermaid.init(undefined, '.language-mermaid');
</script>

Answer 1

您尝试使用的 URL 不存在。这是正确的 URL:

https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js

Answer 2

我找到了解决方案。

<!DOCTYPE html>
<html lang="en">
   <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>
    </head>
  
<body>
 <pre><code class="language-mermaid">graph LR
A--&gt;B
</code></pre>

<div class="mermaid">graph LR
A--&gt;B
</div>
 
</body>
<script>
var config = {
    startOnLoad:true,
    theme: 'forest',
    flowchart:{
            useMaxWidth:false,
            htmlLabels:true
        }
};
mermaid.initialize(config);
window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
</script>

</html>

Answer 3

我遇到了类似的问题，最后只使用了一个自定义的 jekyll 插件。如果您能够使用自定义插件，以下将用元素替换美人鱼的降价代码块。

Jekyll::Hooks.register :posts, :pre_render do |post, payload|
  docExt = post.extname.tr('.', '')
  # only process if we deal with a markdown file
  if payload['site']['markdown_ext'].include? docExt
    newContent = post.content.gsub(/```mermaid([^`]+?)```/, '<div class="mermaid"></div>')
    post.content = newContent
  end
end

Answer 4

如果您使用的是 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

上面的代码将被解析为：

Answer 5

我通过在浏览器中安装 Github Mermaid extensioin 解决了这个问题。实际上，他们支持 Chrome、Opera 和 Firefox。

我正在使用 Chrome：https://chrome.google.com/webstore/detail/github-%20-mermaid/goiiopgdnkogdbjmncgedmgpoajilohe?hl=en

Answer 6

除了提到插件的其他答案。我在一家公司工作，要求提供大多数受支持浏览器的扩展链接。

以下是在浏览器级别呈现美人鱼的美人鱼扩展，我已经对它们进行了全部测试：

用于文档的美人鱼图当您使用 mermaid 在 Gitlab 中创建图表时，如果业务随着 Github 或 Azure DevOps 或其他新的版本控制提供商而转移，在这种情况下，您需要安装浏览器插件才能查看图表。

Answer 7

我认为此要求与 Jekyll + Github Pages 相关，因为提到了 Github 页。

有插件可以做到这一点，例如jekyll-spaceship。它支持更多的渲染格式。

为了unsafe plugins works on Github Pages, you will need a Github Workflow Action jekyll-deploy-action.

顺便说一句：自定义插件（将插件放在您的 _plugins 文件夹中）不适用于 Github 页面，它们不是 safe plugins。 Github Pages 将配置锁定到 safe=true，甚至在本地也是如此。

Answer 8

二月。 2022：Markdown 页面支持美人鱼 (gist too)。
作为 Jegors Čemisovs adds in , this does not apply yet to GitHub pages, as illustrated by his example site.

参见：

Include diagrams in your Markdown files with Mermaid

Mermaid is a JavaScript based diagramming and charting tool that takes Markdown-inspired text definitions and creates diagrams dynamically in the browser. Maintained by Knut Sveidqvist, it supports a bunch of different common diagram types for software projects, including flowcharts, UML, Git graphs, user journey diagrams, and even the dreaded Gantt chart.

Working with Knut and also the wider community at CommonMark, we’ve rolled out a change that will allow you to create graphs inline using Mermaid syntax:

Answer 9

新的最佳答案是 GitHub 现在直接支持在 Mermaid 的 markdown 文件中包含图表！

https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/

如何让GitHub Pages Markdown支持美人鱼图？

How to make GitHub Pages Markdown support mermaid diagram?

javascript

jekyll

github-pages

mermaid

Include diagrams in your Markdown files with Mermaid