This lesson is being piloted (Beta version)

Git Collaboration: Authors Guide for Git graphs

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]