Módulo 04

Fluxos & Diagramas de Sequência

Crie fluxos de negócio, diagramas de sequência e diagramas de estado com IA usando Mermaid — visualize os diagramas diretamente nesta página e copie o código para usar nas suas ferramentas.

Mermaid ao vivo sequência estado fluxograma prompts

Os três tipos de fluxo que uma analista produz

TipoQuando usarMermaid
Fluxo de negócioDocumentar o processo independente do sistema, com swimlanes por atorflowchart TD
Diagrama de sequênciaTroca de mensagens entre sistema, usuário e serviços externossequenceDiagram
Diagrama de estadoCiclo de vida de uma entidade: pedido, contrato, ticketstateDiagram-v2

Fluxo de negócio — fluxograma

⬭
Oval / Elipse
Início e fim do fluxo. Sempre um de cada, visíveis e rotulados. Sintaxe: ([Texto])
▬
Retângulo
Atividade ou tarefa. Nome no infinitivo: "Validar dados". Sintaxe: [Texto]
◇
Losango
Decisão com pergunta: "Desconto > 15%?" e saídas Sim/Não. Sintaxe: {Texto?}
▭
Swimlane
Raia por ator. Separa responsabilidades visualmente. Sintaxe: subgraph NomeAtor
⚠️
Boas práticas: Use swimlanes sempre que houver mais de um ator. Todo losango deve ter duas saídas rotuladas. Sempre mostre os caminhos de exceção, não só o caminho feliz.
Exemplo 1 — Fluxo de registro e aprovação de pedido
Renderizando diagrama…
flowchart TD
  subgraph Vendedor
    A([Início]) --> B[Preenche dados do pedido]
    B --> C[Adiciona itens e quantidades]
    C --> D[Aplica desconto]
    D --> E{Desconto > 15%?}
    E -->|Sim| F[Solicita aprovação gerencial]
    E -->|Não| G[Clica em Confirmar Pedido]
    F --> G
  end

  subgraph Sistema
    G --> H{Valida estoque}
    H -->|Insuficiente| I[Alerta de pendência de estoque]
    H -->|Disponível| J{Valor total >= R$10.000?}
    I --> J
    J -->|Sim| K[Status: Aguardando aprovação]
    J -->|Não| L[Status: Aprovado automaticamente]
    K --> M[Notifica gestor por e-mail]
    L --> N[Notifica cliente por e-mail]
    M --> O([Fim — aguardando gestor])
    N --> P([Fim — pedido confirmado])
  end
Fluxo: Registro de pedido de venda manual com validação de estoque e regra de aprovação por valor. flowchart TD · swimlanes

Diagrama de sequência

Mostra quem fala com quem, em que ordem e com quais dados. É o mais técnico dos três, mas também o mais valioso para o DEV — especialmente em integrações.

💡
Use obrigatoriamente quando: há integração com APIs externas, fluxos assíncronos, operações de segurança (autenticação, autorização), ou quando a ordem das mensagens importa para o negócio.
ElementoSintaxe MermaidRepresenta
Ator humanoactor NomePessoa que interage com o sistema
Sistema/serviçoparticipant NomeSistema, API, banco, serviço
Chamada (request)A->>B: mensagemSeta sólida — envio de dado ou ação
Resposta (response)B-->>A: mensagemSeta tracejada — retorno
Condicionalalt Condição … else … endBloco de decisão com ramificações
Opcionalopt Condição … endBloco que pode ou não acontecer
NotaNote over A,B: textoComentário contextual no diagrama
Exemplo 2 — Autenticação com bloqueio por tentativas
Renderizando diagrama…
sequenceDiagram
  actor Usuario as Usuário
  participant App as Sistema (Front)
  participant Auth as Serviço de Auth
  participant DB as Banco de Dados
  participant Email as Serviço de E-mail

  Usuario->>App: Informa CPF + senha
  App->>Auth: POST /autenticar {cpf, senha}
  Auth->>DB: SELECT usuário WHERE cpf = ?
  DB-->>Auth: Dados do usuário

  alt Credenciais válidas
    Auth->>Auth: Valida senha (hash bcrypt)
    Auth-->>App: Token JWT + perfil do usuário
    App-->>Usuario: Redireciona para dashboard

  else Credenciais inválidas
    Auth->>DB: Incrementa tentativas_falhas
    DB-->>Auth: tentativas_falhas = N

    alt 3ª tentativa ou mais
      Auth->>DB: Bloqueia conta por 15 min
      Auth->>Email: Envia notificação de bloqueio
      Email-->>Usuario: E-mail: conta temporariamente bloqueada
      Auth-->>App: Erro 403 - Conta bloqueada
      App-->>Usuario: "Conta bloqueada. Tente novamente em 15 min."
    else Menos de 3 tentativas
      Auth-->>App: Erro 401 - Credenciais inválidas
      App-->>Usuario: "CPF ou senha incorretos"
    end
  end
