title: Diagramas e visualização em Markdown description: Como usar Mermaid no Markdown para criar fluxogramas, sequências e outros gráficos que tornam a documentação mais expressiva.

Diagramas

O Markdown permite criar diagramas com Mermaid, trazendo visualizações ricas para os teus documentos.

Introdução ao Mermaid

Mermaid é um gerador de gráficos baseado em texto, com vários tipos:

Fluxograma (Flowchart)
Diagrama de sequência (Sequence Diagram)
Diagrama de Gantt (Gantt Chart)
Diagrama de classes (Class Diagram)
Diagrama de estados (State Diagram)
Gráfico de setores (Pie Chart)
Jornada do utilizador (User Journey)
Gráfico Git (Git Graph)

Sintaxe básica

Fluxograma (Flowchart)

markdown

```mermaid
flowchart TD
    A[Início] --> B{Está autenticado?}
    B -->|Sim| C[Mostrar página inicial]
    B -->|Não| D[Mostrar página de login]
    C --> E[Fim]
    D --> F[Utilizador faz login]
    F --> G{Login bem-sucedido?}
    G -->|Sim| C
    G -->|Não| H[Mostrar mensagem de erro]
    H --> D


**Resultado**:

```mermaid
flowchart TD
    A[Início] --> B{Está autenticado?}
    B -->|Sim| C[Mostrar página inicial]
    B -->|Não| D[Mostrar página de login]
    C --> E[Fim]
    D --> F[Utilizador faz login]
    F --> G{Login bem-sucedido?}
    G -->|Sim| C
    G -->|Não| H[Mostrar mensagem de erro]
    H --> D

Diagrama de sequência (Sequence Diagram)

markdown

```mermaid
sequenceDiagram
    participant U as Utilizador
    participant F as Frontend
    participant B as Backend
    participant D as Base de dados
    
    U->>F: Pedido de login
    F->>B: Verificar informações do utilizador
    B->>D: Consultar dados do utilizador
    D-->>B: Retornar informações do utilizador
    B-->>F: Resultado da verificação
    F-->>U: Resposta de login


**Resultado**:

```mermaid
sequenceDiagram
    participant U as Utilizador
    participant F as Frontend
    participant B as Backend
    participant D as Base de dados
    
    U->>F: Pedido de login
    F->>B: Verificar informações do utilizador
    B->>D: Consultar dados do utilizador
    D-->>B: Retornar informações do utilizador
    B-->>F: Resultado da verificação
    F-->>U: Resposta de login

Fluxogramas — detalhes

Tipos de nós

markdown

```mermaid
flowchart LR
    A[Nó retangular]
    B(Nó com cantos arredondados)
    C((Nó circular))
    D{Nó losangular}
    E[[Sub-rotina]]
    F[(Base de dados)]
    G>Nó de etiqueta]


**Resultado**:

```mermaid
flowchart LR
    A[Nó retangular]
    B(Nó com cantos arredondados)
    C((Nó circular))
    D{Nó losangular}
    E[[Sub-rotina]]
    F[(Base de dados)]
    G>Nó de etiqueta]

Tipos de ligações

markdown

```mermaid
flowchart TD
    A --> B
    C --- D
    E -.-> F
    G ==> H
    I --o J
    K --x L


**Resultado**:

```mermaid
flowchart TD
    A --> B
    C --- D
    E -.-> F
    G ==> H
    I --o J
    K --x L

Direções

markdown

