🗺️ Diagrama de Sequência e Máquina de Estados

sequenceDiagram
    autonumber
    actor User as Usuário
    participant Client as SPA / Frontend
    participant Auth as Auth Server (OAuth2)
    participant API as API Gateway

    User->>Client: Clica em "Login com Google"
    Client->>Auth: Redireciona com client_id e redirect_uri
    Auth-->>User: Solicita consentimento e senha
    User->>Auth: Confirma credenciais
    Auth-->>Client: Retorna Authorization Code
    Client->>API: POST /token (Code + Secret)
    API-->>Client: Retorna JWT (Access + Refresh Token)
    Client-->>User: Redireciona para Dashboard Autenticado ⚡

📖 Fundamentos e Aplicação

Documentar sistemas distribuídos, protocolos de autenticação e fluxos temporais exige modelagem precisa de trocas de mensagens e ciclos de vida de entidades. O Mermaid.js permite renderizar diagramas de sequência e máquinas de estados diretamente a partir de blocos Markdown.

1. Primitivas de Diagramas de Sequência (sequenceDiagram):

  • autonumber: Adiciona numeração sequencial automática a cada passo.
  • ->> e -->>: Setas sólidas e pontilhadas para chamadas síncronas e retornos.
  • loop e alt / else: Blocos de repetição e bifurcações condicionais.
  • par: Execução concorrente / paralela.

2. Máquinas de Estados (stateDiagram-v2):

stateDiagram-v2
    [*] --> Pendente
    Pendente --> Processando: Pagamento Aprovado
    Processando --> Enviado: Postado na Transportadora
    Processando --> Cancelado: Falha no Estoque
    Enviado --> Entregue: Assinatura do Destinatário
    Entregue --> [*]
    Cancelado --> [*]