Fluxo: Autenticação com validação de credenciais, contagem de tentativas e bloqueio automático por segurança. sequenceDiagram · alt/else
Seta sólida → chamada / envio
Seta tracejada → resposta / retorno
Bloco alt → condicional

Exemplo: Pedido com aprovação gerencial

Um exemplo mais complexo com múltiplos sistemas integrados, condicionais aninhados e fluxo de aprovação.

Renderizando diagrama…
sequenceDiagram
  actor Vendedor
  participant Sistema as Sistema de Vendas
  participant Estoque as API de Estoque
  participant Aprovacao as Módulo de Aprovação
  participant Email as Serviço de E-mail

  Vendedor->>Sistema: Confirma pedido
  Sistema->>Estoque: GET /estoque/{produto_id}

  alt Estoque disponível
    Estoque-->>Sistema: {disponivel: true, quantidade: 50}
    Sistema->>Sistema: Calcula total e avalia regras

    alt Valor total < R$10.000
      Sistema->>Sistema: Status = Aprovado automaticamente
      Sistema->>Email: Envia confirmação ao cliente
      Email-->>Vendedor: Pedido PED-2025-001234 confirmado
    else Valor total >= R$10.000
      Sistema->>Aprovacao: Cria solicitação de aprovação
      Aprovacao->>Email: Notifica gestor responsável
      Email-->>Vendedor: Pedido aguardando aprovação gerencial
    end

  else Estoque insuficiente
    Estoque-->>Sistema: {disponivel: false, quantidade: 0}
    Sistema-->>Vendedor: Alerta: estoque insuficiente

    opt Vendedor opta por salvar com pendência
      Vendedor->>Sistema: Confirma com flag pendência de estoque
      Sistema->>Sistema: Salva com status Pedido com pendência
      Sistema-->>Vendedor: Pedido salvo — estoque pendente
    end
  end
Fluxo: Registro de pedido com validação de estoque em tempo real e regra de aprovação por valor total. sequenceDiagram · alt aninhado · opt

Diagrama de estado

Documenta os possíveis estados de uma entidade e as transições entre eles. Use sempre que uma entidade muda de status ao longo do tempo — pedido, contrato, ticket, solicitação.

🔄
Quando criar obrigatoriamente: sempre que o módulo tiver um campo "status" com múltiplos valores. O diagrama de estado documenta todas as transições possíveis e evita que o DEV invente transições não mapeadas.
Exemplo 3 — Ciclo de vida do pedido de venda
Renderizando diagrama…
stateDiagram-v2
  [*] --> Rascunho : Vendedor inicia pedido

  Rascunho --> AguardandoAprovacao : Valor >= R$10.000
  Rascunho --> AprovadoAutomatico  : Valor < R$10.000
  Rascunho --> Cancelado           : Vendedor cancela

  AguardandoAprovacao --> Aprovado         : Gestor aprova
  AguardandoAprovacao --> Reprovado        : Gestor reprova
  AguardandoAprovacao --> AjusteSolicitado : Gestor pede ajuste
  AguardandoAprovacao --> Cancelado        : Vendedor cancela

  AjusteSolicitado --> AguardandoAprovacao : Vendedor corrige e resubmete
  AjusteSolicitado --> Cancelado           : Vendedor cancela

  AprovadoAutomatico --> EmSeparacao : Separação iniciada pelo estoque
  Aprovado           --> EmSeparacao : Liberado após aprovação

  EmSeparacao --> Concluido : Separação finalizada e entregue
  EmSeparacao --> Cancelado : Cancelamento aprovado

  Reprovado --> [*]
  Concluido --> [*]
  Cancelado --> [*]
