Mermaid Examples
Mermaid is a JavaScript library that can be used to write various graphs and flow-charts within Markdown and render them on a website.
To enable Mermaid support add the following line to any page:
{% include mermaid.html %} Then mermaid graphs can be used as shown below.
Git Graph
<div class="mermaid"> gitGraph: options { "nodeSpacing": 100, "nodeRadius": 10 } end commit branch newbranch checkout newbranch commit commit checkout main commit commit merge newbranch </div> gitGraph: options { "nodeSpacing": 100, "nodeRadius": 10 } end commit branch newbranch checkout newbranch commit commit checkout main commit commit merge newbranch
Flow Chart
<div class="mermaid"> graph LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] </div> graph LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two]