{"id":2110,"date":"2026-05-26T08:05:43","date_gmt":"2026-05-26T08:05:43","guid":{"rendered":"https:\/\/www.vpascode.com\/pt\/docs\/uncategorized\/mermaid-js-sequence-diagram-syntax-guide\/"},"modified":"2026-05-26T08:05:43","modified_gmt":"2026-05-26T08:05:43","slug":"mermaid-js-sequence-diagram-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-sequence-diagram-syntax-guide\/","title":{"rendered":"Guia de Sintaxe de Diagrama de Sequ\u00eancia do Mermaid.js"},"content":{"rendered":"

O que \u00e9 um Diagrama de Sequ\u00eancia?<\/h2>\n

Um Diagrama de Sequ\u00eancia<\/strong> \u00e9 um diagrama comportamental essencial diagrama UML<\/strong> projetado para visualizar o fluxo cronol\u00f3gico de mensagens, chamadas de fun\u00e7\u00f5es e cargas \u00fateis de dados entre entidades do sistema diferentes ao longo de uma linha do tempo linear. Reconhecido como um tipo central tipo de diagrama UML<\/strong>, ele mapeia as intera\u00e7\u00f5es em tempo de execu\u00e7\u00e3o empilhando os componentes do sistema ao longo do eixo X como linhas de vida verticais e rastreando as trocas de mensagens ao longo do eixo Y. Este modelo \u00e9 inestim\u00e1vel para desenvolvedores depurando trocas de m\u00e3o de API distribu\u00eddas, caminhos de orquestra\u00e7\u00e3o de microsservi\u00e7os ou fluxos de autentica\u00e7\u00e3o de usu\u00e1rio em tempo real.<\/p>\n

Com Mermaid.js<\/strong>, voc\u00ea pode criar processos temporais complexos usando uma estrutura de texto intuitiva. O motor gerencia automaticamente o espa\u00e7amento vertical, controla os alinhamentos das setas de mensagem e desenha blocos de ativa\u00e7\u00e3o em tempo de execu\u00e7\u00e3o de forma limpa em toda a sua tela.<\/p>\n

Guia de Sintaxe B\u00e1sica: Elementos e Constru\u00e7\u00f5es<\/h2>\n

Para criar um diagrama de sequ\u00eancia UML preciso e altamente leg\u00edvel no Mermaid, voc\u00ea deve dominar as declara\u00e7\u00f5es de participantes, variantes de setas de mensagem, linhas de vida expl\u00edcitas e estruturas de blocos condicionais.<\/p>\n

1. Declarando Participantes e Atores<\/h3>\n

Voc\u00ea declara uma entidade padr\u00e3o do sistema usando a participante<\/code>palavra-chave. Se a entidade representa um usu\u00e1rio final humano ou um operador externo, use a ator<\/code>palavra-chave para renderizar um \u00edcone padr\u00e3o de figura de palito na tela:<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid no VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
sequenceDiagram\r\n    ator Cliente\r\n    participante API como Gateway Router<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Dica Profissional:<\/em> Use a como<\/code>palavra-chave para mapear nomes longos de componentes para aliases internos compactos, mantendo seus scripts de mensagens concisos e leg\u00edveis.<\/p>\n
2. Formata\u00e7\u00e3o de Setas de Mensagem<\/h3>\n
O tipo de linha e ponta de seta que voc\u00ea usa determina o estilo de comunica\u00e7\u00e3o entre seus participantes do sistema:<\/p>\n