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.
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.

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.

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! 🔢