Pular para conteúdo

Aula 10 - Mermaid Avançado ⚡

Objetivo

Objetivo: Expandir o uso do Mermaid para diagramas de sequência (interação entre sistemas), gráficos de Gantt (gestão de tempo) e Mapas Mentais, além de aprender a estilizar diagramas com CSS.

1. Diagramas de Sequência 🛡️

Representam como diferentes partes de um sistema (atores e participantes) interagem ao longo do tempo através de mensagens.

Sintaxe Básica:

  • participant: Define um componente.
  • actor: Define um usuário ou entidade externa.
  • A ->> B: Mensagem síncrona.
  • A -->> B: Resposta.

```mermaid sequenceDiagram actor Usuario participant App participant DB

Usuario->>App: Solicita Login
App->>DB: Verifica Credenciais
DB-->>App: OK
App-->>Usuario: Acesso Liberado

```

2. Gráficos de Gantt 📅

Excelentes para cronogramas de projetos dentro da documentação.

mermaid gantt title Cronograma de Estudo dateFormat YYYY-MM-DD section Basico Aula 01-04 :a1, 2024-03-01, 7d section Avancado Aula 09-12 :a2, after a1, 5d

3. Mapas Mentais (Mindmaps) 🧠

Uma forma rápida de organizar ideias e categorias.

mermaid mindmap root((Markdown)) Sintaxe Basica Estendida Ferramentas VS Code MkDocs Diagramas Mermaid PlantUML

4. Estilização de Nós (Styling) 💅

Você pode aplicar cores, bordas e estilos específicos aos nós usando o comando style.

Exemplo:

style A fill:#f9f,stroke:#333,stroke-width:4px

5. Simulação de Sequência Técnica 🐚

$ echo "sequenceDiagram" > seq.mermaid
$ echo "    Alice ->> Bob: Hello" >> seq.mermaid
$ cat seq.mermaid
sequenceDiagram
    Alice ->> Bob: Hello

6. Mini-Projeto: Mapa Mental de Carreira 🏗️

Crie um arquivo carreira.md contendo um mapa mental Mermaid: 1. O centro (Root) deve ser "Tecnologia". 2. Crie ramificações para "Frontend", "Backend" e "Soft Skills". 3. Dentro de cada ramificação, adicione 2 itens (ex: Frontend -> React, Vue).

7. Exercícios de Fixação 🧠

  1. Qual a diferença entre participant e actor em um diagrama de sequência?
  2. Para que serve o comando dateFormat em um gráfico de Gantt?
  3. Como você mudaria a cor de fundo de um nó chamado B para amarelo (#ffff00)?

Próxima Aula: Vamos sair dos gráficos e entrar na matemática com MathJax! 🔢