Menu
I am hoping to use mermaid in GitHub-pages, with simple commit and push.
In other words, I am hoping to wirte in my markdown file like this
```mermaid
graph LR
A --> B
A -->C
C -->D
```
and add some js on my _layouts/post.html to somehow transform this to a mermaid graph.
I have found this 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, which is simply
<script>
window.Lazyload.js('{{ _sources.mermaid }}', function() {
mermaid.initialize({
startOnLoad: true
});
mermaid.init(undefined, '.language-mermaid');
});
</script>
In my _include/mermaid.html, I replaced {{ _sources.mermaid }} to the 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>
it still won't work. In my post, it was shown as regular code blocks, not a mermaid diagram.
Edit: In chrome developer's view, I don't see any connections made to the link https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js.
And I tried this code, a connection to mermaid wes made in network tag in developer view, but the mermaid diagram still doesn't work
<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>
309
The new best answer is that GitHub now directly supports including diagrams in your markdown files with Mermaid! GitHub shows it in README.md file but doesn’t show on generated GitHub pages. The test repository: github.com/rabestro/test-mermaid
Support for displaying Mermaid diagrams has appeared on GitHub's top list of feature requests since 2015. In its absence, many developers simply added screenshots to their Markdown. Today, we're excited to add native support for Mermaid wherever Markdown is supported (e.g., issues, repositories, discussions, gists).
You can create diagrams in Markdown using three different syntaxes: mermaid, geoJSON and topoJSON, and ASCII STL. Mermaid is a Markdown-inspired tool that renders text into diagrams. For example, Mermaid can render flow charts, sequence diagrams, pie charts and more.
In markdown files, you can now use Mermaid syntax to easily create flow charts, sequence diagrams, and more. GitHub’s flavor of markdown already handles images, task lists, and emoji short codes. With support for common diagrams, GitHub is doing its bit for more informative, useful documentation. What’s New With GitHub?
Feb. 2022: Markdown pages support Mermaid (gist too).
As Jegors Čemisovs adds in the comments, this does not apply yet to GitHub pages, as illustrated by his example site.
See:
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:
33
I found the solution.
<!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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With