<!-- Top‑Down -->
```mermaid
flowchart TD
    A --> B

mermaid

flowchart BT
    A --> B

mermaid

flowchart LR
    A --> B

mermaid

flowchart RL
    A --> B


### Exemplo completo

```markdown
```mermaid
flowchart TD
    Start([Início]) --> Analysis[Análise]
    Analysis --> Design[Design]
    Design --> Dev{Desenvolvimento}
    
    Dev --> Frontend[Frontend]
    Dev --> Backend[Backend]
    Dev --> Database[Base de dados]
    
    Frontend --> FrontTest[Teste FE]
    Backend --> BackTest[Teste BE]
    Database --> DataTest[Teste dados]
    
    FrontTest --> Integration[Testes de integração]
    BackTest --> Integration
    DataTest --> Integration
    
    Integration --> Deploy{Preparação de deploy}
    Deploy -->|ok| Production[Produção]
    Deploy -->|falha| Bug[Correções]
    Bug --> Integration
    
    Production --> Monitor[Monitorização]
    Monitor --> End([Concluído])
    
    style Start fill:#e1f5fe
    style End fill:#e8f5e8
    style Bug fill:#ffebee


**Resultado**:

```mermaid
flowchart TD
    Start([Início do projeto]) --> Analysis[Análise de requisitos]
    Analysis --> Design[Design do sistema]
    Design --> Dev{Desenvolvimento}
    
    Dev --> Frontend[Frontend]
    Dev --> Backend[Backend]
    Dev --> Database[Base de dados]
    
    Frontend --> FrontTest[Teste FE]
    Backend --> BackTest[Teste BE]
    Database --> DataTest[Teste de dados]
    
    FrontTest --> Integration[Testes de integração]
    BackTest --> Integration
    DataTest --> Integration
    
    Integration --> Deploy{Preparação de deploy}
    Deploy -->|ok| Production[Produção]
    Deploy -->|falha| Bug[Correções]
    Bug --> Integration
    
    Production --> Monitor[Monitorização]
    Monitor --> End([Projeto concluído])
    
    style Start fill:#e1f5fe
    style End fill:#e8f5e8
    style Bug fill:#ffebee

Sequências — detalhes

Sintaxe básica

markdown

```mermaid
sequenceDiagram
    Alice->>Bob: Olá Bob, tudo bem?
    Bob-->>Alice: Tudo ótimo, obrigado!
    Alice-)Bob: Até já!


**Resultado**:

```mermaid
sequenceDiagram
    Alice->>Bob: Olá Bob, tudo bem?
    Bob-->>Alice: Tudo ótimo, obrigado!
    Alice-)Bob: Até já!

Ativações e lifelines

markdown

```mermaid
sequenceDiagram
    participant A as Cliente
    participant B as Servidor
    
    A->>+B: Pedido de dados
    Note right of B: Processar pedido
    B-->>-A: Resposta
    
    A->>+B: Novo pedido
    B->>+B: Processamento interno
    B-->>-B: Terminado
    B-->>-A: Resultado


**Resultado**:

```mermaid
sequenceDiagram
    participant A as Cliente
    participant B as Servidor
    
    A->>+B: Pedido de dados
    Note right of B: Processar pedido
    B-->>-A: Resposta
    
    A->>+B: Novo pedido
    B->>+B: Processamento interno
    B-->>-B: Terminado
    B-->>-A: Resultado

Loops e condições

markdown

```mermaid
sequenceDiagram
    participant U as Utilizador
    participant S as Sistema
    
    U->>S: Login
    
    alt utilizador existe
        S->>S: Validar password
        alt correta
            S-->>U: Sucesso
        else incorreta
            S-->>U: Erro
        end
    else não existe
        S-->>U: Utilizador não encontrado
    end
    opt lembrar sessão
        S->>S: Guardar estado
    end


**Resultado**:

```mermaid
sequenceDiagram
    participant U as Utilizador
    participant S as Sistema
    
    U->>S: Login
    
    alt utilizador existe
        S->>S: Validar password
        alt correta
            S-->>U: Sucesso
        else incorreta
            S-->>U: Erro
        end
    else não existe
        S-->>U: Utilizador não encontrado
    end
    opt lembrar sessão
        S->>S: Guardar estado
    end

Diagrama de classes (Class Diagram)

markdown

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }
    
    class Dog {
        +String breed
        +bark()
        +wagTail()
    }
    
    class Cat {
        +String color
        +meow()
        +purr()
    }
    
    Animal <|-- Dog
    Animal <|-- Cat
    
    class Owner {
        +String name
        +feedPet()
    }
    
    Owner --> Animal : owns


**Resultado**:

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }
    
    class Dog {
        +String breed
        +bark()
        +wagTail()
    }
    
    class Cat {
        +String color
        +meow()
        +purr()
    }
    
    Animal <|-- Dog
    Animal <|-- Cat
    
    class Owner {
        +String name
        +feedPet()
    }
    
    Owner --> Animal : owns

Diagrama de estados (State Diagram)

markdown

