O Mermaid é uma biblioteca que permite criar diversos tipos de diagramas e visualizações utilizando apenas texto. É uma ótima combinação para se usar com o Markdown. Inclusive o Mermaid foi inspirado no Markdown.

E é simples usar em conjunto com o Jekyll, sendo que não é necessário instalar nada adicional.

Vou mostrar como utilizar o Mermaid no Jekyll e como também visualizá-lo no preview de Markdown do VSCode.

Utilizando o Mermaid

Em cada página que for utilizar o Mermaid, adicione:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.11.0/mermaid.min.js"></script>

Agora é incluir o código Mermaid dentro de uma div com a class mermaid:

<div class="mermaid">
graph TD;
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
</div>

E o resultado será:

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

Configurando o VSCode

Instale a extensão Markdown Preview Mermaid Support no VSCode.

E a renderização no VSCode passará a exibir os diagramas do Mermaid:

VSCode Latex

Mais informações em: http://blog.lindenliu.com/2020/01/07/use-mermaid-jekyll.html