Pular para conteúdo

Aula 09 - Mermaid na Prática: Fluxogramas 🧜‍♀️

Objetivo

Objetivo: Dominar a criação de fluxogramas (flowcharts) usando a sintaxe Mermaid diretamente no Markdown, aprendendo a representar decisões, processos e conexões lógicas de forma visual.

1. O que é Mermaid? 🧜‍♀️

Mermaid é uma ferramenta baseada em JavaScript que renderiza definições de texto inspiradas no Markdown para criar diagramas complexos. Ela permite que sua documentação tenha gráficos que acompanham as mudanças do texto, sem precisar de editores de imagem externos.

2. Estrutura Básica de um Fluxograma 🧱

Para iniciar um diagrama Mermaid, use o bloco de código com o identificador mermaid. O fluxograma começa com graph ou flowchart, seguido pela direção do fluxo.

Direções Comuns:

  • LR (Left to Right): Da esquerda para a direita.
  • TD ou TB (Top Down / Top to Bottom): De cima para baixo.
  • RL (Right to Left): Da direita para a esquerda.
  • BT (Bottom to Top): De baixo para cima.

3. Tipos de Nós (Nodes) 📦

O formato do nó define seu significado lógico:

  • ID[Texto]: Retângulo (Processo).
  • ID(Texto): Cantos arredondados (Início/Fim).
  • ID{Texto}: Losango (Decisão).
  • ID((Texto)): Círculo.

4. Conexões e Setas ➡️

  • A --> B: Seta simples.
  • A --- B: Linha sem seta.
  • A -- Texto --> B: Seta com descrição.
  • A ==> B: Seta espessa.

Exemplo de Fluxo de Decisão:

mermaid graph TD A(Início) --> B{Tem café?} B -- Sim --> C[Beber café] B -- Não --> D[Fazer café] C --> E(Trabalhar) D --> E

5. Simulação de Criação de Diagrama 🐚

$ echo "graph LR" > fluxo.mermaid
$ echo "    A --> B" >> fluxo.mermaid
$ cat fluxo.mermaid
graph LR
    A --> B

6. Mini-Projeto: Fluxograma de Sistema 🏗️

Crie um diagrama de fluxo que represente o processo de "Login de Usuário": 1. Comece com um nó arredondado "Início". 2. Siga para um nó de processo "Digitar Credenciais". 3. Adicione um nó de decisão "Senha Correta?". 4. Conecte o "Sim" ao "Acesso Autorizado" e o "Não" de volta ao "Digitar Credenciais". 5. Use a direção TD (Top Down).

7. Exercícios de Fixação 🧠

  1. O que significa a sigla LR na definição de um gráfico Mermaid?
  2. Como representar um nó de decisão (losango) na sintaxe Mermaid?
  3. Qual a vantagem de escrever diagramas em texto (código) em vez de usar uma imagem .png?

Próxima Aula: Vamos explorar o Mermaid Avançado com diagramas de sequência! ⚡