logo标签列表

如何使GitHub Pages支持mermaid图表的Markdown呈现？

javascriptjekyllgithub-pagesmermaid
17

我希望能够在GitHub-pages中使用mermaid，并且只需要进行简单的提交和推送。

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

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

我希望你能在我的_layouts/post.html上添加一些js，以某种方式将其转换成mermaid图表。

我发现这个主题声称支持这样的功能。但是这个主题对我来说太重了，js代码太多了，所以我想只使用这个文件，它非常简单。

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

在我的_include/mermaid.html中，我将{{ _sources.mermaid }}替换为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>

仍然无法正常工作。在我的帖子中，它显示为普通的代码块，而不是mermaid图表。

编辑：在Chrome开发者视图中，我没有看到任何连接到链接https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js。

我尝试了这段代码，在开发者视图的network标签中建立了与mermaid的连接，但mermaid图表仍然无法正常工作。

<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>
10个回答
12

我找到了解决方案。

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

1
如何在 GitHub 上运行 HTML 代码？我认为这是不可能的。 - Firesh
1
您可以使用GitHub Pages（https://pages.github.com/）将托管在GitHub上的Markdown文件呈现为HTML页面，这也是最初的问题所涉及的。您可以添加自定义JavaScript、CSS、HTML等内容。 - jonasbn
请参阅GitHub上的以下链接：使用Mermaid在Markdown文件中包含图表和mermaid-js的README。 - kenorb
@wooohooo的解决方案效果很好，并且需要最少的配置设置。 请注意，默认的Github Pages实际上使用了一个主题：https://github.com/pages-themes/primer。 你只需要复制并创建**_layouts/default.html**文件，并将两个相应的<script>部分放入其中。<pre><code class="language-mermaid"></code></pre>部分将由Github Pages自动处理。 - undefined
5
如果您正在使用Jekyll，并且不介意使用插件，我认为下面的内容可以帮助您更轻松地完成此操作。
jekyll-spaceship - 一个Jekyll插件，为表格、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

上面的代码将被解析为：

enter image description here

3

2022年2月：Markdown页面支持Mermaid（也适用于gist）（2022年8月：同样适用于wiki页面）。
正如Jegors Čemisovs在评论中提到的那样，这还不适用于GitHub页面，就像他的示例网站所示。

请参见：

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

Mermaid是一款基于JavaScript的绘图和图表工具，它采用类似Markdown的文本定义方法，在浏览器中动态地创建图表。由Knut Sveidqvist维护，它支持多种常见的软件项目图表类型，包括流程图、UML、Git图、用户旅程图，甚至还有令人生畏的甘特图。

与Knut以及更广泛的CommonMark社区合作，我们推出了一个改变，使你能够使用Mermaid语法内联创建图表：

示例

3
GitHub在README.md文件中显示，但在生成的GitHub页面上不显示。测试代码库：github.com/rabestro/test-mermaid生成的GitHub页面网站：https://rabestro.github.io/test-mermaid/ - Jegors Čemisovs
3
@JegorsČemisovs 很好的观点。我希望他们能够扩展对GitHub生成页面的支持。 - VonC
3
@JegorsČemisovs，我已经在答案中包含了您的警告，以增加可见性。 - VonC
3
1
除了其他提到插件的答案之外，我所在的公司要求提供链接以支持大多数浏览器的扩展。
以下是渲染Mermaid的浏览器级别扩展程序，我已经测试了它们：
用于文档的Mermaid图表 当您在Gitlab中使用mermaid创建图表，并且在业务上转移到新的版本控制提供商（如Github或Azure DevOps或其他），在这种情况下，您需要安装浏览器插件才能查看图表。
1
我假设这个要求是针对 Jekyll + Github Pages 的，因为提到了 Github Pages。
有一些插件可以做到这一点，比如jekyll-spaceship。它支持更多的渲染格式。
为了使不安全的插件在Github Pages上工作，你需要一个Github Workflow Action jekyll-deploy-action。
顺便说一下：自定义插件（将插件放在 _plugins 文件夹中）在Github Pages上无法工作，它们不是安全插件。Github Pages将配置锁定为safe=true，即使在本地也是如此。
2022年6月2日，我通过使用Netlify来托管渲染站点，成功解决了这个愚蠢的“不安全插件”问题，而不是使用GitHub Pages... - Shawn Eary
0
抱歉，我更新了链接但结果仍旧不正确。 - wooohooo
@waterliu 函数内的代码在执行吗？ - Lajos Arpad
抱歉，我不知道那是什么意思... 我对JS的了解很少。我只能说这就是我帖子中所有的JS。没有其他的<script>标签。 - wooohooo
@waterliu 在你提供的代码函数中，将调试器命令作为第一个操作插入。打开浏览器的开发工具并加载页面。如果函数内的代码被执行，则你的代码应该立即跳转到它。在开发工具的“Sources”选项卡中检查你的JavaScript。它是否已刷新？ - Lajos Arpad
让我们在聊天中继续这个讨论。 - wooohooo
0
我选择使用HTML而不是Markdown语言。从wooohooo、Mermaid的网站和stackoverflow上使用示例。
在我的post.md中的header html。
在div标签中使用mermaid类属性将你的mermaid代码包含起来。 
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: 你好John，你好吗？
    loop 健康检查
        John->>John: 对抗疑病症
    end
    Note right of John: 理性思考占上风...
    John-->>Alice: 太好了！
    John-->>Bob: 你呢？
    Bob-->>John: 非常好！
在默认布局模板的头部。
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.6.1/mermaid.min.js"></script>

在默认布局模板的html body之后 
window.addEventListener('DOMContentLoaded', function(){
           var config = {
                startOnLoad:true,
                htmlLabels:true,
                callback:function(id){
                    console.log(id,' rendered');
                },
                flowchart:{
                        useMaxWidth:false,
                    }
            };
            
            mermaid.initialize(config);
        },false);
0

我曾经遇到过类似的问题，最后我选择使用自定义的Jekyll插件解决。如果您可以使用自定义插件，则可以使用以下方法将Markdown代码块中的mermaid替换为<div>元素。

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
-3
是的，这就是我在我的回答中提到的。 - VonC
2
GitHub 在 README.md 文件中展示，但不会在生成的 GitHub 页面中展示。测试存储库：https://github.com/rabestro/test-mermaid - Jegors Čemisovs
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接