Renderize Mermaid no GitHub

Uma ferramenta nativa para o GitHub que permite criar diagramas e visualizações usando texto e código.


Renderize Mermaid no GitHub


Mermaid permite criar diagramas e visualizações usando texto e código.

É uma ferramenta de diagramação e gráficos baseada em JavaScript que renderiza definições de texto inspiradas em Markdown para criar e modificar diagramas dinamicamente.


Utilização

Para criar diagramas com Mermaid basta criar um arquivo de extensão .md(Markdown) e criar um bloco de código onde será inserida a sintaxe para seus diagramas, exemplo:

```mermaid
```

Note que precisa definir a sintaxe para mermaid.

Exemplo básico, um fluxograma entre: A, B, C e D:

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

A saída será:

Mermaid fluxograma


Suporte nativo para o Mermaid

O GitHub possui suporte nativo para o Mermaid. Isso significa que se você criar uma sintaxe Mermaid no seu README.md de algum repositório, será renderizado automaticamente, incluindo controle para manipular os diagramas, exemplo:

# Recursos
- FastAPI
- Banco de Dados 

```mermaid
graph LR;
  A["API (FastAPI) fa:fa-globe"]
  B[("Banco de Dados (PG) fa:fa-cubes")]
  A --> B
```

Será renderizado como:

Mermaid exemplo

Note os controles, se quiser ver renderizado clique aqui.


Para mais informações e detalhes acesse: https://mermaid.js.org/


markdown github


Compartilhe


Nosso canal no Youtube

Inscreva-se


Marcos Oliveira

Marcos Oliveira

Desenvolvedor de software
https://github.com/terroo


Crie Aplicativos Gráficos para Linux e Windows com C++

Aprenda C++ Moderno e crie Games, Programas CLI, GUI e TUI de forma fácil.

Saiba Mais

Receba as novidades no seu e-mail!

Após cadastro e confirmação do e-mail, enviaremos semanalmente resumos e também sempre que houver novidades por aqui para que você mantenha-se atualizado!