{"id":2115,"date":"2026-05-26T08:00:30","date_gmt":"2026-05-26T08:00:30","guid":{"rendered":"https:\/\/www.vpascode.com\/pt\/docs\/uncategorized\/mermaid-js-syntax-basis\/"},"modified":"2026-05-26T08:00:30","modified_gmt":"2026-05-26T08:00:30","slug":"mermaid-js-syntax-basis","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","title":{"rendered":"Base da Sintaxe do Mermaid.js"},"content":{"rendered":"<p>Antes de mergulhar em layouts arquitet\u00f4nicos espec\u00edficos, como fluxogramas complexos ou cronogramas de sequ\u00eancia, \u00e9 essencial entender as regras fundamentais que regem o <strong>Guia do Mermaid<\/strong>. O Mermaid depende de um sistema de nota\u00e7\u00e3o de texto limpo e altamente intuitivo. Uma vez que voc\u00ea entenda como o motor inicializa um tipo de canvas, nomeia componentes estruturais e roteia setas direcionais, escrever qualquer layout de sistema complexo torna-se completamente natural.<\/p>\n<p>Este breve guia aborda as mec\u00e2nicas sint\u00e1ticas estruturais globais que se aplicam a quase todos os tipos de diagramas do Mermaid dentro do ambiente VPasCode.<\/p>\n<h2>1. Os Envolt\u00f3rios Obrigat\u00f3rios do Tipo de Diagrama<\/h2>\n<p>Cada bloco individual de c\u00f3digo Mermaid deve come\u00e7ar declarando explicitamente seu arqu\u00e9tipo de diagrama na primeira linha. Isso informa ao parser do VPasCode exatamente qual motor estrutural deve ser iniciado na sua \u00e1rea de visualiza\u00e7\u00e3o:<\/p>\n<ul>\n<li><code>graph TD<\/code> \u2014 Especifica um layout de Fluxograma organizado de Cima para Baixo.<\/li>\n<li><code>sequenceDiagram<\/code> \u2014 Especifica um gr\u00e1fico de Linha do Tempo cronol\u00f3gica de tempo de execu\u00e7\u00e3o.<\/li>\n<li><code>classDiagram<\/code> \u2014 Especifica um projeto estrutural de software Orientado a Objetos.<\/li>\n<\/ul>\n<p>Diferentemente de outras engines de texto para diagrama, o Mermaid n\u00e3o exige tags de fechamento. O parser simplesmente l\u00ea a declara\u00e7\u00e3o estrutural na primeira linha e compila tudo que est\u00e1 aninhado diretamente abaixo dentro do cont\u00eainer do seu bloco de c\u00f3digo.<\/p>\n<h2>2. Declarando Elementos: IDs vs. R\u00f3tulos de Exibi\u00e7\u00e3o<\/h2>\n<p>Ao modelar um sistema de software, voc\u00ea criar\u00e1 diversos elementos estruturais, como componentes, bancos de dados ou microservi\u00e7os. No Mermaid, voc\u00ea declara um elemento definindo um ID alfanum\u00e9rico curto e interno, seguido imediatamente por um estilo de colchetes que controla sua forma visual, e um nome amig\u00e1vel para exibi\u00e7\u00e3o:<\/p>\n<pre><code>microservice_id[API de Processamento de Pagamentos]\r\ndb_id[(SQL de Transa\u00e7\u00e3o do Usu\u00e1rio)]<\/code><\/pre>\n<p><strong>Por que esta \u00e9 uma melhor pr\u00e1tica:<\/strong> Usar um ID interno curto e limpo (como <code>microservice_id<\/code>) torna o desenho de linhas de relacionamento muito mais r\u00e1pido posteriormente. Se voc\u00ea precisar alguma vez mudar o r\u00f3tulo vis\u00edvel para o cliente de \u201cAPI de Processamento de Pagamentos\u201d para \u201cServi\u00e7o de Checkout Global\u201d, voc\u00ea precisar\u00e1 apenas edit\u00e1-lo na \u00fanica linha onde foi declarado, em vez de atualizar dezenas de linhas em todo o seu script.<\/p>\n<h2>3. Dominando Setas de Relacionamento e Roteamento Direcional<\/h2>\n<p>Conex\u00f5es entre n\u00f3s do sistema s\u00e3o desenhadas usando combina\u00e7\u00f5es de tra\u00e7os (<code>-<\/code>), sinais de igualdade (<code>=<\/code>), e colchetes de seta (<code>&gt;<\/code>). O estilo das suas linhas fornece um controle impl\u00edcito sobre como o motor de layout autom\u00e1tico escala o seu diagrama:<\/p>\n<ul>\n<li><code>A --&gt; B<\/code> desenha uma seta direcional padr\u00e3o apontando do elemento A diretamente para o elemento B.<\/li>\n<li><code>A --- B<\/code> desenha uma linha de liga\u00e7\u00e3o plana e n\u00e3o direcional, sem ponta de seta, ideal para associa\u00e7\u00f5es simples.<\/li>\n<li><code>A -.-&gt; B<\/code> cria uma linha de depend\u00eancia pontilhada, que \u00e9 o padr\u00e3o da ind\u00fastria para indicar depend\u00eancias ass\u00edncronas ou webhooks de rede.<\/li>\n<li><code>A ==&gt; B<\/code> cria uma linha de conex\u00e3o grossa e em negrito, perfeita para destacar rotas principais de processamento de dados ou links de infraestrutura cr\u00edtica.<\/li>\n<\/ul>\n<h2>4. Adicionando contexto inline: r\u00f3tulos e coment\u00e1rios de c\u00f3digo<\/h2>\n<p>Documenta\u00e7\u00e3o clara depende muito de colocar o contexto apropriado ao redor das suas linhas visuais e scripts de texto:<\/p>\n<h3>Rotulando linhas de conex\u00e3o<\/h3>\n<p>Voc\u00ea pode adicionar texto explicativo diretamente em qualquer linha de conex\u00e3o inserindo a string de texto entre dois pares de tra\u00e7os, ou acrescentando um caractere de pipe (<code>|Texto|<\/code>) logo ap\u00f3s o seu mapeamento de relacionamento:<\/p>\n<pre><code>client_id -- \"POST HTTPS \/v1\/checkout\" --&gt; api_id\r\nclient_id --&gt; |POST HTTPS \/v1\/checkout| api_id<\/code><\/pre>\n<h3>Escrevendo coment\u00e1rios de c\u00f3digo<\/h3>\n<p>Se voc\u00ea quiser deixar uma nota administrativa, cr\u00e9dito de design ou explica\u00e7\u00e3o arquitet\u00f4nica dentro do seu arquivo de script sem renderizar uma caixa visual na tela, use dois sinais de porcentagem (<code>%%<\/code>). Isso informa ao motor para ignorar completamente a an\u00e1lise dessa linha:<\/p>\n<pre><code>%% TODO: Precisamos atualizar esta caixa de limite assim que a migra\u00e7\u00e3o DevOps for conclu\u00edda\r\n[Monolito Legado] --&gt; [Novo Microservi\u00e7o]<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Antes de mergulhar em layouts arquitet\u00f4nicos espec\u00edficos, como fluxogramas complexos ou cronogramas de sequ\u00eancia, \u00e9 essencial entender as regras fundamentais que regem o Guia do Mermaid. O Mermaid depende de um sistema de nota\u00e7\u00e3o de texto limpo e altamente intuitivo&#8230;.<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"template":"","meta":{"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":""}}},"ld_collection":[14],"class_list":["post-2115","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.js Syntax Basics | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.\" \/>\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-syntax-basis\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\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=\"3 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-syntax-basis\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/\",\"name\":\"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#website\"},\"datePublished\":\"2026-05-26T08:00:30+00:00\",\"description\":\"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/#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\":\"Base da Sintaxe do Mermaid.js\"}]},{\"@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.js Syntax Basics | VPasCode Text to Diagram Guide","description":"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.","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-syntax-basis\/","og_locale":"pt_PT","og_type":"article","og_title":"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide","og_description":"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.","og_url":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","og_site_name":"VPasCode","twitter_card":"summary_large_image","twitter_misc":{"Tempo estimado de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","url":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","name":"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/pt\/#website"},"datePublished":"2026-05-26T08:00:30+00:00","description":"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/#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":"Base da Sintaxe do Mermaid.js"}]},{"@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\/2115","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\/4"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/media?parent=2115"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_collection?post=2115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}