```mermaid
stateDiagram-v2
    [*] --> Idle
    Idle --> Run : Start
    Run --> Pause : Pause
    Run --> Done : Finish
    Pause --> Run : Resume
    Pause --> Stop : Stop
    Stop --> Idle : Reset
    Done --> Idle : Reset
    Done --> [*]
    
    state Run {
        [*] --> Init
        Init --> Processing
        Processing --> Verify
        Verify --> [*]
    }


**Resultado**:

```mermaid
stateDiagram-v2
    [*] --> Idle
    Idle --> Run : Start
    Run --> Pause : Pause
    Run --> Done : Finish
    Pause --> Run : Resume
    Pause --> Stop : Stop
    Stop --> Idle : Reset
    Done --> Idle : Reset
    Done --> [*]
    
    state Run {
        [*] --> Init
        Init --> Processing
        Processing --> Verify
        Verify --> [*]
    }

Gantt (Gantt Chart)

markdown

```mermaid
gantt
    title Cronograma de desenvolvimento
    dateFormat  YYYY-MM-DD
    section Análise
    Levantamento       :done,    des1, 2024-01-01,2024-01-05
    Análise            :done,    des2, after des1, 5d
    Revisão            :done,    des3, after des2, 2d
    
    section Design
    Design do sistema  :active,  design1, 2024-01-12, 7d
    UI                 :         design2, after design1, 5d
    Base de dados      :         design3, after design1, 3d
    
    section Desenvolvimento
    Frontend           :         dev1, after design2, 10d
    Backend            :         dev2, after design3, 12d
    Testes             :         test1, after dev1, 5d


**Resultado**:

```mermaid
gantt
    title Cronograma de desenvolvimento
    dateFormat  YYYY-MM-DD
    section Análise
    Levantamento       :done,    des1, 2024-01-01,2024-01-05
    Análise            :done,    des2, after des1, 5d
    Revisão            :done,    des3, after des2, 2d
    
    section Design
    Design do sistema  :active,  design1, 2024-01-12, 7d
    UI                 :         design2, after design1, 5d
    Base de dados      :         design3, after design1, 3d
    
    section Desenvolvimento
    Frontend           :         dev1, after design2, 10d
    Backend            :         dev2, after design3, 12d
    Testes             :         test1, after dev1, 5d

Gráfico de setores (Pie)

markdown

```mermaid
pie title Fontes de tráfego
    "Pesquisa" : 45
    "Social" : 25
    "Direto" : 20
    "Email" : 7
    "Outros" : 3


**Resultado**:

```mermaid
pie title Fontes de tráfego
    "Pesquisa" : 45
    "Social" : 25
    "Direto" : 20
    "Email" : 7
    "Outros" : 3

Jornada do utilizador (User Journey)

markdown

```mermaid
journey
    title Jornada de compra
    section Descoberta
      Home: 3: User
      Explorar produtos: 4: User
      Pesquisa: 4: User
    section Consideração
      Ver detalhes: 4: User
      Comparar preços: 3: User
      Ler avaliações: 5: User
    section Compra
      Adicionar ao carrinho: 4: User
      Checkout: 3: User
      Pagamento: 2: User
    section Uso
      Receber produto: 5: User
      Usar produto: 4: User
      Escrever avaliação: 4: User


**Resultado**:

```mermaid
journey
    title Jornada de compra
    section Descoberta
      Home: 3: User
      Explorar produtos: 4: User
      Pesquisa: 4: User
    section Consideração
      Ver detalhes: 4: User
      Comparar preços: 3: User
      Ler avaliações: 5: User
    section Compra
      Adicionar ao carrinho: 4: User
      Checkout: 3: User
      Pagamento: 2: User
    section Uso
      Receber produto: 5: User
      Usar produto: 4: User
      Escrever avaliação: 4: User

Gráfico Git (Git Graph)

markdown

```mermaid
gitgraph
    commit id: "Commit inicial"
    commit id: "Módulo de utilizadores"
    branch feature/auth
    commit id: "Login"
    commit id: "Registo"
    checkout main
    commit id: "Correção homepage"
    merge feature/auth
    commit id: "Versão v1.0"
    branch hotfix
    commit id: "Hotfix"
    checkout main
    merge hotfix
    commit id: "Versão v1.0.1"


**Resultado**:

```mermaid
gitgraph
    commit id: "Commit inicial"
    commit id: "Módulo de utilizadores"
    branch feature/auth
    commit id: "Login"
    commit id: "Registo"
    checkout main
    commit id: "Correção homepage"
    merge feature/auth
    commit id: "Versão v1.0"
    branch hotfix
    commit id: "Hotfix"
    checkout main
    merge hotfix
    commit id: "Versão v1.0.1"

