Question

我希望通过简单的提交和推送在GitHub页面中使用美人鱼。

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

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

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

我发现这个theme声称它支持这种事情。但是这个主题对我来说太重了，js太多了，所以我认为我只能使用这个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>

它仍然无法正常工作。在我的帖子中，它显示为常规代码块，而不是美人鱼图。

编辑：在chrome开发人员看来，我看不到链接https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js的任何连接。

我尝试了这段代码，即在开发人员视图的network标签中建立了与美人鱼wes的连接，但是美人鱼图仍然不起作用

<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

我找到了解决方法。

<!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 2

如果您使用的是Jekyll，并且您不介意使用插件，那么我认为以下内容可以帮助您更轻松地完成操作。

jekyll-spaceship-Je一个Jekyll插件，可为表格，mathjax，plantuml，美人鱼，youtube，emoji，vimeo，dailymotion等提供强大的支持。

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 3

您尝试使用的URL不存在。这是正确的网址：

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

Answer 4

我解决了购买在浏览器中安装Github Mermaid extensioin的问题。实际上，他们支持Chrome，Opera和Firefox。

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

Answer 5

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

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">\1</div>')
    post.content = newContent
  end
end

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

5 个答案: