A demo of a Markdown file including an html including a mermaid file

Using include_relative Jekyll tag with Github Pages this markdown file includes an html fragment below referencing sources in the mermaid library format.

Example:

Actual content using Liquid templating

{% include_relative mermaid-fragment.html source="mermaid/flowchart.mmd" %}

Intermediate result using an HTML template

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.1.0/mermaid.min.js">
</script>
<small>
  Source file: <a href="https://github.com/n8v-guy/mermaid-gh-page/blob/master/mermaid/flowchart.mmd">mermaid/flowchart.mmd</a>:
</small>
<div class="mermaid">graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</div>

Processed finale to be rendered by Github Pages / Jekyll

Source file: mermaid/flowchart.mmd:

graph TD; A-->B; A-->C; B-->D; C-->D;

Variery of examples from the mermaid page:

Source file: mermaid/sequence.mmd:

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

---

Source file: mermaid/gantt.mmd:

gantt dateFormat YYYY-MM-DD title Adding GANTT diagram to mermaid excludes weekdays 2014-01-10 section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d

---

Source file: mermaid/class.mmd:

classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label