Casos práticos

Arquitetura de sistema

markdown

```mermaid
flowchart TB
    subgraph "Camada de utilizador"
        Web[Navegador]
        Mobile[App]
        API[Cliente API]
    end
    
    subgraph "Gateway"
        Gateway[API Gateway]
        Auth[Autenticação]
    end
    
    subgraph "Serviços"
        UserService[Utilizadores]
        OrderService[Encomendas]
        PaymentService[Pagamentos]
        NotificationService[Notificações]
    end
    
    subgraph "Dados"
        UserDB[(BD Utilizadores)]
        OrderDB[(BD Encomendas)]
        Cache[(Redis)]
        Queue[Fila]
    end
    
    Web --> Gateway
    Mobile --> Gateway
    API --> Gateway
    
    Gateway --> Auth
    Gateway --> UserService
    Gateway --> OrderService
    Gateway --> PaymentService
    
    UserService --> UserDB
    OrderService --> OrderDB
    PaymentService --> Queue
    NotificationService --> Queue
    
    UserService --> Cache
    OrderService --> Cache
    
    style Gateway fill:#e1f5fe
    style Auth fill:#fff3e0
    style Cache fill:#f3e5f5


### Fluxo de chamada de API

```markdown
```mermaid
sequenceDiagram
    participant C as Cliente
    participant G as API Gateway
    participant A as Autenticação
    participant U as Utilizadores
    participant D as Base de dados
    participant R as Redis
    
    C->>G: Pedir dados de utilizador
    G->>A: Verificar token
    A->>R: Consultar cache de token
    R-->>A: Token válido
    A-->>G: Autenticado
    
    G->>U: Obter utilizador
    U->>R: Consultar cache
    alt em cache
        R-->>U: Dados em cache
    else sem cache
        U->>D: Consultar BD
        D-->>U: Dados
        U->>R: Atualizar cache
    end
    
    U-->>G: Dados do utilizador
    G-->>C: Resposta com dados


### Fluxo de negócio

```markdown
```mermaid
flowchart TD
    Start([Pedido]) --> Check{Stock}
    Check -->|ok| Reserve[Reservar]
    Check -->|sem| OutOfStock[Sem stock]
    OutOfStock --> Notify[Notificar]
    Notify --> End1([Fim])
    
    Reserve --> Payment{Pagamento}
    Payment -->|ok| ConfirmOrder[Confirmar]
    Payment -->|falha| ReleaseStock[Liberar]
    ReleaseStock --> PaymentFailed[Falha]
    PaymentFailed --> End2([Fim])
    
    ConfirmOrder --> UpdateInventory[Atualizar stock]
    UpdateInventory --> SendNotification[Notificar]
    SendNotification --> Logistics[Logística]
    Logistics --> End3([Concluído])
    
    style Start fill:#e8f5e8
    style End1 fill:#ffebee
    style End2 fill:#ffebee
    style End3 fill:#e8f5e8
    style OutOfStock fill:#ffebee
    style PaymentFailed fill:#ffebee


## Estilos e temas

### Estilos de nós

```markdown
```mermaid
flowchart LR
    A[Estilo padrão] --> B[Estilo 1]
    A --> C[Estilo 2]
    A --> D[Estilo 3]
    
    style B fill:#f9f,stroke:#333,stroke-width:4px
    style C fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
    style D fill:#f96,stroke:#333,stroke-width:4px,color:#fff


### Estilos por classe

```markdown
```mermaid
flowchart LR
    A[Nó A]:::classA --> B[Nó B]:::classB
    A --> C[Nó C]:::classC
    
    classDef classA fill:#e1f5fe,stroke:#01579b,stroke-width:2px
    classDef classB fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
    classDef classC fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px


## Configuração e compatibilidade

### VitePress

```javascript
// .vitepress/config.js
export default {
  markdown: {
    mermaid: true
  }
}

GitHub

O GitHub suporta Mermaid nativamente:

markdown

