Editor de diagrama de sequência Mermaid

Como usar o editor de diagrama de sequência Mermaid

1. 1. Escreva sintaxe Mermaid no editor

   Abra o painel do editor e digite a notação sequenceDiagram do Mermaid. Defina participantes com setas como Alice->>Bob: Hello para descrever mensagens entre atores. O editor aceita sintaxe padrão de sequência Mermaid, incluindo blocos alt, loop, opt e activation.

2. 2. Revise a pré-visualização ao vivo

   Enquanto digita, o painel de pré-visualização renderiza um diagrama SVG em tempo real. Erros de sintaxe aparecem inline para você corrigir antes de compartilhar. Troque temas do diagrama na barra de pré-visualização para combinar com seu estilo de documentação.

3. 3. Organize vários diagramas localmente

   Crie, renomeie e alterne entre diagramas armazenados no navegador. Cada diagrama mantém sua própria fonte e tema para você rascunhar vários fluxos sem login ou upload para servidor.

4. 4. Exporte ou copie o resultado

   Quando o diagrama estiver correto, exporte como SVG, PNG ou PDF pelo menu Exportar. Você também pode copiar a notação para README, wikis ou descrições de pull request.

Casos de uso comuns

• Documentação de API e microsserviços

  Documente fluxos de request e response entre clientes, gateways e serviços backend. Diagramas de sequência facilitam o onboarding de novos engenheiros entenderem como endpoints interagem.

• Design reviews e discussões de arquitetura

  Esboce fluxos de autenticação, repasses de pagamento ou lógica de retry antes de codar. Um diagrama rápido ajuda times a alinhar ordem, caminhos de falha e ownership entre serviços.

• Post-mortems de incidentes

  Reconstrua o que aconteceu em uma indisponibilidade mapeando mensagens entre sistemas. Linhas do tempo visuais esclarecem timeouts, chamadas duplicadas ou acks ausentes.

• Pull requests e RFCs

  Anexe um diagrama de sequência para explicar uma mudança não trivial. Revisores entendem impacto entre serviços mais rápido quando ordem de mensagens e ramificações opcionais estão visíveis.

• Ensino e workshops

  Demonstre padrões de mensageria como request-reply, publish-subscribe ou orquestração saga. Alunos editam sintaxe ao vivo e veem na hora como a notação altera o diagrama renderizado.

Perguntas frequentes

Meu diagrama é enviado a um servidor?

Não. Fonte e renderização da pré-visualização rodam inteiramente no navegador. Sua notação fica no dispositivo, salvo se você exportar ou copiar para outro lugar.

Quais tipos de diagrama Mermaid são suportados aqui?

Este editor foca em diagramas de sequência e sintaxe Mermaid relacionada a fluxos de sequência. Para fluxogramas, máquinas de estado e diagramas de classe, veja a página Modelos e abra um inicial no editor.

Posso compartilhar um diagrama com um colega?

Exporte SVG ou PNG e anexe à documentação, ou copie o source Mermaid para o repositório. Diagramas ficam localmente no navegador, não como links compartilháveis na nuvem.

Por que a pré-visualização mostra erro de sintaxe?

O Mermaid exige palavras-chave, nomes de participantes e blocos de fragmento válidos, como alt/end. Veja o painel de erro para dicas de linha e compare sua sintaxe com um modelo da página Modelos.