{"id":2078,"date":"2026-07-08T06:48:07","date_gmt":"2026-07-08T06:48:07","guid":{"rendered":"https:\/\/www.vpascode.com\/pt\/docs\/uncategorized\/mermaid-js-c4-diagram-syntax-architecture-guide\/"},"modified":"2026-07-08T06:48:07","modified_gmt":"2026-07-08T06:48:07","slug":"mermaid-js-c4-diagram-syntax-architecture-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide","title":{"rendered":"Sintaxe de Diagrama C4 do Mermaid.js e Guia de Arquitetura"},"content":{"rendered":"<p>Um Diagrama C4 \u00e9 um m\u00e9todo padronizado de visualiza\u00e7\u00e3o arquitet\u00f4nica projetado para modelar sistemas de software em m\u00faltiplos n\u00edveis de abstra\u00e7\u00e3o estrutural. Integrado nativamente ao Mermaid.js, o <code>c4<\/code>motor segue os quatro n\u00edveis principais do modelo C4: <strong>Contexto<\/strong> (o ecossistema macro), <strong>Cont\u00eaineres<\/strong> (aplica\u00e7\u00f5es, servi\u00e7os e bancos de dados), <strong>Componentes<\/strong> (m\u00f3dulos estruturais internos), e <strong>intera\u00e7\u00f5es din\u00e2micas<\/strong>. Esta ferramenta elimina a complica\u00e7\u00e3o da estiliza\u00e7\u00e3o personalizada com CSS, aplicando blocos arquitet\u00f4nicos consistentes e prontos para apresenta\u00e7\u00e3o com base nas suas declara\u00e7\u00f5es de texto.<\/p>\n<h2>Compreendendo as Abstra\u00e7\u00f5es e Palavras-Chave do Diagrama C4<\/h2>\n<p>O Mermaid suporta quatro cabe\u00e7alhos especializados de inicializa\u00e7\u00e3o de diagramas, dependendo do n\u00edvel de detalhe que sua disposi\u00e7\u00e3o do sistema exige:<\/p>\n<ul>\n<li><code>C4Contexto<\/code>: Foca na vis\u00e3o de conjunto, exibindo usu\u00e1rios, ecossistemas de software principais e depend\u00eancias externas de alto n\u00edvel.<\/li>\n<li><code>C4Cont\u00eainer<\/code>: Amplia um n\u00edvel para decompor aplica\u00e7\u00f5es aut\u00f4nomas, interfaces de front-end, microservi\u00e7os, sistemas de armazenamento de banco de dados e filas.<\/li>\n<li><code>C4Componente<\/code>: Aprofunda-se dentro de um cont\u00eainer para mostrar m\u00f3dulos de n\u00edvel de c\u00f3digo interno, como Controladores, Servi\u00e7os e Reposit\u00f3rios.<\/li>\n<li><code>C4Din\u00e2mico<\/code>: Foca em rastrear intera\u00e7\u00f5es de dados em tempo de execu\u00e7\u00e3o ou sequenciamento passo a passo de transa\u00e7\u00f5es entre blocos de infraestrutura.<\/li>\n<\/ul>\n<h2>Estrutura B\u00e1sica de Sintaxe<\/h2>\n<p>Todo diagrama C4 come\u00e7a com seu cabe\u00e7alho de n\u00edvel espec\u00edfico, seguido por uma declara\u00e7\u00e3o opcional de t\u00edtulo e componentes macro separados por v\u00edrgulas. Os par\u00e2metros ficam dentro de par\u00eanteses, com strings delimitadas por aspas duplas.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpljr0KwkAQhHvBdxiuiiBWvoCm0U5MrCWGjR6et+F2Y\/TtvfyJYLkzs99Muk7ZK710PgPUqiOY7C1KD4wGtq6hOlivqDhgH8XgSaMdyHRfBwrCPikbUX5QWMJsC3+3\/op0lEzUNpgC4Ap6I1xiCq3VG+qeUDgUZcmNV1mZRUcehiSXAXeW\/oys74apaAj2Nc5xK98ugTKeltoJDesrHvFHcj+r\/1pOQtIhd3l+yMziAwImZes=\" rel=\"noopener noreferrer\" target=\"_blank\">\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\n<span>Edite o Mermaid no VPasCode<\/span>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj7FOAzEMhnck3uFXplZCTH0CboEFnWg7I3M1UqQkLnEOVbwNExNjl655MZzeVTAw2fJvfZ\/drTpJhQ\/l+goo9buMQeD6QEmwY8yh9YK118KRsKdMEDzW0xDYEsKDLeXExTVIz6pCiyF4tvENXDd1uKM01M\/sxdlwGzFvNPSLRYJBbGhCUuzPEK+3btmYs3qhU31u+2QkA12u2k0CQfpzj+U95+jN8jYyRC9SxbvXkYL\/4AifXiVHql\/1aIH9cz5iVj9x+P3lH\/+2eKNQU91vNv3aLX8AHat2hQ==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">C4Context\r\n  t\u00edtulo \"Plano de Contexto do Sistema para o N\u00facleo da Internet\"\r\n  Pessoa(cliente, \"Cliente Banc\u00e1rio\", \"Um cliente do banco com contas pessoais.\")\r\n  Sistema(sistema_bancario, \"Sistema de Banco na Internet\", \"Permite que os clientes visualizem informa\u00e7\u00f5es da conta.\")\r\n  Rel(cliente, sistema_bancario, \"Utiliza\", \"HTTPS\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj7FOAzEMhnck3uFXplZCTH0CboEFnWg7I3M1UqQkLnEOVbwNExNjl655MZzeVTAw2fJvfZ\/drTpJhQ\/l+goo9buMQeD6QEmwY8yh9YK118KRsKdMEDzW0xDYEsKDLeXExTVIz6pCiyF4tvENXDd1uKM01M\/sxdlwGzFvNPSLRYJBbGhCUuzPEK+3btmYs3qhU31u+2QkA12u2k0CQfpzj+U95+jN8jYyRC9SxbvXkYL\/4AifXiVHql\/1aIH9cz5iVj9x+P3lH\/+2eKNQU91vNv3aLX8AHat2hQ==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n             <\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpljr0KwkAQhHvBdxiuiiBWvoCm0U5MrCWGjR6et+F2Y\/TtvfyJYLkzs99Muk7ZK710PgPUqiOY7C1KD4wGtq6hOlivqDhgH8XgSaMdyHRfBwrCPikbUX5QWMJsC3+3\/op0lEzUNpgC4Ap6I1xiCq3VG+qeUDgUZcmNV1mZRUcehiSXAXeW\/oys74apaAj2Nc5xK98ugTKeltoJDesrHvFHcj+r\/1pOQtIhd3l+yMziAwImZes=\" rel=\"noopener noreferrer\" target=\"_blank\">\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\n<span>Edite o Mermaid no VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"eQIcfSE\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-981\" decoding=\"async\" fetchpriority=\"high\" height=\"486\" sizes=\"(max-width: 1002px) 100vw, 1002px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png 1002w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c-300x146.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c-768x373.png 768w\" width=\"1002\"\/><\/p>\n<h2>A Taxonomia Completa dos Macros do Elemento C4<\/h2>\n<p>A biblioteca C4 do Mermaid fornece um conjunto extenso de macros especializadas para distinguir claramente entre componentes internos, sistemas externos e camadas de banco de dados em todos os n\u00edveis de abstra\u00e7\u00e3o.<\/p>\n<h3>1. Macros de Pessoa e Usu\u00e1rio<\/h3>\n<ul>\n<li><code>Pessoa(alias, r\u00f3tulo, [descr], [sprite], [tags])<\/code>: Modela um usu\u00e1rio humano interno ou interessado.<\/li>\n<li><code>Pessoa_Ext(alias, r\u00f3tulo, [descr], [sprite], [tags])<\/code>: Modela um usu\u00e1rio externo (por exemplo, um fornecedor terceirizado ou auditor) fora dos limites organizacionais principais.<\/li>\n<\/ul>\n<h3>2. Macros de Sistema e Ecossistema de Software<\/h3>\n<ul>\n<li><code>Sistema(alias, r\u00f3tulo, [descr], [sprite], [tags])<\/code>: Representa um cluster de sistemas de software interno, dentro do escopo, sob sua gest\u00e3o direta.<\/li>\n<li><code>Sistema_Ext(alias, r\u00f3tulo, [descr], [sprite], [tags])<\/code>: Modela um sistema de software externo essencial gerenciado por terceiros (por exemplo, provedores de identidade, registros principais de bancos).<\/li>\n<li><code>SistemaDb(alias, r\u00f3tulo, [descr], [sprite], [tags])<\/code>: Representa uma caixa de reposit\u00f3rio de dados em n\u00edvel de sistema com formato cil\u00edndrico.<\/li>\n<li><code>SistemaDb_Ext(alias, r\u00f3tulo, [descr], [sprite], [tags])<\/code>: Representa uma camada de banco de dados externa, de terceiros.<\/li>\n<\/ul>\n<h3>3. Macros da Camada de Container (N\u00edvel C4Container)<\/h3>\n<ul>\n<li><code>Container(alias, r\u00f3tulo, tecnologia, [descr], [sprite], [tags])<\/code>: Modela uma aplica\u00e7\u00e3o execut\u00e1vel separada, servidor de API ou interface de front-end.<\/li>\n<li><code>ContainerDb(alias, r\u00f3tulo, tecnologia, [descr], [sprite], [tags])<\/code>: Representa um inv\u00f3lucro de motor de banco de dados relacional ou n\u00e3o relacional em n\u00edvel de container.<\/li>\n<li><code>Container_Ext(alias, r\u00f3tulo, tecnologia, [descr], [sprite], [tags])<\/code>: Representa um cont\u00eainer em nuvem externo ou servi\u00e7o de aplica\u00e7\u00e3o.<\/li>\n<li><code>ContainerDb_Ext(alias, r\u00f3tulo, tecnologia, [descr], [sprite], [tags])<\/code>: Representa uma camada de armazenamento de banco de dados em nuvem externa e gerenciada.<\/li>\n<\/ul>\n<h3>4. Macros da Camada de Componente (N\u00edvel C4Component)<\/h3>\n<ul>\n<li><code>Componente(alias, r\u00f3tulo, tecnologia, [descr], [sprite], [tags])<\/code>: Mapeia um m\u00f3dulo, camada ou controlador de classe em n\u00edvel de c\u00f3digo interno.<\/li>\n<li><code>ComponenteDb(alias, r\u00f3tulo, tecnologia, [descr], [sprite], [tags])<\/code>: Modela um sistema de armazenamento de microcomponentes interno ou um sistema de cache de arquivos de baixo n\u00edvel.<\/li>\n<\/ul>\n<hr \/>\n<h2>Cont\u00eaineres de Fronteira e Envolt\u00f3rios Estruturais<\/h2>\n<p>Para indicar perimeters de seguran\u00e7a, firewalls corporativos ou fronteiras l\u00f3gicas de aplica\u00e7\u00e3o, o Mermaid fornece tr\u00eas envolt\u00f3rios de cont\u00eainer com colchetes dedicados. Os elementos aninhados dentro s\u00e3o agrupados visualmente.<\/p>\n<ul>\n<li><code>Enterprise_Boundary(alias, label) { ... }<\/code>: Envolve sistemas de alto n\u00edvel dentro de uma ampla fronteira visual que representa o per\u00edmetro geral da infraestrutura corporativa ou da empresa.<\/li>\n<li><code>System_Boundary(alias, label) { ... }<\/code>: Agrupa cont\u00eaineres de aplicativos ou microservi\u00e7os estreitamente relacionados dentro de uma caixa unificada de ecossistema de software.<\/li>\n<li><code>Container_Boundary(alias, label) { ... }<\/code>: Isola componentes de n\u00edvel de c\u00f3digo dentro de uma \u00fanica camada de contexto de m\u00f3dulo de aplicativo.<\/li>\n<\/ul>\n<hr \/>\n<h2>Operadores Direcionais de Relacionamento Avan\u00e7ados<\/h2>\n<p>Conectar blocos em diagramas C4 depende do <code>Rel<\/code>macro ou suas varia\u00e7\u00f5es explicitamente direcionadas. Em vez de passar linhas de fluxograma brutas, voc\u00ea rastreia conex\u00f5es semanticamente declarando vetores de tecnologia diretamente dentro dos blocos l\u00f3gicos.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Token de Sintaxe de Relacionamento<\/th>\n<th>Dire\u00e7\u00e3o da Setas Visual<\/th>\n<th>Contexto de Alinhamento de Uso<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>Rel(from, to, label, [tech])<\/code><\/td>\n<td>Din\u00e2mico \/ Automatizado<\/td>\n<td>Relacionamento padr\u00e3o. Deixe o algoritmo de layout determinar o melhor caminho da linha.<\/td>\n<\/tr>\n<tr>\n<td><code>BiRel(from, to, label, [tech])<\/code><\/td>\n<td>Bidirecional (&lt;\u2013&gt;)<\/td>\n<td>Indica trocas interativas de duas vias, protocolos duplex ou processos de sincroniza\u00e7\u00e3o.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Back(from, to, label, [tech])<\/code><\/td>\n<td>Seta Reversa no Topo (&lt;\u2013)<\/td>\n<td>Desenha a rela\u00e7\u00e3o na dire\u00e7\u00e3o l\u00f3gica do c\u00f3digo, mas inverte a seta visual vis\u00edvel para tr\u00e1s.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Neighbor(from, to, label, [tech])<\/code><\/td>\n<td>Prefer\u00eancia de Layout Horizontal<\/td>\n<td>For\u00e7a o n\u00f3 de destino a permanecer diretamente ao lado do n\u00f3 de origem na mesma linha horizontal.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Down(from, to, label, [tech])<\/code> \/ <code>Rel_D(...)<\/code><\/td>\n<td>Diretamente para Baixo (v)<\/td>\n<td>For\u00e7a fluxos de dados verticais para baixo at\u00e9 camadas de banco de dados ou processos de fundo subsequentes.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Up(from, to, label, [tech])<\/code> \/ <code>Rel_U(...)<\/code><\/td>\n<td>Para Cima Reto (^)<\/td>\n<td>For\u00e7a os rastros de relacionamento a viajar diretamente para cima at\u00e9 os componentes da interface do cliente.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Esq(from, to, label, [tech])<\/code> \/ <code>Rel_E(...)<\/code><\/td>\n<td>Para a Esquerda Reto (&lt;-)<\/td>\n<td>Direciona os caminhos horizontalmente para o lado esquerdo do elemento da tela.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Dir(from, to, label, [tech])<\/code> \/ <code>Rel_D(...)<\/code><\/td>\n<td>Para a Direita Reto (-&gt;)<\/td>\n<td>Direciona os caminhos horizontalmente para o lado direito do elemento da tela.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h2>Estilo Din\u00e2mico Personalizado e Marca\u00e7\u00e3o (Substitui\u00e7\u00e3o de Formas C4)<\/h2>\n<p>Para sinalizar aplica\u00e7\u00f5es legadas, destacar sistemas premium ou destacar fluxos de dados seguros, voc\u00ea pode criar estilos personalizados usando o motor de marca\u00e7\u00e3o de elementos. Voc\u00ea define uma matriz de propriedades de marca\u00e7\u00e3o no topo do seu documento e depois acrescenta essa etiqueta \u00e0s defini\u00e7\u00f5es dos seus elementos.<\/p>\n<h3>Palavras-chave para Modifica\u00e7\u00e3o de Estilo:<\/h3>\n<ul>\n<li><code>AtualizarEstiloElemento(elementName, corFundo, corFonte, [corBorda], [sombreamento])<\/code>: Substitui\u00e7\u00e3o direta da paleta de fundo padr\u00e3o de uma caixa de elemento expl\u00edcita.<\/li>\n<li><code>AtualizarEstiloRel(from, to, corLinha, corTexto)<\/code>: Direciona explicitamente uma rota de conex\u00e3o para recolorir caminhos de linha ou descri\u00e7\u00f5es de conex\u00e3o.<\/li>\n<\/ul>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj1FLw0AMx98Fv0NoGShMEdeCe9ROfHEwGD6Pa5p1B9e7kkut9dN7d5ugY4FA7pL8\/vlXReWs0JdcXwGIFkOQVYMX10HljOO7yjXUwJtxtTLwzHjQQigDE6xVn8WtmNvJC3U3hlqF0071eg7Ze3rAizZG2zbgmLLwvWGH5D158EPtkXUv2llgsjQq4++z2z\/ALqiz3fWORZn572nEsFL+UDvFDWxSL5LXaRgGH\/oj1fCpaQSyrbZ0osaczWClOXgAjAYBE1J\/q3iGjxMffaOEXg11ZGUrk6H\/xvJmWS6KfZTM9ylSicvFwyMehS4gzq3kJdZPJZ5TClRUBMoPnuOEdw==\" rel=\"noopener noreferrer\" target=\"_blank\">\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\n<span>Editar Mermaid no VPasCode<\/span>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1kM9KAzEQxu+C7zBsKSiIiN2CPZalerFS8AHKNJmVQDazJrP1z9uIB08evXjdFzPJCq0FAwND+PL7vi9VWbETepbjIwDpP6WzDMUSWwRNMPePnRGSziPcWN6gBcUNVKxNbRT2H\/07Q8s+3nhYkQ\/s0JpX1FgkXpp7E4QaPLH0gOplja05g+Ku\/1aWOFlcY6I35IThNmo0F1Gw8qwoBARPjrfJ6ItCkmMIxuUn58XpPr9hTd6tYxhBmwh5Ac2wQuMob5U10YeSwZIlRh4e5RxbE7qcfSj1RBtoMdbuQte\/ecPh1y\/NeLxfdhdORaQ2ngRDks1lIPpFEGN5YSnX\/PsVIz2bTso6ZRrV+eRVzSYXl2qw\/I9zWHk0VZurqTpElQqpjKgfWeWp3w==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">C4Context\r\n  t\u00edtulo \"Mapa de Arquitetura Global com Codifica\u00e7\u00e3o por Cor Personalizada\"\r\n  \r\n  Sistema(legacy_api, \"N\u00facleo de Faturamento Legado\", \"Processa renova\u00e7\u00f5es de assinatura.\")\r\n  Sistema(modern_portal, \"Portal do Painel do Cliente\", \"Motor moderno de visualiza\u00e7\u00e3o web para usu\u00e1rios.\")\r\n  \r\n  %% Personaliza\u00e7\u00f5es de cor diretas\r\n  AtualizarEstiloElemento(legacy_api, \"#d9534f\", \"#ffffff\", \"#c9302c\")\r\n  AtualizarEstiloElemento(modern_portal, \"#5cb85c\", \"#ffffff\", \"#4cae4c\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1kM9KAzEQxu+C7zBsKSiIiN2CPZalerFS8AHKNJmVQDazJrP1z9uIB08evXjdFzPJCq0FAwND+PL7vi9VWbETepbjIwDpP6WzDMUSWwRNMPePnRGSziPcWN6gBcUNVKxNbRT2H\/07Q8s+3nhYkQ\/s0JpX1FgkXpp7E4QaPLH0gOplja05g+Ku\/1aWOFlcY6I35IThNmo0F1Gw8qwoBARPjrfJ6ItCkmMIxuUn58XpPr9hTd6tYxhBmwh5Ac2wQuMob5U10YeSwZIlRh4e5RxbE7qcfSj1RBtoMdbuQte\/ecPh1y\/NeLxfdhdORaQ2ngRDks1lIPpFEGN5YSnX\/PsVIz2bTso6ZRrV+eRVzSYXl2qw\/I9zWHk0VZurqTpElQqpjKgfWeWp3w==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n             <\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj1FLw0AMx98Fv0NoGShMEdeCe9ROfHEwGD6Pa5p1B9e7kkut9dN7d5ugY4FA7pL8\/vlXReWs0JdcXwGIFkOQVYMX10HljOO7yjXUwJtxtTLwzHjQQigDE6xVn8WtmNvJC3U3hlqF0071eg7Ze3rAizZG2zbgmLLwvWGH5D158EPtkXUv2llgsjQq4++z2z\/ALqiz3fWORZn572nEsFL+UDvFDWxSL5LXaRgGH\/oj1fCpaQSyrbZ0osaczWClOXgAjAYBE1J\/q3iGjxMffaOEXg11ZGUrk6H\/xvJmWS6KfZTM9ylSicvFwyMehS4gzq3kJdZPJZ5TClRUBMoPnuOEdw==\" rel=\"noopener noreferrer\" target=\"_blank\">\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\n<span>Editar Mermaid no VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"dwmLoBg\"><img alt=\"\" class=\"alignnone size-full wp-image-982\" decoding=\"async\" height=\"438\" sizes=\"(max-width: 877px) 100vw, 877px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df388473d4.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df388473d4.png 877w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df388473d4-300x150.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df388473d4-768x384.png 768w\" width=\"877\"\/><\/p>\n<hr \/>\n<h2>Planta Real: Mapa de Cont\u00eainer de Fronteira do Sistema Empresarial de Com\u00e9rcio Eletr\u00f4nico<\/h2>\n<p>Esta planta abrangente e em m\u00faltiplos n\u00edveis rastreia um ecossistema de com\u00e9rcio eletr\u00f4nico online. Isola servidores centrais internos usando um <code>Cont\u00eainer_Sistema<\/code> cont\u00eainer de bloco, implementa retransmiss\u00f5es de notifica\u00e7\u00e3o externas na nuvem por meio de <code>System_Ext<\/code>, mapeia armazenamentos internos de bancos de dados relacionais junto com microservi\u00e7os externos de rastreamento e fixa pipelines de comunica\u00e7\u00e3o usando par\u00e2metros expl\u00edcitos da stack tecnol\u00f3gica.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptU11v2zAMfB\/Q\/0AEKJACbfOyP5AmAdYia7M42B4DRWJsrYpkkHQ+Nuy\/j7LT1mj7ksg0dUfenSdfJymK8RHp4guAeAkIg9ca3IUGa\/JRYJsIZlGQ9JERZjeTtNshWYRFMKJvd4OLLxljgcQpDm3DkrThGgZPMSgYFFWqa6SBVu4oHRgZrBETUglecMdgogPjHENNyTVWGCSBVOgJnC+9tuoFktvBVeYpTqy31rOjDGtz2mGUdWkED+akBIWQrxHGi3sokPbeYqZdVZ7cTa0YJ7CEzksGdLA3TZCWXpktMvtYAsZSp27JenR3qYnO0GmI9rz\/mm2qUdF7kkwSYRbC71AVG1zB3wwB8CrscEt6xOjWpq7befVGW4NfuIFxXed5H\/Eot7\/5GpZorOTKFIPfq8DAYsRbMMwonXKV\/gTVtGH1LesEnDdJkc+C9elthfY5NbLmTh2FnpxL8N1bSvym2mNy2E4xO9akkLm26HRSOs6uZr1aykOi521Qc9uRrAm20XRom5jjxzGmm2Eih7R2mxyTfIQ5ulL\/ppqMjeF2gEViKQmLH\/PBi1QMldd8kVcKEDKRVSDdFXLSOnJG26gLocMj9YvcixT\/Ok8vL2FMttL0WWlIke5zwM9ICyMV564lhl6a3xn30+OhF9g2Q8GoNtBulu1QcfLc31arRTHqkk\/dGIq8nqZDfJeGT8wp9GVPaw18SMb1N2fYe5N5Hoqnx9FyVqxy+jueF66lLyv5xPueCfnrVWW5D63C5LjpTj6yd60nasboYXo3yWZGbNvedprj9jOaj5\/puJFKTfyTA5KeMepJU1MZKjGHJzAcvFQtX+fmal6MWiG75f4D4gqf5g==\" rel=\"noopener noreferrer\" target=\"_blank\">\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\n<span>Edite Mermaid no VPasCode<\/span>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9VNtO20AQfUfiH0aRkIKEyEt\/ICSWCuKSJlH7aE3WE2fB3jW76xCo+jGoD4hKPLX9Av9YZ9YhpG3apzjr8Zwz55zZwbuBNQG1Ibe\/BxCal1AXFjoXNiP+zQjkffNNCqBChzAqMODcuhIhKStHHp3Goq0sm2entIWkoOCaH0Yr29nfk8Yj8t5iVxWaTKAj6HBx5TCzDq5Mwd07fHaJS8oRKkb2oAMZD5kFhaF5LGxugQAzzf0N1zib1YHL0IKnmouc02bBjHWuAxbHnUOBndz7QGWarEI3x0B3eJ9WmGPJJCwDTsgtdfNkoT86hUlwuoo8TtCoOHvGBL08cPvQ\/KT22TXPmQ6xIJBTpB0XEZQ28DR8yNwUj9uiRCJbVE5sbTJ0913yylY2pVTZspQ2DDwi17yUrJ2FAX\/s\/qfrIXyWtgAbA7tYFZrV0kubzh2fpmQy7trfHMMnmknHc3uNUXBaheNrfwRjQhXkJGFU8SCW81SetQ8MJwPm5MgojSy49xs1NsJbqH3dPDpt1+JvU\/OitLKpWpC6sXVgqAutWLhXB2TO9bvIjPMXmSUryZiXs9FaV5gX9ar1hSWaYdGivzFhVjFdQlphoeoCQZeV9RyYv7kNZ92ZGJ5WlGn2ezsAw9cAjCnXXnzh51FbFylxz9zR5MO5\/OvzUjwQp5MDvcBXgsZj8xTlWnCL5rtjM4SZW7eMdQVlLC8rm9duQ\/JLm5yDAxhgKaPF0lNeICctv3Ju3W3NixJiJlCKx1S8bdk\/AvFR+xoL\/bC1RgRzfIC1AmwkmszKSO+n09Gk1y4mL2vLizHSob0z\/wjcDq8Ts+Tc\/CbGlkv8TrDOJleXvXEymco6tkgbNO2I13pHjP60jlfIs6wk0Y3mtaDx1tCCaloXBZBt63EMaCVSng1PBm\/jJf62JpftQtx1kfRZRCeCqgWWmOF6vBljN08og0KwN2S2lI1XjtiNMD2f9KLQncNfVCr7Rg==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">C4Container\r\n  t\u00edtulo \"Modelo de Cont\u00eainer para Plataforma Empresarial de Com\u00e9rcio Eletr\u00f4nico\"\r\n\r\n  Pessoa(cliente, \"Comprador Online\", \"Navega pelos itens do cat\u00e1logo e adiciona produtos ao seu carrinho digital.\")\r\n  System_Ext(gateway_pagamento, \"Servi\u00e7o API Stripe\", \"Banco de dados de cart\u00f5es de cr\u00e9dito de terceiros e motor de processamento.\")\r\n\r\n  System_Boundary(escopo_e_commerce, \"Per\u00edmetro Central de Com\u00e9rcio Eletr\u00f4nico\") {\r\n    Container(aplicativo_front_end, \"Aplicativo Web de Loja\", \"Next.js, React\", \"Entrega ativos est\u00e1ticos e gerencia sess\u00f5es de carrinho do usu\u00e1rio.\")\r\n    Container(servico_checkout, \"Microservi\u00e7o de Checkout\", \"Node.js, Express\", \"Processa fluxos de trabalho do carrinho de compras e calcula impostos.\")\r\n    ContainerDb(banco_pedidos, \"Banco de Dados de Registro de Pedidos\", \"PostgreSQL\", \"Armazena linhas de transa\u00e7\u00f5es hist\u00f3ricas e registros de ledger seguros.\")\r\n  }\r\n\r\n  %% Caminhos de Intera\u00e7\u00e3o Arquitet\u00f4nica\r\n  Rel(cliente, aplicativo_front_end, \"Visualiza produtos e faz pedidos usando\", \"HTTPS\/Navegador\")\r\n  Rel_Down(aplicativo_front_end, servico_checkout, \"Envia transa\u00e7\u00f5es de compras via\", \"JSON\/REST API\")\r\n  \r\n  Rel_Direita(servico_checkout, banco_pedidos, \"Persiste estados transacionais dentro de\", \"SQL\/Conex\u00e3o JDBC\")\r\n  Rel_Esquerda(servico_checkout, gateway_pagamento, \"Autoriza chamadas de cobran\u00e7a com token usando\", \"API Segura TLS\/HTTPS\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9VNtO20AQfUfiH0aRkIKEyEt\/ICSWCuKSJlH7aE3WE2fB3jW76xCo+jGoD4hKPLX9Av9YZ9YhpG3apzjr8Zwz55zZwbuBNQG1Ibe\/BxCal1AXFjoXNiP+zQjkffNNCqBChzAqMODcuhIhKStHHp3Goq0sm2entIWkoOCaH0Yr29nfk8Yj8t5iVxWaTKAj6HBx5TCzDq5Mwd07fHaJS8oRKkb2oAMZD5kFhaF5LGxugQAzzf0N1zib1YHL0IKnmouc02bBjHWuAxbHnUOBndz7QGWarEI3x0B3eJ9WmGPJJCwDTsgtdfNkoT86hUlwuoo8TtCoOHvGBL08cPvQ\/KT22TXPmQ6xIJBTpB0XEZQ28DR8yNwUj9uiRCJbVE5sbTJ0913yylY2pVTZspQ2DDwi17yUrJ2FAX\/s\/qfrIXyWtgAbA7tYFZrV0kubzh2fpmQy7trfHMMnmknHc3uNUXBaheNrfwRjQhXkJGFU8SCW81SetQ8MJwPm5MgojSy49xs1NsJbqH3dPDpt1+JvU\/OitLKpWpC6sXVgqAutWLhXB2TO9bvIjPMXmSUryZiXs9FaV5gX9ar1hSWaYdGivzFhVjFdQlphoeoCQZeV9RyYv7kNZ92ZGJ5WlGn2ezsAw9cAjCnXXnzh51FbFylxz9zR5MO5\/OvzUjwQp5MDvcBXgsZj8xTlWnCL5rtjM4SZW7eMdQVlLC8rm9duQ\/JLm5yDAxhgKaPF0lNeICctv3Ju3W3NixJiJlCKx1S8bdk\/AvFR+xoL\/bC1RgRzfIC1AmwkmszKSO+n09Gk1y4mL2vLizHSob0z\/wjcDq8Ts+Tc\/CbGlkv8TrDOJleXvXEymco6tkgbNO2I13pHjP60jlfIs6wk0Y3mtaDx1tCCaloXBZBt63EMaCVSng1PBm\/jJf62JpftQtx1kfRZRCeCqgWWmOF6vBljN08og0KwN2S2lI1XjtiNMD2f9KLQncNfVCr7Rg==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n             <\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptU11v2zAMfB\/Q\/0AEKJACbfOyP5AmAdYia7M42B4DRWJsrYpkkHQ+Nuy\/j7LT1mj7ksg0dUfenSdfJymK8RHp4guAeAkIg9ca3IUGa\/JRYJsIZlGQ9JERZjeTtNshWYRFMKJvd4OLLxljgcQpDm3DkrThGgZPMSgYFFWqa6SBVu4oHRgZrBETUglecMdgogPjHENNyTVWGCSBVOgJnC+9tuoFktvBVeYpTqy31rOjDGtz2mGUdWkED+akBIWQrxHGi3sokPbeYqZdVZ7cTa0YJ7CEzksGdLA3TZCWXpktMvtYAsZSp27JenR3qYnO0GmI9rz\/mm2qUdF7kkwSYRbC71AVG1zB3wwB8CrscEt6xOjWpq7befVGW4NfuIFxXed5H\/Eot7\/5GpZorOTKFIPfq8DAYsRbMMwonXKV\/gTVtGH1LesEnDdJkc+C9elthfY5NbLmTh2FnpxL8N1bSvym2mNy2E4xO9akkLm26HRSOs6uZr1aykOi521Qc9uRrAm20XRom5jjxzGmm2Eih7R2mxyTfIQ5ulL\/ppqMjeF2gEViKQmLH\/PBi1QMldd8kVcKEDKRVSDdFXLSOnJG26gLocMj9YvcixT\/Ok8vL2FMttL0WWlIke5zwM9ICyMV564lhl6a3xn30+OhF9g2Q8GoNtBulu1QcfLc31arRTHqkk\/dGIq8nqZDfJeGT8wp9GVPaw18SMb1N2fYe5N5Hoqnx9FyVqxy+jueF66lLyv5xPueCfnrVWW5D63C5LjpTj6yd60nasboYXo3yWZGbNvedprj9jOaj5\/puJFKTfyTA5KeMepJU1MZKjGHJzAcvFQtX+fmal6MWiG75f4D4gqf5g==\" rel=\"noopener noreferrer\" target=\"_blank\">\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\n<span>Edite Mermaid no VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"iepSRLk\"><img alt=\"\" class=\"alignnone size-full wp-image-983\" decoding=\"async\" height=\"863\" sizes=\"(max-width: 1746px) 100vw, 1746px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6.png 1746w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6-300x148.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6-1024x506.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6-768x380.png 768w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6-1536x759.png 1536w\" width=\"1746\"\/><\/p>\n<hr \/>\n<h2>Armadilhas Comuns de Sintaxe e Restri\u00e7\u00f5es do Sistema<\/h2>\n<p>Ao compilar mapas C4 limpos para frameworks de software, tenha cuidado com esses par\u00e2metros de execu\u00e7\u00e3o para evitar que o diagrama falhe:<\/p>\n<ul>\n<li><strong>Formata\u00e7\u00e3o de Separador por V\u00edrgula:<\/strong> Diferentemente de quase todos os outros esquemas Mermaid, os macros C4 exigem v\u00edrgulas estritas entre os par\u00e2metros: <code>Pessoa(id, \"R\u00f3tulo\", \"Desc\")<\/code>. Esquecer uma v\u00edrgula separadora far\u00e1 com que o construtor de layout falhe completamente.<\/li>\n<li><strong>Aspas de R\u00f3tulo Reservadas:<\/strong> Campos de exibi\u00e7\u00e3o, tags tecnol\u00f3gicas e blocos de descri\u00e7\u00e3o dentro de macros *devem* ser envolvidos por aspas duplas claras. Inserir textos brutos em campos sem envolver com aspas causa falhas de an\u00e1lise que quebram o diagrama.<\/li>\n<li><strong>Ordem de Aninhamento de Limites:<\/strong> Ao envolver elementos dentro de um <code>System_Boundary<\/code> ou <code>Enterprise_Boundary<\/code> bloco, voc\u00ea deve limpar explicitamente o conte\u00fado do espa\u00e7o de trabalho usando chaves padr\u00e3o <code>{ }<\/code>. Deixar uma chave de limite aberta ou combin\u00e1-las incorretamente quebra os layouts de renderiza\u00e7\u00e3o.<\/li>\n<li><strong>Inicializa\u00e7\u00e3o de Alias Din\u00e2mica:<\/strong> Voc\u00ea n\u00e3o pode desenhar relacionamentos (<code>Rel<\/code>) para um identificador de alias que n\u00e3o tenha sido inicializado explicitamente por um bloco de macro de elemento acima dele. Mantenha seu fluxo de declara\u00e7\u00e3o avan\u00e7ando progressivamente de cima para baixo.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Um Diagrama C4 \u00e9 um m\u00e9todo padronizado de visualiza\u00e7\u00e3o arquitet\u00f4nica projetado para modelar sistemas de software em m\u00faltiplos n\u00edveis de abstra\u00e7\u00e3o estrutural. Integrado nativamente ao Mermaid.js, o c4motor segue os quatro n\u00edveis principais do modelo C4: Contexto (o ecossistema macro),&#8230;","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":24,"template":"","meta":{"_yoast_wpseo_title":"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide","_yoast_wpseo_metadesc":"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.","inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"source_url":"","fifu_image_url":"","fifu_image_alt":"","_fifu_image_alt":"","fifu_alt":"","_fifu_alt":"","fifu_image_title":"","_fifu_image_title":"","fifu_input_alt":"","vp_image_hash":""},"ld_collection":[14],"class_list":["post-2078","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/\",\"name\":\"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4df36e38f3c.png\",\"datePublished\":\"2026-07-08T06:48:07+00:00\",\"description\":\"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4df36e38f3c.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4df36e38f3c.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Sintaxe de Diagrama C4 do Mermaid.js e Guia de Arquitetura\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/wp-content\\\/uploads\\\/sites\\\/10\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/wp-content\\\/uploads\\\/sites\\\/10\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide","description":"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/","og_locale":"pt_PT","og_type":"article","og_title":"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide","og_description":"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Tempo estimado de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/","url":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/","name":"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png","datePublished":"2026-07-08T06:48:07+00:00","description":"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/pt\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Sintaxe de Diagrama C4 do Mermaid.js e Guia de Arquitetura"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/pt\/#website","url":"https:\/\/www.vpascode.com\/pt\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/pt\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.vpascode.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/pt\/wp-content\/uploads\/sites\/10\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/pt\/wp-content\/uploads\/sites\/10\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/pt\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_docs\/2078","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/media?parent=2078"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_collection?post=2078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}