Diagramas com Mermaid

Utilizando Mermaid

Mermaid é uma ferramenta que transforma texto em diagramas, como fluxogramas, diagramas de sequência e diagramas de classes.

Utilizo Mermaid para explicar fluxos e estruturas de forma visual, sem precisar de imagens.

Como está configurado no projeto

O plugin astro-mermaid está configurado no astro.config.mjs, antes do starlight:

import mermaid from 'astro-mermaid';

integrations: [
  mermaid({
    theme: 'neutral',
    autoTheme: true,
  }),
  starlight({ /* ... */ }),
],

theme: 'neutral': tema base dos diagramas.
autoTheme: true: o diagrama muda de cor automaticamente quando alternamos entre tema claro e escuro.

Criando um diagrama

Não precisa de import. Basta criar um bloco de código com a linguagem mermaid:

```mermaid
graph TD
    A[Início] --> B{Funcionou?}
    B -->|Sim| C[Ótimo!]
    B -->|Não| D[Depurar]
    D --> B
```

Resultado:

graph TD
    A[Início] --> B{Funcionou?}
    B -->|Sim| C[Ótimo!]
    B -->|Não| D[Depurar]
    D --> B

Direção do fluxograma

Após graph indicamos a direção:

Código	Direção
`TD` ou `TB`	De cima para baixo
`BT`	De baixo para cima
`LR`	Da esquerda para a direita
`RL`	Da direita para a esquerda

graph LR
    A[Código] --> B[Build] --> C[Deploy]

Diagrama de sequência

Útil para mostrar a comunicação entre sistemas:

```mermaid
sequenceDiagram
    participant U as Usuário
    participant API
    participant DB as Banco de Dados
    U->>API: GET /produtos
    API->>DB: SELECT * FROM produtos
    DB-->>API: Resultado
    API-->>U: 200 OK
```

sequenceDiagram
    participant U as Usuário
    participant API
    participant DB as Banco de Dados
    U->>API: GET /produtos
    API->>DB: SELECT * FROM produtos
    DB-->>API: Resultado
    API-->>U: 200 OK

Diagrama de classes

Útil para estudos de orientação a objetos:

```mermaid
classDiagram
    class Animal {
        +string Nome
        +Falar()
    }
    class Cachorro {
        +Falar()
    }
    Animal <|-- Cachorro
```

classDiagram
    class Animal {
        +string Nome
        +Falar()
    }
    class Cachorro {
        +Falar()
    }
    Animal <|-- Cachorro

Outros tipos de diagramas

O Mermaid suporta vários outros tipos, como stateDiagram-v2, erDiagram, gantt, pie e journey.