Como usar o editor de diagrama de sequência Mermaid

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. 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. 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. 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.

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.