Pular para conteúdo

Exercícios - Aula 10: Mermaid Avançado ⚡

🟢 Básico

  1. Diagrama de Sequência: Crie um diagrama onde "Cliente" envia a mensagem "Olá" para "Servidor" e o "Servidor" responde com "Como posso ajudar?".
  2. Mapa Mental: Crie um mindmap com o nó central "Frutas" e três ramificações: "Vermelhas", "Amarelas" e "Verdes".

🟡 Intermediário

  1. Estilização: Crie um fluxograma (graph LR) com dois nós (A e B). Aplique um estilo ao nó A para que ele tenha fundo verde (#00ff00) e borda preta grossa.
  2. Gantt Simples: Crie um gráfico de Gantt de um final de semana.
    • Sábado: "Descansar" (8h).
    • Domingo: "Estudar" (4h).

🔴 Desafio

  1. Interação de Sistema Complexa:
    • Crie um arquivo exercicio10.md.
    • Desenvolva um diagrama de sequência que represente o fluxo de "Esqueci minha senha":
      • Ator: Usuario.
      • Participantes: App, EmailService, Database.
      • O usuário solicita a recuperação.
      • O App consulta o Email no DB.
      • O DB confirma a existência.
      • O App solicita ao EmailService o envio do link.
      • O EmailService confirma o envio.
      • O App informa o usuário: "Verifique sua caixa de entrada".
    • Adicione uma nota (Note over ...) no diagrama explicando que o token expira em 30 min.
  2. Dentro de cada ramificação, adicione 2 itens (ex: Frontend -> React, Vue).


📚 Gabarito e Solução Comentada

Gabarito Explicado ## 🟢 Básico 1. **Participant vs Actor**: `participant` é um componente retangular, `actor` é um ícone de "palitinho" que representa um humano ou entidade externa. 2. **dateFormat**: Define como as datas serão interpretadas no gráfico de Gantt. ## 🟡 Intermediário 3. **Style**: `style B fill:#ffff00`. 4. **Sequência**: `A ->> B: Mensagem`. ## 🔴 Desafio 5. **Mapa Mental**:
mindmap
  root((Tecnologia))
    Frontend
      React
      Vue
    Backend
      Node
      Python
    Soft Skills
      Comunicação
      Liderança