Pular para conteúdo

Aula 10: Mermaid Avançado ⚡

Interação, Tempo e Criatividade 🧠

O que vamos aprender hoje? 🎯

  1. Diagramas de Sequência 🛡️
  2. Gráficos de Gantt (Tempo) 📅
  3. Mapas Mentais 🧠
  4. Estilização Customizada 💅
  5. Interatividade 🖱️

1. Diagramas de Sequência 🛡️

Como os sistemas conversam entre si?

Foco no tempo e na ordem das mensagens.

Atores e Participantes 🎭

  • actor Cliente: O usuário humano.
  • participant API: O sistema técnico.

Mensagens e Respostas 📨

  • A ->> B: Solicitação (Síncrona).
  • B -->> A: Resposta (Tracejada).

Exemplo Sequência 🛡️

mermaid sequenceDiagram actor Dev participant Git Dev->>Git: git push Git-->>Dev: Success!

2. Gráficos de Gantt 📅

Visualize o tempo!

Ideal para prazos e entregas de software.

Anatomia do Gantt 📅

  • dateFormat: Formato da data.
  • section: Divisão lógica de fases.
  • task: A atividade em si.

Exemplo Gantt 📊

mermaid gantt title Dev Sprint section Codigo Feature A :des1, 2024-03-01, 3d section Testes QA :des2, after des1, 2d

3. Mapas Mentais (Mindmaps) 🧠

Organização de ideias em explosão!

Sintaxe super limpa e hierárquica.

Estrutura do Mindmap 🌳

mermaid mindmap root((Meu App)) Recursos Login Pagamento Tecnologias React Node

4. Estilização Customizada 💅

Seu diagrama não precisa ser cinza e preto.

Use o comando style para dar vida aos nós.

Comandos de Estilo 🎨

  • fill: Cor de fundo.
  • stroke: Cor da borda.
  • stroke-width: Espessura da borda.

Exemplo de Estilo ✨

style ID fill:#f9f,stroke:#333

Deixe o nó crítico em VERMELHO! 🔴

5. Interatividade 🖱️

O Mermaid permite definir ações de clique.

Transforme seu diagrama em um menu de navegação! 🗺️

Exemplo Interativo 🖱️

click A "https://github.com" "Info"

Cria um link direto no nó do diagrama.

Design UX em Diagramas 🎨

  • Notas: Explique o óbvio.
  • Loops: Represente repetições com loop.
  • Alt: Represente caminhos alternativos.

Praticando no Terminal 🐚

$ echo "sequenceDiagram" > aula10.md
$ echo "     A ->> B: Hey" >> aula10.md
$ cat aula10.md

Exercício Rápido 🧠

Como chamo um usuário humano no Mermaid?

A) user B) actor ✅ C) person

Mini-Projeto 🎨

Crie seu arquitetura.md.

  • Diagrama de Sequência (3 participantes)
  • Mapa Mental de Tecnologias
  • Estilos coloridos em nós importantes

Resumo da Aula 📝

  • sequenceDiagram para mensagens.
  • gantt para cronogramas.
  • mindmap para ideias.
  • style para beleza e destaque.

Próxima Parada... 🚂

Aula 11 - Fórmulas Médicas e Científicas (MathJax) 🔢

Como escrever matemática complexa no Markdown.

Obrigado! 🙏

"Sua lógica é bonita, mostre-a com Mermaid."

Ver Aula 11