Entidade: Pedido de Venda — todos os estados possíveis e quem aciona cada transição. stateDiagram-v2
[*] → estado inicial / final
Estado intermediário
Transição com evento/condição

Tabela de transições — sempre inclua junto com o diagrama

Estado origemEvento / CondiçãoEstado destinoQuem aciona
RascunhoValor < R$10.000 e confirmaAprovado automaticamenteVendedor
RascunhoValor ≥ R$10.000 e confirmaAguardando aprovaçãoVendedor
Aguardando aprovaçãoGestor aprovaAprovadoGestor
Aguardando aprovaçãoGestor reprova com motivoReprovadoGestor
Aguardando aprovaçãoGestor solicita ajusteAjuste solicitadoGestor
Ajuste solicitadoVendedor corrige e resubmeteAguardando aprovaçãoVendedor
Aprovado / Aprov. auto.Estoque inicia separaçãoEm separaçãoSistema / Estoque
Em separaçãoSeparação concluídaConcluídoSistema
Qualquer (exceto Concluído)Cancelamento aprovadoCanceladoVendedor / Gestor

Editor ao vivo — teste seus próprios diagramas

Cole qualquer código Mermaid abaixo e visualize o diagrama instantaneamente. Use para validar diagramas gerados pela IA antes de incluir na documentação.

Editor ao vivo
Código Mermaid
Visualização
Aguardando…

Prompts prontos

P-FLX-01Gerar diagrama de sequência Mermaid
Quando usar: Documentar integração ou fluxo com troca de mensagens entre sistemas.
Você é analista de negócio. Gere um diagrama de sequência Mermaid. Nome do fluxo: [NOME] Participantes: [ator humano, front, back, APIs, banco, serviços] Descrição do fluxo: [PASSO A PASSO] Casos especiais: [CONDICIONAIS, ERROS, FLUXOS ALTERNATIVOS] Requisitos: - Use `actor` para humanos, `participant` para sistemas - Setas sólidas para chamadas, tracejadas para respostas - Blocos alt/else para condicionais, opt para opcionais - Nomeie cada seta com a ação ou dado trafegado - Inclua fluxos de erro e exceção Após o código, explique em texto o que cada bloco representa.
P-FLX-02Gerar diagrama de estado de entidade
Quando usar: Documentar o ciclo de vida de um pedido, contrato, ticket ou qualquer entidade com campo "status".
Você é analista de negócio. Gere um diagrama de estados Mermaid (stateDiagram-v2). Entidade: [NOME — ex: Pedido de Venda] Contexto: [DESCREVA O SISTEMA] Estados conhecidos: [LISTE OS ESTADOS] Transições conhecidas: [O QUE CAUSA A MUDANÇA DE ESTADO] Gere: 1. Diagrama stateDiagram-v2 completo 2. Tabela de transições: Estado origem | Evento/Condição | Estado destino | Quem aciona 3. Estados finais claramente identificados 4. Transições incertas marcadas como [A VALIDAR]
P-FLX-03Converter fluxo de texto em flowchart com swimlanes
Quando usar: Você já tem o fluxo descrito em texto e quer o diagrama Mermaid pronto para renderizar.
Converta o fluxo abaixo em Mermaid (flowchart TD) com: - Formas corretas: ([Início/Fim]), [Atividade], {Decisão?} - Swimlanes com subgraph por ator - Rótulos nas setas de decisão: |Sim| e |Não| - Mostre os caminhos de exceção, não só o caminho feliz [COLE O FLUXO EM TEXTO AQUI] Após o código Mermaid, gere também a tabela de transições do diagrama.

Onde renderizar os diagramas

FerramentaComo usar
Esta página 🎉Editor ao vivo acima — cole o código e visualize instantaneamente
mermaid.liveEditor online em mermaid.live — sem instalar nada, compartilhável por link
GitHub / GitLabBloco de código com linguagem "mermaid" renderiza automaticamente no Markdown
NotionBloco de código com linguagem "mermaid" — nativo no editor
VS CodeExtensão "Mermaid Preview" — visualiza enquanto edita o arquivo
draw.ioImporta Mermaid pelo menu Extras → Edit Diagram — edita graficamente depois
ConfluencePlugin "Mermaid Diagrams" — verificar instalação com a equipe de TI