Gerador de Diagramas de Sequência Mermaid

Sintaxe de Diagrama de Sequência Mermaid

Diagramas de sequência mostram como componentes interagem ao longo do tempo. Cada linha vertical é um participante (serviço, usuário, sistema) e as setas horizontais são mensagens passadas entre eles. São a forma padrão de documentar fluxos de API, handshakes de autenticação e interações em sistemas distribuídos.

Participantes

Declare participantes para controlar sua ordem da esquerda para a direita:

sequenceDiagram
    participant Browser
    participant API
    participant Database

Sem declarações participant explícitas, Mermaid os cria na ordem em que aparecem pela primeira vez. Use actor em vez de participant para renderizar um ícone de figura (útil para usuários humanos).

Tipos de Mensagem

A convenção: linhas sólidas para requisições, linhas pontilhadas para respostas. ->> (seta preenchida) é a mais comum.

Barras de Ativação

Mostre quando um participante está processando ativamente:

sequenceDiagram
    Client->>+API: Request
    API->>+DB: Query
    DB-->>-API: Result
    API-->>-Client: Response

O + após ->> ativa o destino. O - desativa. Barras de ativação empilham se um participante é ativado múltiplas vezes. Alternativamente, use activaté API e deactivaté API explícitos.

Fluxo de Controle

Condicionais

alt Success
    API-->>Client: 200 OK
else Not Found
    API-->>Client: 404
else Server Error
    API-->>Client: 500
end

Loops

loop Every 30 seconds
    Client->>API: Heartbeat
    API-->>Client: ACK
end

Opcional

opt Has cache
    API->>Cache: Get cached result
    Cache-->>API: Cached data
end

Paralelo

par Upload avatar
    Client->>Storage: PUT /avatar
and Updaté profile
    Client->>API: PATCH /profile
end

Notas

Note left of API: Validates JWT
Note right of DB: Read replica
Note over Client,API: HTTPS only

Notas podem abranger múltiplos participantes com Note over A,B: texto. Renderizam como post-its amarelos presos à linha do tempo.

Numeração

Adicione autonumber após sequenceDiagram para numerar automaticamente cada mensagem. Útil para referenciar passos específicos na documentação (“veja o passó 4 no diagrama”).

Padrões Práticos

Autenticação de API REST

O estado inicial deste exemplo mostra um fluxo de login completo seguido por uma requisição autenticada. Este padrão aparece em quase toda aplicação web e é um bom ponto de partida para documentar sua própria API.

Entrega de Webhook

sequenceDiagram
    participant App
    participant Webhook
    participant Consumer

    App->>Webhook: POST /webhooks/events
    Webhook->>Consumer: POST callback_url
    alt 2xx
        Consumer-->>Webhook: 200 OK
        Webhook-->>App: delivered
    else Timeout
        Webhook->>Webhook: Schedule retry
        Webhook->>Consumer: POST callback_url (retry 1)
    end

Transação de banco de dados

sequenceDiagram
    participant Service
    participant DB

    Service->>DB: BEGIN
    Service->>DB: INSERT INTO orders
    Service->>DB: UPDATE inventory
    alt All succeeded
        Service->>DB: COMMIT
    else Error
        Service->>DB: ROLLBACK
    end

Para documentação de modelo de dados, o Diagrama ER Mermaid mostra relacionamentos de tabelas. Para fluxos de processó sem ordenação temporal, use o Fluxograma Mermaid.