```mermaid
graph LR
    A --> B


### Outras plataformas

| Plataforma | Suporte | Config |
|------------|--------|-------|
| **GitHub** | ✅ Nativo | — |
| **GitLab** | ✅ Nativo | — |
| **VitePress** | ✅ Plugin | Requer config |
| **Jekyll** | ✅ Plugin | Instalar |
| **Hugo** | ✅ Tema | Depende do tema |

## Boas práticas

### Design

```markdown
✅ Recomenda-se:

1. **Manter simplicidade**:
   - Evitar gráficos excessivamente complexos
   - Usar etiquetas e ligações claras

2. **Layout adequado**:
   - Escolher a direção apropriada do gráfico
   - Manter o fluxo lógico claro

3. **Estilo consistente**:
   - Usar um tema de cores consistente
   - Manter o estilo dos gráficos uniforme

4. **Adicionar descrições**:
   - Adicionar títulos a gráficos complexos
   - Fornecer descrições de texto necessárias

❌ Evitar:

1. Gráficos demasiado complexos para entender
2. Demasiadas intersecções de linhas de ligação
3. Etiquetas pouco claras
4. Falta de legenda necessária

Performance

markdown

- **Otimização de gráficos grandes**:
  - Considerar dividir gráficos complexos
  - Usar subgráficos para organizar a estrutura

- **Performance de carregamento**:
  - Evitar usar demasiados gráficos numa única página
  - Considerar implementação de carregamento lazy

- **Adaptação móvel**:
  - Garantir que os gráficos são legíveis em ecrãs pequenos
  - Considerar design com rolagem horizontal

Sintaxe relacionada

Ferramentas e recursos

Editores online

Mermaid Live Editor: Editor online oficial
Draw.io: Ferramenta universal de desenho de gráficos
Lucidchart: Plataforma profissional de criação de gráficos
Excalidraw: Ferramenta de gráficos com estilo de desenho à mão

Desenvolvimento

Mermaid CLI: Ferramenta de linha de comandos
VS Code Mermaid: Extensão do Visual Studio Code
Atom Mermaid: Extensão do editor Atom
IntelliJ Mermaid: Extensão da IDE JetBrains

Referências

Documentação oficial do Mermaid: Referência completa de sintaxe
Biblioteca de exemplos do Mermaid: Vários exemplos de gráficos
GitHub Mermaid: Como usar no GitHub
Awesome Mermaid: Coleção de recursos relacionados

Domina a sintaxe e cria gráficos profissionais que melhoram a clareza e o impacto dos teus documentos.

title: Diagramas e visualização em Markdown description: Como usar Mermaid no Markdown para criar fluxogramas, sequências e outros gráficos que tornam a documentação mais expressiva. ​

Diagramas ​

Introdução ao Mermaid ​

Sintaxe básica ​

Fluxograma (Flowchart) ​

Diagrama de sequência (Sequence Diagram) ​

Fluxogramas — detalhes ​

Tipos de nós ​

Tipos de ligações ​

Direções ​

Sequências — detalhes ​

Sintaxe básica ​

Ativações e lifelines ​

Loops e condições ​

Diagrama de classes (Class Diagram) ​

Diagrama de estados (State Diagram) ​

Gantt (Gantt Chart) ​

Gráfico de setores (Pie) ​

Jornada do utilizador (User Journey) ​

Gráfico Git (Git Graph) ​

Casos práticos ​

Arquitetura de sistema ​

GitHub ​

Performance ​

Sintaxe relacionada ​

Ferramentas e recursos ​

Editores online ​

Desenvolvimento ​

Referências ​

title: Diagramas e visualização em Markdown description: Como usar Mermaid no Markdown para criar fluxogramas, sequências e outros gráficos que tornam a documentação mais expressiva.

Diagramas

Introdução ao Mermaid

Sintaxe básica

Fluxograma (Flowchart)

Diagrama de sequência (Sequence Diagram)

Fluxogramas — detalhes

Tipos de nós

Tipos de ligações

Direções

Sequências — detalhes

Sintaxe básica

Ativações e lifelines

Loops e condições

Diagrama de classes (Class Diagram)

Diagrama de estados (State Diagram)

Gantt (Gantt Chart)

Gráfico de setores (Pie)

Jornada do utilizador (User Journey)

Gráfico Git (Git Graph)

Casos práticos

Arquitetura de sistema

GitHub

Performance

Sintaxe relacionada

Ferramentas e recursos

Editores online

Desenvolvimento

Referências