{"id":2082,"date":"2026-07-08T05:51:38","date_gmt":"2026-07-08T05:51:38","guid":{"rendered":"https:\/\/www.vpascode.com\/pt\/docs\/uncategorized\/mermaid-js-architecture-diagram-syntax-layout-guide\/"},"modified":"2026-07-08T05:51:38","modified_gmt":"2026-07-08T05:51:38","slug":"mermaid-js-architecture-diagram-syntax-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-architecture-diagram-syntax-layout-guide","title":{"rendered":"Guia de Sintaxe e Layout do Diagrama de Arquitetura Mermaid.js"},"content":{"rendered":"

Um diagrama de arquitetura fornece um plano estruturado usado por arquitetos de sistemas e equipes DevOps para visualizar configura\u00e7\u00f5es de infraestrutura, microservi\u00e7os em nuvem e configura\u00e7\u00f5es de layout estrutural. Constru\u00eddo sobre o arquitetura-beta<\/code>motor, esta ferramenta baseada em texto substitui utilit\u00e1rios de arrastar manual por agrupamentos autom\u00e1ticos de grupos de servi\u00e7os estruturais, clusters de banco de dados, gateways e caminhos de borda em layouts de sistema limpos e previs\u00edveis.<\/p>\n

Estrutura B\u00e1sica de Sintaxe<\/h2>\n

Todo diagrama come\u00e7a com o arquitetura-beta<\/code>cabe\u00e7alho de declara\u00e7\u00e3o. Voc\u00ea preenche a tela definindo elementos individuais de n\u00f3 usando a servi\u00e7o<\/code>palavra-chave, e mapeia trilhas de conex\u00e3o especificando portas de coordenadas direcionais exatas (T<\/strong>op, B<\/strong>ottom, L<\/strong>eft, R<\/strong>ight) separadas por dois pontos e tra\u00e7os duplos.<\/p>\n

\n
\nMermaid<\/span>\n\n<\/path><\/path><\/svg>\nEdite o 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 
arquitetura-beta\r\n  servi\u00e7o gateway(internet)[R\u00f3tulo do Gateway]\r\n  servi\u00e7o servidor(servidor)[Servidor de Aplica\u00e7\u00e3o]\r\n  \r\n  gateway:B -- T:server<\/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             <\/div>\n
\n\n<\/path><\/path><\/svg>\nEdite o Mermaid no VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Refer\u00eancia de Sintaxe<\/h2>\n
A tabela abaixo detalha os principais componentes de dados, palavras-chave de formata\u00e7\u00e3o e atributos de conectores usados para construir um mapa de espa\u00e7o de trabalho de arquitetura no Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n\n
Componente de Sintaxe<\/th>\nRequisito de Tipo<\/th>\nDescri\u00e7\u00e3o e Regras de Uso<\/th>\n<\/tr>\n<\/thead>\n
Declara\u00e7\u00e3o<\/strong><\/td>\nIdentificador de Palavra-Chave<\/td>\nInicializa a tela do espa\u00e7o de trabalho de mapeamento de infraestrutura. Deve usar exatamente o arquitetura-beta<\/code> bloco.<\/td>\n<\/tr>\n
N\u00f3 de Servi\u00e7o<\/strong><\/td>\nPalavra-chave + Bloco de Identidade<\/td>\nDeclara uma entidade arquitet\u00f4nica. Usa a sintaxe: servi\u00e7o id(\u00edcone)[R\u00f3tulo de Exibi\u00e7\u00e3o]<\/code>.<\/td>\n<\/tr>\n
Envolt\u00f3rio de Grupo<\/strong><\/td>\nPalavra-chave de Container<\/td>\nAgrupa servi\u00e7os relacionados dentro de um container visual. Usa a sintaxe: grupo id(\u00edcone)[R\u00f3tulo do Grupo]<\/code>.<\/td>\n<\/tr>\n
Palavra-chave Em<\/strong><\/td>\nModificador de Atribui\u00e7\u00e3o<\/td>\nAtribui explicitamente um n\u00f3 de servi\u00e7o para residir dentro de um envolt\u00f3rio de grupo declarado especificamente: servi\u00e7o id(\u00edcone)[R\u00f3tulo] em groupId<\/code>.<\/td>\n<\/tr>\n
N\u00f3 de Jun\u00e7\u00e3o<\/strong><\/td>\nIdentificador de Palavra-chave<\/td>\nEstabelece um ponto central de alinhamento estrutural usado para rotear com precis\u00e3o caminhos de liga\u00e7\u00e3o complexos e multidirecionais: jun\u00e7\u00e3o id<\/code>.<\/td>\n<\/tr>\n
Arestas de Conex\u00e3o<\/strong><\/td>\nOperadores de Dire\u00e7\u00e3o de Porta<\/td>\nConfigura caminhos de rastreamento direcional prendendo a liga\u00e7\u00e3o a lados espec\u00edficos do n\u00f3 (T, B, L, R): fonte:lado -- lado:alvo<\/code>. Suporta pontas de seta direcionais (--><\/code>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
Agrupamento Avan\u00e7ado e Roteamento de Arestas de Porta<\/h2>\n
Para controlar exatamente como os links viajam entre os elementos sem parecer bagun\u00e7ado, o motor de arquitetura exige vincula\u00e7\u00f5es de portas expl\u00edcitas. N\u00f3s relacionados podem ser organizados dentro de grupos estruturais para esclarecer os limites do sistema.<\/p>\n
1. Regras Exatas de Vincula\u00e7\u00e3o de Portas<\/h3>\n
Voc\u00ea define onde uma linha de conex\u00e3o sai e entra em um componente acrescentando dois pontos e uma bandeira de dire\u00e7\u00e3o de aresta (“T<\/code>, B<\/code>, L<\/code>, R<\/code>) aos identificadores de n\u00f3 respectivos:<\/p>\n