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

A Arte de Documentar Visualmente 📊

O que vamos aprender hoje? 🎯

1. O Poder do Mermaid 🧜‍♀️
2. Sintaxe de Fluxogramas 🧱
3. Anatomia dos Nós 📦
4. Conexões e Lógica ➡️
5. Melhores Práticas Visuais 🌟

1. O Poder do Mermaid 🧜‍♀️

Diagramas baseados em texto.

Esqueça o "Print Screen"!

O código é o seu gráfico.

Por que Mermaid? 🤔

• Fácil de atualizar.
• Amigo do Git (Controle de Versão).
• Renderiza em tempo real no VS Code/GitHub.

2. Sintaxe de Fluxogramas 🧱

Iniciamos com o bloco mermaid.

Palavra-chave: graph ou flowchart.

Direções de Fluxo 🚀

• TD: Top Down (Cima -> Baixo)
• LR: Left Right (Esquerda -> Direita)
• RL: Right Left
• BT: Bottom Top

3. Anatomia dos Nós 📦

O ID é interno, o [Texto] é visual.

• A[Retângulo] -> Processo
• B(Arredondado) -> Início/Fim
• C{Losango} -> Decisão

Nós Especiais 🎨

• D((Círculo))
• E>Bandeira]
• F{{ Hexágono }}

4. Conexões e Lógica ➡️

Como os nós se conversam?

• A --> B (Seta simples)
• A --- B (Linha)
• A ==> B (Negrito)

Adicionando Texto na Linha ✍️

A -- Sucesso --> B

Essencial para caminhos de "Sim" e "Não".

Exemplo Real 🧜‍♀️

mermaid graph TD A(Abrir App) --> B{Logado?} B -- Sim --> C[Ver Feed] B -- Não --> D[Tela Login]

Estilizando Nós 💅

Podemos mudar cores e bordas via código!

mermaid graph LR A[Início] --> B[Fim] style A fill:#f9f,stroke:#333,stroke-width:4px

5. Melhores Práticas Visuais 🌟

• Simplicidade: Não tente descrever o código inteiro.
• Coerência: Use as mesmas formas para os mesmos conceitos.
• Hierarchy: Mantenha o fluxo em uma única direção.

Praticando no Terminal 🐚

$ echo "graph LR" > diagrama.md
$ echo "    A --> B" >> diagrama.md
$ cat diagrama.md

Exercício Rápido 🧠

Qual direção cria um fluxo da esquerda para a direita?

A) TD B) LR ✅ C) BT

Mini-Projeto 🎨

Crie seu fluxo_processo.md.

• Diagrama Mermaid de 5 nós
• Pelo menos um No de Decisão
• Setas com nomes das rotas

Resumo da Aula 📝

• Mermaid = Diagrama em Texto.
• Nós definem a Função.
• Direções definem o Sentido.
• Siga as boas práticas de UX.

Próxima Parada... 🚂

Aula 10 - Mermaid Avançado ⚡

Diagramas de Sequência, Gantt e Mapas Mentais.

Obrigado! 🙏

"Um diagrama Mermaid vale mais que mil linhas de texto."

Ver Aula 10