{"id":2087,"date":"2026-07-07T07:02:01","date_gmt":"2026-07-07T07:02:01","guid":{"rendered":"https:\/\/www.vpascode.com\/pt\/docs\/uncategorized\/mermaid-js-sankey-diagram-syntax-configuration-guide\/"},"modified":"2026-07-07T07:02:01","modified_gmt":"2026-07-07T07:02:01","slug":"mermaid-js-sankey-diagram-syntax-configuration-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","title":{"rendered":"Guia de Sintaxe e Configura\u00e7\u00e3o do Diagrama Sankey do Mermaid.js"},"content":{"rendered":"

Diagramas Sankey s\u00e3o ferramentas de visualiza\u00e7\u00e3o altamente eficazes usadas para representar o fluxo direcional de quantidades entre n\u00f3s distintos dentro de um sistema. Ao escalar a largura f\u00edsica das liga\u00e7\u00f5es conectadas proporcionalmente ao volume num\u00e9rico do fluxo, permitem que engenheiros, analistas e equipes de opera\u00e7\u00f5es identifiquem instantaneamente principais contribuintes, aloca\u00e7\u00f5es de recursos, inefici\u00eancias ou vazamentos em redes complexas, como redes de energia, cadeias de suprimentos e portf\u00f3lios financeiros.<\/p>\n

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

sankeysankey<\/code> ou sankey-beta<\/code> cabe\u00e7alho de declara\u00e7\u00e3o de tipo, seguido por linhas individuais de fluxo que seguem um padr\u00e3o estrito de Fonte,Alvo,Valor<\/code> padr\u00e3o.<\/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 
sankey\r\nN\u00f3 de Origem,N\u00f3 de Destino,150,50\r\nN\u00f3 de Destino,N\u00f3 de Sa\u00edda Final,90,25<\/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>
\nEdite o Mermaid no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Refer\u00eancia da Sintaxe<\/h2>\n
A tabela abaixo detalha as regras e par\u00e2metros principais de dados necess\u00e1rios para analisar corretamente um gr\u00e1fico Sankey no Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n
Elemento da 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 o motor de renderiza\u00e7\u00e3o de layout em fluxo. Aceita sankey<\/code> ou o compat\u00edvel com vers\u00f5es anteriores sankey-beta<\/code> string.<\/td>\n<\/tr>\n
N\u00f3 de Origem<\/strong><\/td>\nR\u00f3tulo de String<\/td>\nA categoria de origem onde o fluxo de recursos come\u00e7a. Identificador sens\u00edvel a mai\u00fasculas e min\u00fasculas.<\/td>\n<\/tr>\n
N\u00f3 de Alvo<\/strong><\/td>\nR\u00f3tulo de String<\/td>\nO n\u00f3 destinat\u00e1rio onde o volume espec\u00edfico de liga\u00e7\u00e3o termina.<\/td>\n<\/tr>\n
Valor<\/strong><\/td>\nN\u00famero Positivo \/ Inteiro<\/td>\nO peso num\u00e9rico do fluxo. A espessura da trajet\u00f3ria renderizada \u00e9 calculada diretamente em rela\u00e7\u00e3o a este valor.<\/td>\n<\/tr>\n
Linha de Coment\u00e1rio<\/strong><\/td>\nIndicador de Sintaxe<\/td>\nQualquer texto precedido por um sinal duplo de porcentagem (“%%<\/code>) \u00e9 ignorado pelo compilador, permitindo anota\u00e7\u00f5es de dados limpas.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Manipula\u00e7\u00e3o de Caracteres Especializados nos R\u00f3tulos de N\u00f3s<\/h2>\n
Como v\u00edrgulas e aspas servem como delimitadores estruturais do sistema dentro do motor de layout, entradas de nome especializadas exigem t\u00e9cnicas espec\u00edficas de escape para garantir que sejam exibidas corretamente na tela do frontend.<\/p>\n
1. V\u00edrgulas em Nomes<\/h3>\n
Se um r\u00f3tulo de n\u00f3 espec\u00edfico exigir uma v\u00edrgula literal, envolva todo o cont\u00eainer de string do n\u00f3 com um par de aspas duplas padr\u00e3o:<\/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                    
sankey\r\nPool de Or\u00e7amento,\"Opera\u00e7\u00f5es, Folha de Pagamento e Administra\u00e7\u00e3o\",45000<\/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
2. Aspas em Nomes<\/h3>\n
Para renderizar explicitamente aspas duplas dentro de um nome de r\u00f3tulo, envolva todo o par\u00e2metro com aspas externas e use um par duplicado de aspas duplas (“\"\"<\/code>) dentro da string de valor-alvo:<\/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                    
sankey\r\nClusters de Servidores,\"N\u00f3 Interno \"\"Edge\"\"\",850<\/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\n
Configura\u00e7\u00e3o Avan\u00e7ada de Tema (Diretivas)<\/h2>\n
Voc\u00ea pode ajustar com precis\u00e3o a apresenta\u00e7\u00e3o do seu diagrama passando um bloco de configura\u00e7\u00e3o de frontmatter no in\u00edcio do seu trecho de documento. Isso permite controlar estilos de liga\u00e7\u00e3o, espa\u00e7amento de layout, estilos de texto e alinhamentos de elementos diretamente do seu editor de texto bruto.<\/p>\n
Matriz de Atributos de Configura\u00e7\u00e3o de Sankey<\/h3>\n\n\n\n\n\n\n\n\n\n\n
Nome da Propriedade<\/th>\nValores Aceitos<\/th>\nResultado Visual<\/th>\n<\/tr>\n<\/thead>\n
mostrarValores<\/code><\/td>\nverdadeiro<\/code> | falso<\/code><\/td>\nAlternar se o texto do valor num\u00e9rico do fluxo \u00e9 impresso diretamente dentro das caixas de r\u00f3tulo do n\u00f3.<\/td>\n<\/tr>\n
corLigacao<\/code><\/td>\n'fonte'<\/code> | 'destino'<\/code> | 'gradiente'<\/code> | '#hex'<\/code><\/td>\nDetermina o mapeamento de cor dos caminhos de liga\u00e7\u00e3o.'gradiente'<\/code> mistura as cores suavemente entre as entidades conectadas.<\/td>\n<\/tr>\n
alinhamentoNo<\/code><\/td>\n'justificar'<\/code> | 'esquerda'<\/code> | 'direita'<\/code> | 'centro'<\/code><\/td>\nAlinha as colunas estruturais na grade do espa\u00e7o da tela.<\/td>\n<\/tr>\n
estiloRotulo<\/code><\/td>\n'heran\u00e7a'<\/code> | 'contornado'<\/code><\/td>\n'contornado'<\/code> adiciona uma m\u00e1scara de tra\u00e7o de fundo atr\u00e1s do texto para garantir alta legibilidade em layouts complexos.<\/td>\n<\/tr>\n
nodeWidth<\/code><\/td>\nInteiro (Pixels)<\/td>\nDefine a largura dos ret\u00e2ngulos dos n\u00f3s (Padr\u00e3o: 10<\/code>).<\/td>\n<\/tr>\n
nodePadding<\/code><\/td>\nInteiro (Pixels)<\/td>\nDefine os par\u00e2metros de espa\u00e7amento vertical entre linhas empilhadas (Padr\u00e3o: 12<\/code>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Projeto Pr\u00e1tico: Distribui\u00e7\u00e3o de Rede de Energia Limpa<\/h2>\n
Este projeto abrangente rastreia um sistema de gest\u00e3o de rede de infraestrutura el\u00e9trica. Ele demonstra configura\u00e7\u00f5es de frontmatter\u2014definindo gradientes suaves de cor em links, estilos tipogr\u00e1ficos contornados e desativando contagens de m\u00e9tricas embutidas\u2014associadas a uma estrutura de layout em m\u00faltiplos n\u00edveis.<\/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                    
---\r\nconfig:\r\n  sankey:\r\n    showValues: false\r\n    linkColor: 'gradiente'\r\n    nodeAlignment: 'justificar'\r\n    labelStyle: 'contornado'\r\n    nodeWidth: 15\r\n    nodePadding: 18\r\n---\r\nsankey\r\n%% Linhas de Dados de Origem\r\nFazenda Solar,Grade de Armazenamento de Energia,120.50\r\nTurbinas E\u00f3licas,Grade de Armazenamento de Energia,180.75\r\nUsina Hidrel\u00e9trica,Linha Industrial Direta,210.00\r\nImporta\u00e7\u00f5es de Biocombust\u00edvel,Esta\u00e7\u00e3o de Backup T\u00e9rmico,45.25\r\n\r\n%% N\u00f3s de Distribui\u00e7\u00e3o\r\nGrade de Armazenamento de Energia,Linhas de Consumo Residencial,145.00\r\nGrade de Armazenamento de Energia,Linha Industrial Direta,110.25\r\nGrade de Armazenamento de Energia,Perdas do Sistema e Dissipa\u00e7\u00e3o,46.00\r\n\r\n%% N\u00f3s Finais de Entrega\r\nLinha Industrial Direta,Hub de Manufatura Pesada,295.00\r\nLinha Industrial Direta,Sets Comerciais de Varejo,25.25\r\nEsta\u00e7\u00e3o de Backup T\u00e9rmico,Sets Comerciais de Varejo,45.25<\/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>
\nEdite o Mermaid no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n\n
Armadilhas Comuns de Sintaxe e Restri\u00e7\u00f5es do Sistema<\/h2>\n
Ao compilar matrizes de dados altamente densas, alguns erros sutis de configura\u00e7\u00e3o provocar\u00e3o falhas na an\u00e1lise do layout. Mantenha estas regras de solu\u00e7\u00e3o de problemas em mente:<\/p>\n
    \n
  • Verifica\u00e7\u00e3o Exata de Colunas:<\/strong> Cada linha de item ap\u00f3s a declara\u00e7\u00e3o do cabe\u00e7alho principal deve conter exatamente tr\u00eas par\u00e2metros separados por v\u00edrgulas. Adicionar uma quarta coluna ou omitir um valor impedir\u00e1 completamente a compila\u00e7\u00e3o do diagrama.<\/li>\n
  • Permiss\u00f5es de Linhas Vazias:<\/strong> Diferentemente das regras r\u00edgidas tradicionais de an\u00e1lise de dados, o Mermaid permite que voc\u00ea adicione linhas vazias e limpas dentro do bloco de c\u00f3digo para separar logicamente diferentes n\u00edveis ou fases de processamento dos seus dados do modelo.<\/li>\n
  • Blocos de La\u00e7o Circular:<\/strong> As estruturas Sankey s\u00e3o projetadas estritamente em torno de Grafos Direcionais Ac\u00edclicos (DAGs). Se voc\u00ea conectar o N\u00f3 A ao N\u00f3 B, e depois tentar escrever uma linha de caminho conectando o N\u00f3 B de volta ao N\u00f3 A, o motor de layout ter\u00e1 uma falha de feedback e apresentar\u00e1 erro.<\/li>\n
  • Restri\u00e7\u00f5es de Dados de Valor:<\/strong> Os campos de valor s\u00f3 podem analisar n\u00fameros positivos. Valores negativos ou caracteres alfab\u00e9ticos brutos n\u00e3o podem ser renderizados em par\u00e2metros de largura.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Diagramas Sankey s\u00e3o ferramentas de visualiza\u00e7\u00e3o altamente eficazes usadas para representar o fluxo direcional de quantidades entre n\u00f3s distintos dentro de um sistema. Ao escalar a largura f\u00edsica das liga\u00e7\u00f5es conectadas proporcionalmente ao volume num\u00e9rico do fluxo, permitem que engenheiros,…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":15,"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-2087","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nMermaid Sankey Diagram | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a 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-sankey-diagram-syntax-configuration-guide\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Sankey Diagram | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-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_6a4ca539ea639.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=\"4 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-sankey-diagram-syntax-configuration-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/\",\"name\":\"Mermaid Sankey Diagram | 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-sankey-diagram-syntax-configuration-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ca539ea639.png\",\"datePublished\":\"2026-07-07T07:02:01+00:00\",\"description\":\"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ca539ea639.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ca539ea639.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-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\":\"Guia de Sintaxe e Configura\u00e7\u00e3o do Diagrama Sankey 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 Sankey Diagram | VPasCode Text to Diagram Guide","description":"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a 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-sankey-diagram-syntax-configuration-guide\/","og_locale":"pt_PT","og_type":"article","og_title":"Mermaid Sankey Diagram | VPasCode Text to Diagram Guide","og_description":"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ca539ea639.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Tempo estimado de leitura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","url":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","name":"Mermaid Sankey Diagram | 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-sankey-diagram-syntax-configuration-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ca539ea639.png","datePublished":"2026-07-07T07:02:01+00:00","description":"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ca539ea639.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ca539ea639.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-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":"Guia de Sintaxe e Configura\u00e7\u00e3o do Diagrama Sankey 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\/2087","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=2087"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_collection?post=2087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}