Mermaid diagrams for FabAcademy

Introduction

Mermaid is a simple markdown-like script language for generating charts from text via javascript. It is used in the FabAcademy to generate flowcharts and other diagrams. The syntax is very simple and easy to learn. You can find the documentation here.

Installation

mkdocs

Mermaid is already installed in the mkdocs environment.

Hugo

Add the file mermaid.html to your layouts/partials folder with the following content:

<script
  type="application/javascript"
  src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"
></script>
<script>
  var config = {
    startOnLoad: true,
    theme:'{{ if site.Params.mermaid.theme }}{{ site.Params.mermaid.theme }}{{ else }}dark{{ end }}',
    align:'{{ if site.Params.mermaid.align }}{{ site.Params.mermaid.align }}{{ else }}center{{ end }}',
  };
  mermaid.initialize(config);
</script>

Add the file mermaid.html to your layouts/shortcodes folder with the following content:

<div class="mermaid">{{.Inner}}</div>

Add the following line to the layouts/head.html file:

<!-- Add mermaid min js file -->
  {{ if (.Params.mermaid) }}{{ partial "mermaid.html" }}{{ end }}

To configure Mermaid you can add the following parameters to your config.toml file:

[params.mermaid]
theme = "dark"
align = "center"

To create mermaid diagrams in your content files, you can use the following syntax:


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

Jekyll

Add the file mermaid.html to your _includes folder with the following content:

<script
  type="application/javascript"
  src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"
></script>

<script>
  var config = {
    startOnLoad: true,
    theme:'{{ if site.mermaid.theme }}{{ site.mermaid.theme }}{{ else }}dark{{ end }}',
    align:'{{ if site.mermaid.align }}{{ site.mermaid.align }}{{ else }}center{{ end }}',
  };
  mermaid.initialize(config);
</script>

<div class="mermaid">{{ include.content }}</div>

To configure Mermaid you can add the following parameters to your _config.yml file:

mermaid:
  theme: "dark"
  align: "center"

To create mermaid diagrams in your content files, you can use the following syntax:

{% include mermaid.html content="
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
" %}

Examples

Flowchart

        {{ <mermaid> }}
        graph TD;
        A-->B;
        A-->C;
        B-->D;
        C-->D;
    {{ </mermaid> }}
        {% include mermaid.html content="
        graph TD;
        A-->B;
        A-->C;
        B-->D;
        C-->D;
    " %}
        ```mermaid
        graph TD;
        A-->B;
        A-->C;
        B-->D;
        C-->D;
    ```

    renders to:

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

    Sequence diagram

          {{ <mermaid> }}
        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 <br/>prevail...
        John-->>Alice: Great!
        John->>Bob: How about you?
        Bob-->>John: Jolly good!
    {{ </mermaid> }}
          {% include mermaid.html content="
        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 <br/>prevail...
        John-->>Alice: Great!
        John->>Bob: How about you?
        Bob-->>John: Jolly good!
    " %}
          ```mermaid
        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 <br/>prevail...
        John-->>Alice: Great!
        John->>Bob: How about you?
        Bob-->>John: Jolly good!
    ```

      renders to:

      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!

      Class diagrams