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

Question

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

换句话说，我希望像这样写入我的降价文件

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

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

我发现这个主题声称它支持这样的事情。但是这个主题对我来说太重了，js太多了，所以我以为我只能使用这个文件，这很简单

<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 开发人员看来，我没有看到与 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>

score 7 · Accepted Answer

我找到了解决方案。

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

score 4 · Accepted Answer

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

jekyll-spaceship - 一个 Jekyll 插件，为 table、mathjax、plantuml、mermaid、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

上面的代码将被解析为：

score 3 · Accepted Answer

我解决了它购买在浏览器中安装 Github Mermaid 扩展。实际上，它们支持 Chrome、Opera 和 Firefox。

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

score 2 · Accepted Answer

2022 年 2 月：Markdown 页面支持美人鱼（gist too）。
正如Jegors Čemisovs在评论中添加的那样，这不适用于 GitHub 页面，如他的示例站点所示。

看：

使用 Mermaid 在 Markdown 文件中包含图表

Mermaid是一个基于 JavaScript 的图表和图表工具，它采用 Markdown 启发的文本定义并在浏览器中动态创建图表。由Knut Sveidqvist维护，它支持软件项目的许多不同的常见图表类型，包括流程图、UML、Git 图、用户旅程图，甚至是可怕的甘特图。

与 Knut 以及CommonMark的更广泛社区合作，我们推出了一项更改，允许您使用Mermaid 语法创建内联图形：

score 1 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

我遇到了类似的问题，最后只使用了一个自定义的 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">\1</div>')
    post.content = newContent
  end
end

score 0 · Accepted Answer

我认为这个要求是Jekyll + Github Pages因为提到了 Github Pages。

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

为了使不安全的插件可以在 Github 页面上运行，您需要一个 Github 工作流操作jekyll-deploy-action。

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

score 0 · Accepted Answer

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

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

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

9 回答 9

使用 Mermaid 在 Markdown 文件中包含图表

Related

Reference