Como incluir diagramas de sereia em seu projeto GitHub

A popular plataforma de compartilhamento de código, GitHub, anunciou suporte para um novo tipo de conteúdo incorporado. Em arquivos de remarcação, agora você pode usar a sintaxe Mermaid para criar facilmente fluxogramas, diagramas de sequência e muito mais.

O sabor de markdown do GitHub já lida com imagens, listas de tarefas e códigos curtos de emoji. Com suporte para diagramas comuns, o GitHub está fazendo sua parte para obter uma documentação mais informativa e útil.

O que há de novo no GitHub?

Agora você pode incorporar o código Mermaid em seu README.md e outros arquivos de remarcação. Se você fizer isso, o GitHub renderizará um diagrama descrito por esse código. O código Mermaid usa uma sintaxe simples que descreve as partes individuais de cada diagrama em texto simples.

Veja também: O que é o GitHub? Uma introdução às suas características básicas

Como incluir diagramas?

1. Escolha um arquivo markdown existente ou crie um novo para adicionar ao seu repositório. Use qualquer um .md ou .markdown extensões.
instagram viewer
2. Adicione algum código Mermaid a esse arquivo. Exatamente qual código depende de você; aqui está um exemplo simples para começar:

   gráfico TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

3. Visualize o arquivo no GitHub. Você deve ver uma boa renderização do seu diagrama.

Agora você só precisa conhecer a riqueza de diagramas que o Mermaid tem disponível. Ou você pode simplesmente consultar o sereia documentação como e quando você precisar de um diagrama.

Que tipos de diagramas posso usar?

Mermaid suporta os seguintes tipos de diagramas:

• Fluxograma
• Seqüência
• Classe
• Estado
• Relacionamento de entidade
• Jornada do Usuário
• Gantt
• Torta
• Requerimento

Veja também: Gráfico de Gantt vs. Gráfico PERT: Quais são as diferenças?

Cada um tem sua própria sintaxe, para refletir o tipo de dados que o diagrama exibe. Por exemplo, aqui está o código para um diagrama de sequência simples:

diagrama de sequência
 Bart->>Homer: Não tenha uma vaca, cara.

Que se parece com isso quando renderizado:

E aqui está o código para um diagrama de estado básico:

stateDiagram-v2
 [*] --> Novo
 Novo --> Pronto: admitido
 Pronto --> Em execução: despacho do agendador
 Em execução --> Pronto: interrupção
 Running --> Waiting: E/S ou espera de evento
 Aguardando --> Pronto: E/S ou conclusão do evento
 Executando --> Terminado: sair
 Terminado --> [*]

Que renderiza como tal:

Agregue valor aos seus projetos do GitHub com diagramas de sereia

Diagramas de sereia são uma adição útil ao GitHub, principalmente porque acreditamos que eles incentivam uma melhor documentação. Muitos projetos podem ser aprimorados com alguns explicadores visuais diretamente em sua documentação ou arquivos README.

O GitHub agora é um serviço tão popular, seus recursos e alterações afetam muitos desenvolvedores em todo o mundo. Felizmente, o suporte para diagramas de sereia está disponível se você precisar e invisível se não precisar. Mas, esperançosamente, você começará a ver pelo menos uma documentação melhor.

Como hospedar um site de graça usando o GitHub Pages

Se você tem um site simples, não precisa pagar pela hospedagem na web. Você pode usar o GitHub Pages gratuitamente!

Leia a seguir

Sobre o autor