如何使GitHub页面标记支持美人鱼图？
我希望在GitHub页面中使用美人鱼，只需简单的提交和推送。
换句话说，我希望在我的减价文件中像这样
```mermaid图LR
A->B
A->C
C->D
并在my _layout/post.html上添加一些js，以某种方式将其转换为美人鱼图。
我发现这个主题声称它支持这样的东西。但是这个主题对我来说太重了，js太重了，所以我想我只能使用这个文件，它很简单。
<script>
window.Lazyload.js('{{ _sources.mermaid }}', function() {
mermaid.initialize({
startOnLoad: true
});
mermaid.init(undefined, '.language-mermaid');
});
</script>在my _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的任何连接。
我尝试了这段代码，在developer视图中连接到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>回答 9
Stack Overflow用户
发布于 2018-12-22 08:01:45
我找到了解决办法。
<!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-->B
</code></pre>
<div class="mermaid">graph LR
A-->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>
Stack Overflow用户
发布于 2020-06-22 15:20:05
如果您正在使用Jekyll，并且您不介意使用插件，我认为下面的内容可以帮助您更容易地完成任务。
Jekyll -宇宙飞船-一个Jekyll插件，提供强大的支持桌子，马赛克斯，计划，美人鱼，youtube，表情符号，vimeo，日动等。
https://github.com/jeffreytse/jekyll-spaceship
在Jekyll博客页面中有两种创建图表的方法：
```mermaid!志愿者收养的饼名宠物
“狗”：386
“猫”：85
“老鼠”：35
或
@startmermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 35
@endmermaid上面的代码将被解析为：
Stack Overflow用户
发布于 2020-11-05 10:21:23
我解决了它在浏览器中安装Github美人鱼扩展器的问题。实际上，他们支持Chrome、Opera和Firefox。
我正在使用Chrome：https://chrome.google.com/webstore/detail/github-%20-mermaid/goiiopgdnkogdbjmncgedmgpoajilohe?hl=en
https://stackoverflow.com/questions/53883747
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号