{"id":2091,"date":"2026-07-07T07:02:01","date_gmt":"2026-07-07T07:02:01","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/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\/es\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","title":{"rendered":"Gu\u00eda de sintaxis y configuraci\u00f3n de diagramas Sankey de Mermaid.js"},"content":{"rendered":"

Los diagramas Sankey son herramientas de visualizaci\u00f3n altamente efectivas utilizadas para representar el flujo direccional de cantidades entre nodos distintos dentro de un sistema. Al escalar el ancho f\u00edsico de los enlaces conectores proporcionalmente al volumen num\u00e9rico del flujo, permiten a ingenieros, analistas y equipos de operaciones identificar instant\u00e1neamente los principales contribuyentes, asignaciones de recursos, ineficiencias o fugas dentro de redes complejas como redes de energ\u00eda, cadenas de suministro y carteras financieras.<\/p>\n

Estructura b\u00e1sica de sintaxis<\/h2>\n

Las definiciones de dise\u00f1o Sankey se basan en un formato estructural optimizado de CSV (valores separados por comas) de 3 columnas. Cada archivo comienza con el sankey<\/code> o sankey-beta<\/code> encabezado de declaraci\u00f3n de tipo, seguido por l\u00edneas de flujo individuales que siguen un patr\u00f3n estricto de Origen,Objetivo,Valor<\/code> patr\u00f3n.<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid en 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\nNodo de origen,Nodo de destino,150.50\r\nNodo de destino,Nodo de salida 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>
\nEditar Mermaid en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Referencia de sintaxis<\/h2>\n
La tabla a continuaci\u00f3n desglosa las reglas y par\u00e1metros principales de datos necesarios para analizar correctamente un gr\u00e1fico Sankey en Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n
Elemento de sintaxis<\/th>\nRequisito de tipo<\/th>\nDescripci\u00f3n y reglas de uso<\/th>\n<\/tr>\n<\/thead>\n
Declaraci\u00f3n<\/strong><\/td>\nIdentificador de palabra clave<\/td>\nInicializa el motor de dise\u00f1o de renderizado de flujo. Acepta sankey<\/code> o el sankey-beta<\/code> cadena.<\/td>\n<\/tr>\n
Nodo de origen<\/strong><\/td>\nEtiqueta de cadena<\/td>\nLa categor\u00eda de origen donde comienza el flujo de recursos. Identificador sensible a may\u00fasculas y min\u00fasculas.<\/td>\n<\/tr>\n
Nodo de destino<\/strong><\/td>\nEtiqueta de cadena<\/td>\nEl nodo receptor donde termina el volumen de enlace espec\u00edfico.<\/td>\n<\/tr>\n
Valor<\/strong><\/td>\nN\u00famero positivo decimal \/ entero<\/td>\nEl peso num\u00e9rico del flujo. El grosor de la ruta renderizada se calcula directamente en relaci\u00f3n con este valor.<\/td>\n<\/tr>\n
L\u00ednea de comentario<\/strong><\/td>\nIndicador de sintaxis<\/td>\nCualquier texto precedido por un signo de porcentaje doble (“%%<\/code>) es ignorado por el compilador, permitiendo anotaciones de datos limpias.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Manejo de caracteres especializados en etiquetas de nodos<\/h2>\n
Dado que las comas y las comillas sirven como delimitadores estructurales del sistema dentro del motor de dise\u00f1o, las entradas de nombres especializadas requieren t\u00e9cnicas espec\u00edficas de escape para garantizar que se muestren correctamente en la superficie de visualizaci\u00f3n del frontend.<\/p>\n
1. Comas en nombres<\/h3>\n
Si una etiqueta de nodo espec\u00edfica requiere una coma literal, envuelva todo el contenedor de cadena del nodo entre un par de comillas dobles est\u00e1ndar:<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid en 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                    
sankeyrnPresupuesto Pool,\"Operaciones, N\u00f3mina y Administraci\u00f3n\",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 en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
2. Comillas en nombres<\/h3>\n
Para representar expl\u00edcitamente comillas dobles dentro de un nombre de etiqueta, envuelva el par\u00e1metro completo entre comillas externas y use un par duplicado de comillas dobles (“\"\"<\/code>) dentro de la cadena de valor objetivo:<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid en 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                    
sankeyrnClusters de servidores,\"Nodo interno \"\"Borde\"\"\",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 en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n\n
Configuraci\u00f3n avanzada de temas (directivas)<\/h2>\n
Puedes ajustar finamente la presentaci\u00f3n de tu diagrama pasando un bloque de configuraci\u00f3n de frontmatter en la parte superior de tu fragmento de documento. Esto te permite controlar estilos de enlaces, relleno de dise\u00f1o, estilos de texto y alineaciones de elementos directamente desde tu editor de texto sin formato.<\/p>\n
Matriz de atributos de configuraci\u00f3n de Sankey<\/h3>\n\n\n\n\n\n\n\n\n\n\n
Nombre de propiedad<\/th>\nValores aceptados<\/th>\nResultado visual<\/th>\n<\/tr>\n<\/thead>\n
mostrarValores<\/code><\/td>\nverdadero<\/code> | falso<\/code><\/td>\nConmuta si el texto del valor num\u00e9rico de flujo se imprime directamente dentro de las cajas de etiquetas de los nodos.<\/td>\n<\/tr>\n
colorEnlace<\/code><\/td>\n'origen'<\/code> | 'destino'<\/code> | 'gradiente'<\/code> | '#hex'<\/code><\/td>\nDetermina el mapeo de color para las rutas de enlace.'gradiente'<\/code> mezcla los colores suavemente entre las entidades conectadas.<\/td>\n<\/tr>\n
alineacionNodo<\/code><\/td>\n'justificar'<\/code> | 'izquierda'<\/code> | 'derecha'<\/code> | 'centro'<\/code><\/td>\nAlinea las columnas estructurales a trav\u00e9s de la cuadr\u00edcula del espacio del lienzo.<\/td>\n<\/tr>\n
estiloEtiqueta<\/code><\/td>\n'herencia'<\/code> | 'contorneado'<\/code><\/td>\n'contorneado'<\/code> a\u00f1ade una m\u00e1scara de trazo de fondo detr\u00e1s del texto para garantizar una alta escaneabilidad sobre dise\u00f1os complejos.<\/td>\n<\/tr>\n
anchoNodo<\/code><\/td>\nEntero (p\u00edxeles)<\/td>\nEstablece el ancho de los rect\u00e1ngulos de nodo (predeterminado: 10<\/code>).<\/td>\n<\/tr>\n
espaciadoNodo<\/code><\/td>\nEntero (p\u00edxeles)<\/td>\nEstablece los par\u00e1metros de separaci\u00f3n vertical entre filas apiladas (predeterminado: 12<\/code>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Plano del mundo real: Distribuci\u00f3n de red de energ\u00eda limpia<\/h2>\n
Este plano completo rastrea un sistema de gesti\u00f3n de red de infraestructura el\u00e9ctrica. Muestra configuraciones de frontmatter: establece gradientes de color suaves en los enlaces, estilos tipogr\u00e1ficos contorneados y desactiva los recuentos de m\u00e9tricas en l\u00ednea, todo combinado con una estructura de dise\u00f1o en m\u00faltiples niveles.<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid en 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    mostrarValores: false\r\n    colorEnlaces: 'gradiente'\r\n    alineacionNodos: 'justificar'\r\n    estiloEtiquetas: 'contorneado'\r\n    anchoNodo: 15\r\n    espaciadoNodo: 18\r\n---\r\nsankey\r\n%% Filas de datos de origen\r\nGranja solar,Red de almacenamiento de energ\u00eda,120.50\r\nTurbinas e\u00f3licas,Red de almacenamiento de energ\u00eda,180.75\r\nPresas hidroel\u00e9ctricas,L\u00ednea industrial directa,210.00\r\nImportaciones de biocombustibles,Estaci\u00f3n de respaldo t\u00e9rmico,45.25\r\n\r\n%% Nodos de distribuci\u00f3n\r\nRed de almacenamiento de energ\u00eda,L\u00edneas de consumo residencial,145.00\r\nRed de almacenamiento de energ\u00eda,L\u00ednea industrial directa,110.25\r\nRed de almacenamiento de energ\u00eda,P\u00e9rdidas del sistema y disipaci\u00f3n,46.00\r\n\r\n%% Nodos de terminaci\u00f3n de entrega final\r\nL\u00ednea industrial directa,Hub de fabricaci\u00f3n pesada,295.00\r\nL\u00ednea industrial directa,Sectores comerciales minoristas,25.25\r\nEstaci\u00f3n de respaldo t\u00e9rmico,Sectores comerciales minoristas,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>
\nEditar Mermaid en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n\n
Errores comunes de sintaxis y limitaciones del sistema<\/h2>\n
Al compilar matrices de datos altamente densas, algunos errores sutiles de configuraci\u00f3n provocar\u00e1n interrupciones en el an\u00e1lisis del dise\u00f1o. Tenga en cuenta estas reglas de soluci\u00f3n de problemas:<\/p>\n
    \n
  • Verificaci\u00f3n exacta de columnas:<\/strong> Cada l\u00ednea de elemento que sigue a la declaraci\u00f3n del encabezado principal debe contener exactamente tres par\u00e1metros separados por comas. A\u00f1adir una cuarta columna o omitir un valor provocar\u00e1 la interrupci\u00f3n completa de la compilaci\u00f3n del diagrama.<\/li>\n
  • Permisos para l\u00edneas vac\u00edas:<\/strong> A diferencia de las reglas r\u00edgidas tradicionales de an\u00e1lisis de datos, Mermaid le permite a\u00f1adir l\u00edneas vac\u00edas y limpias dentro del bloque de c\u00f3digo para separar l\u00f3gicamente diferentes niveles o fases de procesamiento de sus datos del modelo.<\/li>\n
  • Bloques de bucle circular:<\/strong> Las estructuras Sankey est\u00e1n dise\u00f1adas estrictamente alrededor de Grafos Dirigidos Ac\u00edclicos (DAG). Si conecta el Nodo A con el Nodo B, y luego intenta escribir una ruta que conecte el Nodo B de vuelta al Nodo A, el motor de dise\u00f1o experimentar\u00e1 una ruptura de retroalimentaci\u00f3n y generar\u00e1 un error.<\/li>\n
  • Restricciones de datos de valor:<\/strong> Los campos de valor solo pueden analizar n\u00fameros positivos. Los valores negativos o caracteres alfab\u00e9ticos sin procesar no pueden representarse como par\u00e1metros de ancho.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Los diagramas Sankey son herramientas de visualizaci\u00f3n altamente efectivas utilizadas para representar el flujo direccional de cantidades entre nodos distintos dentro de un sistema. Al escalar el ancho f\u00edsico de los enlaces conectores proporcionalmente al volumen num\u00e9rico del flujo, permiten…<\/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-2091","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\/es\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\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\/es\/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=\"Tiempo de lectura\" \/>\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\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/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\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/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\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/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\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Gu\u00eda de sintaxis y configuraci\u00f3n de diagramas Sankey de Mermaid.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#\\\/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\/es\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","og_locale":"es_ES","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\/es\/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":{"Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","url":"https:\/\/www.vpascode.com\/es\/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\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/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\/es\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/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\/es\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/es\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/es\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Gu\u00eda de sintaxis y configuraci\u00f3n de diagramas Sankey de Mermaid.js"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/es\/#website","url":"https:\/\/www.vpascode.com\/es\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/es\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_docs\/2091","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/media?parent=2091"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_collection?post=2091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}